@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html,
body {
   height: 100%;
}

body {
   min-height: 100vh;
   font-family: adobe-garamond-pro, serif;
   font-family: 'Montserrat', sans-serif;
   text-align: center;
   display: grid;
   place-items: center;
   background: red;
}

.hamburger {
   position:fixed;
   top:0;
   right:0;
   padding:16px;
   z-index:100;
}

.mainnav {
   background-color:red;
   box-shadow:0 3px 3px rgb(134, 56, 56);
   position:fixed;
   width:100%;
   display:flex;
   justify-content: space-around;
   flex-direction:column;
   transition:opacity ease .3s;
   opacity:0;
}

.mainnav li {
   list-style-type:none;
}

.mainnav li a {
   text-decoration:none;
   color:#fff;
   padding:12px;
   display:block;
}

h1 {
   font-size: 22px;
}

@media screen and (orientation: landscape) {

   h1 {
      font-size: 42px;
   }

   div.thumbs {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 12px;
   }

}

div.thumb {
   width: 300px;
   height: 300px;
   background: #fff;
}

@media screen and (orientation: landscape) {
   body {
      grid-template-columns: 1fr 1fr;
   }

   .mainnav {
      flex-direction:row;
      position:fixed;
   }

}


.appear {
   opacity:1;
}