html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}


 #container {
    margin:auto;
 }


nav {
    background-color: rgb(221, 87, 3);
    display:flex;
    justify-content: space-around;
    align-items: center;
    font-family: "Caprasimo", serif;
    padding: 1vw 0;
}

nav a {
   font-size: 25px;
}



nav img {
    width: 100%;
    position: absolute;
    z-index: 10;
    width: 16%;
    left: 05%;
    top: 10px;
}

.navbar {
   display: none;
 }

 .navbar img {
   width: 100%;
   position: absolute;
   z-index: 10;
   width: 16%;
   left: 05%;
   top: 10px;
 }


.navbar {
   width: 100%;
   box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
 }
 
 .nav-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 62px;
   font-family: "Caprasimo", serif;
   
 }
 
 .navbar .menu-items {
   display: flex;
 }
 
 .navbar .nav-container li {
   list-style: none;
 }
 
 .navbar .nav-container a {
   text-decoration: none;
   color: #ffffff;
   font-weight: 500;
   font-size: 1.2rem;
   padding: 0.7rem;
 }
 
 .navbar .nav-container a:hover{
     font-weight: bolder;
 }
 
 .nav-container {
   display: block;
   position: relative;
   height: 60px;
   margin-top: -32px;
 }
 
 .nav-container .checkbox {
   position: absolute;
   display: block;
   height: 32px;
   width: 32px;
   top: 20px;
   right: 20px;
   z-index: 5;
   opacity: 0;
   cursor: pointer;
 }

 .nav-container li {
   margin: 10;
 }
 
 .nav-container .hamburger-lines {
   display: block;
   height: 26px;
   width: 32px;
   position: absolute;
   top: 17px;
   right: 20px;
   z-index: 2;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .nav-container .hamburger-lines .line {
   display: block;
   height: 4px;
   width: 100%;
   border-radius: 10px;
   background: #ffffff;
 }
 
 .nav-container .hamburger-lines .line1 {
   transform-origin: 0% 0%;
   transition: transform 0.4s ease-in-out;
 }
 
 .nav-container .hamburger-lines .line2 {
   transition: transform 0.2s ease-in-out;
 }
 
 .nav-container .hamburger-lines .line3 {
   transform-origin: 0% 100%;
   transition: transform 0.4s ease-in-out;
 }
 
 .navbar .menu-items {
   padding-top: 75px;
   /* box-shadow: inset 0 0 2000px rgba(55, 44, 67, 0.667); */
   height: 395vh;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.566);
   transform: translate(-150%);
   display: flex;
   flex-direction: column;
   margin-left: -40px;
   padding-left: 50px;
   transition: transform 0.5s ease-in-out;
   text-align: center;
 }
 
 .navbar .menu-items li {
   margin-bottom: 1.2rem;
   font-size: 1.5rem;
   font-weight: 500;
 }
 
 .logo {
   position: absolute;
   top: 5px;
   right: 15px;
   font-size: 1.2rem;
   color: #ffffff;
 }
 
 .nav-container input[type="checkbox"]:checked ~ .menu-items {
   transform: translateX(0);
 }
 
 .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
   transform: rotate(45deg);
 }
 
 .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
   transform: scaleY(0);
 }
 
 .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
   transform: rotate(-45deg);
 }
 
 .nav-container input[type="checkbox"]:checked ~ .logo{
   display: none;
 }

#space {
   margin-left: 15%;
}

li {
    background-color: rgb(221, 87, 3);
    width: 26.686111111111111%;
    padding-top: 0.7%;
    padding-bottom: 0.7%;
    padding-left: 2%;
    padding-right: 2%;
    margin:auto;
    justify-content: center;
    border-radius: 43px;
    margin-top: 20px;
}

li h2 {
    color: white;
    text-align: center;
    padding: 2%;
    padding-bottom: 5%;
}

li h3 {
    font-family: "Caprasimo", serif;
    color: white;
}

li p {
    font-family: "Alata", sans-serif;
    color: white;

    padding-top: 5%;
    padding-bottom: 5%;
}

li img {
    padding-bottom: 5%;
    padding-top: 5%;
}

