*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family: "Titan One", "Nunito", sans-serif;
}
html{
    -webkit-text-size-adjust:100%;
}
body{
    overflow-x:hidden;
}
img{
    max-width:100%;
    display:block;
}

/*Entire doc*/
h2, h3{
    text-align:left;
    font-family: "Titan One";
}
h2{
    font-size: clamp(0.8rem, 2vw, 1rem);
    color:red;
    font-weight:100;
}
h3{
    font-size: clamp(1.5rem, 5vw, 2.75rem);
    padding-top:0.5em;
}
p, span{
    text-align:left;
    font-family: "Nunito";
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
}
a{
    text-decoration:none;
    color:white;
}
a:focus-visible, .navToggleLabel:focus-visible{
    outline:3px solid #222;
    outline-offset:2px;
}
ul{
    list-style:none;
}

/* ---------- Header ---------- */
header{
    background:rgb(255, 47, 47);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    padding: 0.75em 5%;
    position:relative;
}
header h1{
    color:white;
    font-size: clamp(1.15rem, 4vw, 1.75rem);
    padding:0.25em 0;
    flex:1 1 auto;
}
.navToggle{
    display:none;
}
.navToggleLabel{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:28px;
    height:20px;
    cursor:pointer;
    z-index:20;
}
.navToggleLabel span{
    display:block;
    height:3px;
    width:100%;
    background:white;
    border-radius:2px;
}
header nav{
    flex-basis:100%;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
    order:3;
}
.navToggle:checked ~ nav{
    max-height:300px;
}
nav ul{
    display:flex;
    flex-direction:column;
    gap:0.5em;
    padding:1em 0 0.5em;
}
li{
    display:block;
}
.ter{
    border-radius:8px;
    background: rgb(198, 205, 0);
    color:white;
    padding:8px;
    display:inline-block;
}

@media (min-width:768px){
    .navToggleLabel{
        display:none;
    }
    header nav{
        flex-basis:auto;
        max-height:none;
        overflow:visible;
        order:2;
    }
    nav ul{
        flex-direction:row;
        gap:1.5em;
        padding:0;
        align-items:center;
    }
}

/* Yellow section under header*/
.first{
    background:yellow;
    padding:0.75em 5%;
}
.first p{
    text-align:center;
}

/* section with background photo*/
.second{
    background: linear-gradient(
        rgba(255, 55, 0, 0.5),
        rgba(0, 204, 255, 0.4))
        , url(sorbetCup.jpg) no-repeat 80% 35%/cover;
    padding: clamp(2.5rem, 12vw, 6rem) 5%;
    text-align:left;
}
.second p{
    max-width:60ch;
}
.secondButtons{
    display:flex;
    flex-wrap:wrap;
    gap:0.75em;
    margin:1em 0;
}
.hfa, .hnj{
    border:1px solid black;
    border-radius:5px;
    padding:0.6em 1.1em;
    display:inline-block;
}
.hfa{
    background:rgb(242, 222, 46);
    color:red;
}
.hnj{
    color:white;
}

/* The Flavor Board section*/
.third{
    background:whitesmoke;
    padding: 3em 5%;
}
.third a{
    color:rgb(198, 40, 0);
    font-weight:bold;
}
.thirdFloat, .thirdFloatSecond{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap:1em;
}
.thirdFloatSecond{
    margin-top:1em;
}
.Options1, .Options2{
    border:1px solid black;
    border-radius:5px;
    border-top:5px solid black;
    padding:0.75em;
}
.thirdBottom{
    margin-top:1.5em;
}

/*Sizes section*/
.fourth{
    background:rgb(114, 210, 255);
    padding: 3em 5%;
}
.fourthFloat{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap:1em;
}
.fiveFloat{
    border:1px solid black;
    border-radius:5px;
    padding:0.75em;
}
.fourthBottom{
    margin-top:1.5em;
}
.yurt{
    padding-top:0.5em;
}

/*find the stand section*/
.fifth{
    background:whitesmoke;
    padding: 3em 5%;
}
.fifth a{
    color:rgb(198, 40, 0);
    font-weight:bold;
}
.fifthFloat{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:1em;
}
.fifthFloatItem{
    border:1px black solid;
    border-radius:5px;
    padding:0.75em;
}
.fifthFloatItem a{
    display:inline-block;
    margin-top:0.4em;
}

/*footer*/
footer{
    background:rgb(90, 10, 90);
    padding: 3em 5%;
}
.FooterTop{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:1.5em;
}
.FooterFloat p, .FooterFloat span{
    color:white;
}
.FooterFloat span{
    display:block;
}
.FooterBottom{
    margin-top:2em;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:0.5em;
    color:white;
}
.FooterBottom small{
    color:white;
}
.FooterBottom a{
    text-decoration:underline;
}