@import url("https://use.typekit.net/loc4sbc.css");

body {
   padding: 0;
   margin: 0;
   background-color: rgb(249, 238, 218);
}

a {
  text-decoration: none;
  outline: none;
  color: inherit;
}

a:hover {
  text-decoration: wavy;
  color: #345e45;
  font-style: italic;
}

 .headingimages {
    width: 100vw;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
 }

 .headingpic {
    width: 100vw;
    object-fit: cover;
    display: block;
    padding: 0;
    margin: 0;
 }

 .logopic {
    position: absolute;
    top: -30px;
    left: 50px;
    z-index: 10;
    width: 550px;
 }

 p {
    font-family: "kit-rounded", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 24pt;
    word-spacing: 50px;
    position: absolute;
    top: 70px;
    right: 50px;
 }

 .aboutsection {
   width: 100vw;
   height: 800px;
 }

 .heading1 {
   font-family: kit-rounded, sans-serif;
   font-weight: 700;
   font-style: italic;
   font-size: 85pt;
   text-align: center;
   margin: 20px;
 }

 .basketpic {
   width: 820px;
   position: absolute;
   left: 50px;
 }

 .pinkbox {
   background-color: #f15b5c;
   height: 545px;
   width: 500px;
   position: absolute;
   right: 50px;
   border-radius: 20px;
   border: #345e45;
   border-style: dotted;
   border-width: 5px;
 }

 .text1 {
   font-family: kit-rounded, sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 14pt;
   position: absolute;
   left: 30px;
   right: 20px;
   top: 30px;
 }

 @keyframes loop {
   0% {transform: translateX(0%);}
   100% {transform: translateX(-50%);}
 }

 .continuous {
  padding: 2% 0;
  height: 100px;
  width: 100vw;
  margin-top: 30%;
 }

 .mouths {
   width: 470px;
 }

 #container {
   display: flex;
   overflow: hidden;
   white-space: nowrap;
   padding: 2% 0;
 }

 #container .scroll {
   display: flex;
   align-items: center;
   justify-content: space-around;
   width: fit-content;
   white-space: nowrap;
   animation: scroll 10s linear infinite;
 }

 .ingredientsection {
  width: 100vw;
  height: 600px;
  margin-top: 18%;
 }

 .heading2 {
   font-family: kit-rounded, sans-serif;
   font-weight: 700;
   font-style: italic;
   font-size: 85pt;
   text-align: center;
   margin: 20px;
 }

 .gardenpic {
   width: 820px;
   position: absolute;
   right: 50px;
 }

 .yellowbox {
  background-color: #f8c357;
   height: 460px;
   width: 500px;
   position: absolute;
   left: 50px;
   border-radius: 20px;
   border: #345e45;
   border-style: dotted;
   border-width: 5px;
 }

 .text2 {
   font-family: kit-rounded, sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 14pt;
   position: absolute;
   left: 30px;
   right: 20px;
   top: 30px;
 }

 .iconsection {
  height: 300px;
  width: 100vw;
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-top: 130px;
 }

 .icon {
  height: 190px;
  width: 170px;
 }

 .exploreflavors {
  height: 550px;
  margin-left: 50px;
  margin-right: 50px;
  background-color: #8d1836;
  border-radius: 20px;
  margin-bottom: 10px;
 }

 h3 {
   font-family: kit-rounded, sans-serif;
   font-weight: 700;
   font-style: italic;
   font-size: 50pt;
   color: floralwhite; 
   position: relative;
   left: 40px;
   top: 10px;
   margin-top: 0;
 }

 #bags {
   height: 390px;
   width: 370px;
   display: flex;
   position: relative;
   margin-top: -25px;  
   left: 45px;
   gap: 30px;
 }

.nutrition1 {
  position: absolute; 
  opacity: 0; 
  width: 90%;
}

#bags:hover .chesbay { opacity: 0; }
#bags:hover .nutrition1 { opacity: 1; }

.nutrition2 {
  position: absolute; 
  opacity: 0; 
  width: 90%;
  left: 21em;
}

#bags:hover .bbq { opacity: 0; }
#bags:hover .nutrition2 { opacity: 1; }

.nutrition3 {
  position: absolute; 
  opacity: 0; 
  width: 90%;
  left: 42em;
}

#bags:hover .nacho { opacity: 0; }
#bags:hover .nutrition3 { opacity: 1; }

.nutrition4 {
  position: absolute; 
  opacity: 0; 
  width: 90%;
  left: 63em;
}

#bags:hover .teriyaki { opacity: 0; }
#bags:hover .nutrition4 { opacity: 1; }

 .scroll-container {
  width: 100vw;
  height: 200px;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 30px;
 }

 .scroll-text {
  display: inline-block;
  animation: scroll 10s linear infinite;
  font-family: kit-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 85pt;
  color: #345e45;
 }

 @keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } 
}

.follow {
  position: absolute;
  z-index: 2;
  margin-left: 80px;
}

h4 {
  font-family: kit-rounded, sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 45pt;
  left: 20px;
  position: relative;
  top: -50px;
}

.main-carousel {
  height: 700px;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 30px;
  background-color: #f15b5c; 
  border-radius: 10px;
  position: absolute;
  z-index: 1;
}

.carousel-cell {
  margin-right: 10px;
  counter-increment: carousel-cell;
  position: relative;
  margin-top: 150px;
}

.carousel-image {
  width: 500px;
  height: 450px;
  object-fit: contain;
}

.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  font-size: 0px;
}

.footer {
  height: 320px;
  margin-top: 20px;
  background-color:  #f8c357;
  display: flex;
  gap: 20px;
}

.row {
  display: flex;
  margin-left: 20%;
  margin-top: 15px;
}

ul {
  list-style-type: none;
  font-family: kit-rounded, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
}

li {
  margin-bottom: 10px;
}

.info {
  font-family: kit-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 30px;
}

.legal {
  font-family: kit-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 30px;
}

.subscribe {
  margin-left: 140px;
}

h5 {
  font-family: kit-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 40px;
  line-height: 65px;
  margin: 0;
  position: relative;
  top: 40px;
}

.little {
  border: #345e45;
  border-style: dotted;
  margin-top: 60px;
}

.email {
  font-family: kit-rounded, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20pt;
  margin-left: 20px;
  position: relative;
  top: 5px;
}

.socials {
  width: 80px;
  height: 80px;
  display: block;
  left: 15px;
  position: relative;
  left: -50em;
  top: -20em;
}

h6 {
  font-family: kit-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  margin-left: -53em;
}