ul {
    /* turns on flexbox */
    display:flex;
    /* justify content */
    justify-content: space-between;
    margin-left: 8.472222222222223%;
    margin-right: 8.472222222222223%;
    margin-top: 4.149305555555555%;
    margin-bottom: 4.149305555555555%;
    
 }

 img {
    width: 100%;
 }

 a {
    color: white;
    text-decoration: none;
    font-size: 32px;
    padding: 10px;
    justify-content: space-between;
 }
 
 #seasonal {
    background-color:rgb(221, 87, 3);
    justify-content: space-between;
    padding-top: 3%;
    width: 80%;
    margin-left: 8.472222222222223%;
    margin-right: 8.472222222222223%;
    margin-top: 4.149305555555555%;
    margin-bottom: 4.149305555555555%;
    border-radius: 43px;
    padding-bottom: 3%;
 }

 #seasonal h2 {
    color: white;
    text-align:center;
    width: 100%;
    padding-bottom: 2%;
 }

 #seasonaltext {
    display:flex;
    justify-content: space-around;
    padding:1%;
    font-family: "Caprasimo", serif;
    color: white;
    width: 100%;
 }

 #quote {
    display:flex;
    width:87.463888888888889%;
    margin:auto;
    padding-top: 5%;
    padding-bottom: 5%;
 }

 #quotepic {
    width: 130%;
    background-color:rgb(221, 87, 3);
    padding: 1%;
    border-radius: 8%;
 }

 #quotetext {
   width: 60%;
   font-size: 20px;
    padding-top: 15%;
    padding-right: 8%;
    padding-left: 8%;
    color:rgb(221, 87, 3);
    justify-content: center;
    font-family: "Alata", sans-serif;
 }

 h2 {
    font-family: "Caprasimo", serif;
    font-size: larger;
 }

 #footer {
    background-color:rgb(221, 87, 3);
    display:flex;
    padding-top: 2%;
    padding-bottom: 3%;
    justify-content: space-around;
 }

 #logotwo {
   padding-left: 9%;
   padding-right: 5%;
 }

 #location, #hours {
    margin:auto;
    color: white;
    padding: 1%

 }

#location h2, #hours h2 {
    text-align: center;
    padding-bottom: 10%;
}

#location p, #hours p {
   padding-bottom: 8%;
   font-family: "Alata", sans-serif;

}

/* #socials {
   display: flex;
   background-color:rgb(221, 87, 3);
   justify-content: space-around;
   padding-right: 10%;
   padding-left: 10%;
   padding-bottom: 5%;
   padding-top: 1%;
   width: 80%;
}

#socials img {

   width: 3%;
} */
@media screen and (max-width:1200px) {
    #seasonaltext {
        flex-wrap: wrap;
       }
    
       #seasonaltext h3 {
        padding-bottom: 2%;
        padding: 1%;
        text-align: center;
       }
}

@media screen and (max-width:975px) {

   li p {
      font-size: 12px;
   }

   #seasonaltext {
    flex-wrap: wrap;
   }

   #seasonaltext h3 {
    padding-bottom: 2%;
   }
}


/* tablet and SMALLER size at 850px */
@media screen and (max-width:850px) {
   li {
      border-radius: 35px;
   }

   #quotetext {
      font-size: 12px;
      padding-top: 14%;
   }

   nav a {
      font-size: 18px;
   }

   li p {
      font-size: 11px;
   }

   #seasonaltext {
    flex-wrap: wrap;
   }

   #seasonaltext h3 {
    padding-bottom: 2%;
   }
}

@media screen and (max-width:650px) {
   #quotetext {
      font-size: 11px;
      padding-top: 10%;
   }

   #logotwo {
      width: 25%;
   }

   #location h2, #hours h2 {
      font-size: 14px;
   }

   #location p, #hours p {
      font-size: 12px;
   }

   #seasonaltext a {
      font-size: 14px;
   }

   li {
      border-radius: 25px;
   }
}

@media screen and (max-width: 550px) {
   nav {
     display:none;
   }
   .navbar {
     display: block;
     background-color: rgb(221, 87, 3);

   }
 }

/* phone */
@media screen and (max-width: 550px) {
   nav a {
      font-size: 18px;
   }

   ul {
      display: block;
      padding-bottom: 7%;
      
   }

   li {
      width: 90%;
      border-radius: 40px;
   }

   #seasonal {
    display:block;
   }

   #seasonalpic {
      width:80%;
      margin-left: 10%;
      margin-right: 10%;
      margin-bottom: 5%;
   }

   #seasonaltext {
     flex-wrap: wrap;
     text-align: left;
      width: 70%;
      margin-left: 15%;
      margin-right: 15%;
   }

   

   #seasonaltext h3 {
    padding-bottom: 4%;
   }

   #quote {
      display:block;
   }

   #quotetext {
      width: 60%;
      margin-left: 10%;
      margin-right: 10%;
      margin-bottom: 5%;
   }

   #quotepic {
      width: 80%;
      margin-left: 10%;
      margin-right: 10%;
   }

}