@import url("https://use.typekit.net/enw3wtj.css");
@import url("https://use.typekit.net/enw3wtj.css");
*{
    margin:0;
}
.bar{
    display: flex;
    padding-left: 50pt;
    padding-right: 50pt;
}
.contact{
    flex: 12.5%;
    text-align: left;
    padding-right: 60pt;
    margin-top: 5pt;
}
.shop{
    flex: 12.5%;
    margin-top: 5pt;
}
.snacklins{
    flex: 50%;
    margin-top: -5pt;
}
.benefits{
    flex: 12.5%;
    padding-right: 60pt;
    margin-top: 5pt;
}
.search{
    flex: 12.5%;
    text-align: right;
    margin-top: 10pt;
}
a{
    font-family: "nunito", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 13pt;
    color: black;
}
p{
    font-family: "nunito", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 13pt;
    text-decoration: underline;
}
.snacklins{
    text-align: center;
    transform: translateX(-30pt);
}
.line1{
    background-color: black;
    height: 0.5pt;

}
.text1{
    text-align: center;
    transform: translateY(-900pt);
}
h1{
    color: white;
    font-family: "jumble", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 50pt;
    line-height: 1;
    transform: translateY(10pt);
}
h2{
    color: white;
    font-family: "nunito", sans-serif;
    font-weight: 700;
    font-style: normal;
    transform: translateY(15pt);
}
.line2{
    background-color: black;
    height: 0.5pt;
    transform: translateY(-50pt);
    margin: 0 55pt;
}
h3{
    color: black;
    font-family: "jumble", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 50pt;
    text-align: center;
    transform: translateY(0pt);
}
.flavors{
    display: flex;
    margin: 0 75pt;
    gap: 25pt;
}
.yellow{
    flex: 30%;
    background: #fec735;
    border-style: solid;
    border-width: 10pt;
    border-color: #f26441;
    height: 400px;
    width: auto;
    text-align: center;
    padding-top: 50pt;
    border-radius: 25pt;
}
.blue{
    flex: 30%;
    background: #3d79bc;
    border-style: solid;
    border-width: 10pt;
    border-color: #9ed7ce;
    height: 400px;
    width: auto;
    text-align: center;
    padding-top: 50pt;
    border-radius: 25pt;
}
.pink{
    flex: 30%;
    background: #ec87b4;
    border-style: solid;
    border-width: 10pt;
    border-color: #9b3f97;
    height: 400px;
    width: auto;
    text-align: center;
    padding-top: 50pt;
    border-radius: 25pt;
}
.flavorname{
    display: flex;
    gap: 100pt; margin: 0 100pt;
}
.nacho{
    flex: 30%;
    text-align: center;
}
.ssv{
    flex: 30%;
    text-align: center;
}
.bbq{
    flex: 30%;
    text-align: center;
}
h4{
    font-size: 20pt;
    font-family: "nunito", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.arrows{
    display: flex;
    transform: translateY(-245pt);
    margin: 0 25pt;
}
.arrow1{
    flex: 50%;
    text-align: left;
    font-size: 50pt;
}
.arrow2{
    flex: 50%;
    text-align: right;
    font-size: 50pt;
}
h6{
    text-align: left;
    margin: 0 75pt;
    font-family: "nunito", sans-serif;
    font-weight: 50;
    font-style: normal;
    font-size: 12pt;
    transform: translateY(-30pt);
    z-index: 1;
}
.line3{
   background-color: black;
    height: 0.5pt;
    transform: translateY(35pt);
    margin: 0 55pt; 
}
.signs{
    margin: 40pt 75pt;
    transform: translateY(0pt);
    text-align: center;
    transform: translateY(50pt);
    
}
.line4{
    background-color: black;
    height: 0.5pt;
    transform: translateY(70pt);
    margin: 0 55pt; 
}
.eatbag{
    text-align: center;
    transform: translateY(100pt);
    margin-top: 20pt;
}
.bags{
    margin: 0 75pt;
    text-align: center;
    border-style: solid;
    border-width: 10pt;
    border-color: black;
    transform: translateY(100pt);
}
.footerbox{
    background-color: #871629;
    height: 300pt;
    transform: translateY(180pt);
    padding: 10pt 50pt;
}
.headings{
    display:flex;
    transform: translatey(45pt);

}
.story{
    flex: 25%;
    text-align: left;
}
.info{
    flex: 25%;
    text-align: left;
}
.legal{
    flex: 25%;
    text-align: left;
}
.sub{
    flex: 25%;
    text-align: left;
}
h7{
    color: rgb(255, 255, 255);
    font-family: "jumble", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20pt;
    text-align: left;
    margin: 100pt 25pt;
}
h8{
    color: white;
    font-family: "nunito", sans-serif;
    font-weight: 100;
    font-style: normal;
}
.bodytext{
    display: flex;
    padding-top: 50pt;
    gap: 35pt;
    padding-left: 25pt;
}
.story2{
    flex: 25%;
}
.info2{
    flex: 25%;
    line-height: 2;
}
.legal2{
    flex: 25%;
    line-height: 2;
}
.sub2{
    flex: 25%;
}
.emailbox{
    border-style: solid;
    border-width: 0.5pt;
    border-color: white;
    border-radius: 10pt;
    height: 20pt;
    width: 200pt;
    transform: translateX(-10pt);
    align-content: center;
    padding:5pt;
}