/* Universal */
* {
    box-sizing: border-box;
    margin: 0;
}

/* Header */
header {
    height: 100px;
    width: 100%;
}

.hOne {
    display: flex;
    background-color: rgb(235, 50, 96);
    justify-content: space-between;
    padding: 10px 150px;
    height: 60%;

    h2 {
        margin: 0;
        font-family: "Titan One", sans-serif;
        color: white;
    }

    nav {
        display: flex;
        align-items: center;
        gap: 20px;
        font-family: "Nunito", sans-serif;
        font-weight: bold;

        button {
            border-radius: 20px;
            height: 40px;
            width: 150px;
            background: rgb(255, 199, 46);
            font-family: "Nunito", sans-serif;
            font-weight: bold;
            color: white;
        }

        a {
            text-decoration: none;
            color: white;
        }
    }
}



.wooder {
    background-color: rgb(255, 199, 46);
    height: 40%;
    text-align: center;

    p {
        padding: 10px 0;
        margin: 0;
        font-weight: bold;
        font-family: "Nunito", sans-serif;
    }
}

/* Main Section */
.main {
    background-image: linear-gradient(rgba(88, 15, 43, 0.85) 0%,
            rgba(88, 15, 43, 0.70) 35%,
            rgba(88, 15, 43, 0.45) 65%,
            rgba(88, 15, 43, 0.25) 100%), url("../Images/phillywater.avif");
    background-size: cover;
    background-position: center;
    height: 450px;
    padding: 50px 150px;

    p {
        font-family: "Nunito", sans-serif;
    }

    p:first-of-type {
        color: rgb(255, 199, 46);
        font-weight: bold;
    }

    h1 {
        color: white;
        font-family: "Titan One", sans-serif;
        max-width: 16ch;
        font-size: 50px;
        letter-spacing: 3px;


    }

    p {
        color: rgb(244, 226, 222);
        max-width: 45ch;
        margin: 10px 0;
    }

    button {
        border-radius: 20px;
        height: 40px;
        width: 130px;
        background: rgb(255, 199, 46);
        font-family: "Nunito", sans-serif;
        font-weight: bold;
        color: white;
        a{
            text-decoration: none;
            color:white;
        }
    }

    button:nth-of-type(2) {
        background: transparent;
    }

    p:nth-of-type(3) {
        color: whitesmoke;
        margin-top: 20px;
        font-weight: bold;
    }

}

/* Flavors of Wadderrrr Ice */
.flavors {
    background: rgb(255, 248, 239);
    height: 600px;
    padding: 50px 150px;

    span {
        color: rgb(235, 50, 96);
        font-family: "Nunito", sans-serif;
        font-weight: bold;
        letter-spacing: 1px;
        font-size: small;
    }

    h2 {
        font-family: "Titan One", sans-serif;
        font-size: xx-large;
        letter-spacing: 2px;
        margin-top: 10px;
        max-width: 20ch;
        color: rgb(63, 37, 55);
    }

    p:first-of-type {
        /* color: rgb(124, 105, 113);
        font-family: "Nunito", sans-serif; */
        max-width: 60ch;
        margin-bottom: 20px;
    }

    .fruits {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    dl:nth-of-type(1) {
        width: 20%;
        border-top: 10px solid rgb(235, 50, 96);
        border-radius: 20px;
        background: rgb(255, 255, 255);
        height: 150px;
        padding: 10px;

    }

    dl:nth-of-type(2) {
        width: 20%;
        border-top: 10px solid rgb(255, 199, 46);
        border-radius: 20px;
        background: rgb(255, 255, 255);
        height: 150px;
        padding: 10px;

    }

    dl:nth-of-type(3) {
        width: 20%;
        border-top: 10px solid rgb(51, 169, 218);
        border-radius: 20px;
        background: rgb(255, 255, 255);
        height: 150px;
        padding: 10px;

    }

    dl:nth-of-type(4) {
        width: 20%;
        border-top: 10px solid rgb(255, 139, 61);
        border-radius: 20px;
        background: rgb(255, 255, 255);
        height: 150px;
        padding: 10px;

    }

    dl:nth-of-type(5) {
        width: 20%;
        border-top: 10px solid rgb(200, 121, 235);
        border-radius: 20px;
        background: rgb(255, 255, 255);
        height: 150px;
        padding: 10px;

    }


    .dot {
        display: inline-block;
        border-radius: 50%;
        width: 10px;
        margin-right: 5px;
    }

    dt {
        font-weight: bold;
        font-size: larger;
        font-family: "Titan One", sans-serif;
        max-width: 10ch;
        margin-bottom: 10px;
        color: rgb(63, 37, 55);
    }

    dt.cherry div.dot {
        border: 5px solid rgb(235, 50, 96);
    }

    dt.lemon div.dot {
        border: 5px solid rgb(255, 199, 46);
    }

    dt.blued div.dot {
        border: 5px solid rgb(51, 169, 218);
    }

    dt.mango div.dot {
        border: 5px solid rgb(255, 139, 61);
    }

    dt.cotton div.dot {
        border: 5px solid rgb(200, 121, 235);
    }

    dd {
        color: rgb(124, 105, 113);
        font-family: "Nunito", sans-serif;
    }

    p {
        color: rgb(124, 105, 113);
        font-family: "Nunito", sans-serif;
        text-align: center;
    }

    a {
        background-color: rgb(255, 199, 46);
        text-decoration: none;
        font-weight: bolder;
        color: black;
        border-radius: 5px;
    }
}
/* Cup Sizes */
.cups {
    background: rgb(183, 226, 243);
    height: 600px;
    padding: 50px 150px;

    span {
        color: rgb(235, 50, 96);
        font-family: "Nunito", sans-serif;
        font-weight: bold;
        letter-spacing: 1px;
        font-size: small;
    }

    h2 {
        font-family: "Titan One", sans-serif;
        font-size: xx-large;
        letter-spacing: 2px;
        margin-top: 10px;
        margin-bottom: 30px;
        max-width: 20ch;
        color: rgb(63, 37, 55);
    }

    .sizes {
        display: flex;
        gap: 20px;
        margin-bottom: 30px;
    }

    dl {
        width: 20%;
        border-radius: 20px;
        background: rgb(255, 255, 255);
        height: 200px;
        padding: 20px 10px;
    }

    dt {
        font-weight: bold;
        font-size: large;
        font-family: "Titan One", sans-serif;
        text-align: center;
        max-width: 10ch;
        margin-bottom: 10px;
        color: rgb(63, 37, 55);
    }

    dd:nth-of-type(1) {
        font-weight: bold;
        font-size: 30px;
        font-family: "Titan One", sans-serif;
        text-align: center;
        max-width: 10ch;
        margin-bottom: 10px;
        color: rgb(235, 50, 96);
    }

    dd:nth-of-type(2) {
        font-weight: bold;
        font-family: "Nunito", sans-serif;
        text-align: center;
        margin-bottom: 10px;
        color: rgb(124, 105, 113);
    }

    p {
        text-align: center;
        color: rgb(63, 37, 55);
        font-family: "Nunito", sans-serif;
        font-weight: bold;
    }
}

/* Finding the Stand */

.Wharf {
    background: rgb(255, 248, 239);
    height: 600px;
    padding: 50px 150px;

    >span {
        color: rgb(235, 50, 96);
        font-family: "Nunito", sans-serif;
        font-weight: bold;
        letter-spacing: 1px;
        font-size: small;
    }

    h2 {
        color: rgb(62, 37, 54);
        font-family: "Titan One", sans-serif;
        margin-top: 10px;
        margin-bottom: 30px;
        font-size: 40px;
        max-width: 22ch;
    }

    .Info {
        display: flex;
        gap: 20px;

        section {
            flex: 1;
            background-color: white;
            border-radius: 10px;
            height: 190px;
            padding-top: 10px;
            padding-bottom: 20px;
            padding-left: 20px;
            padding-right: 20px;
        }

        h3 {
            color: rgb(235, 50, 96);
            font-family: "Titan One", sans-serif;
        }

        .Know {
            strong {
                background-color: rgb(255, 199, 46);
                border-radius: 10px;
                font-family: "Nunito", sans-serif;
            }

            p {
                font-family: "Nunito", sans-serif;
            }
        }

        .Season {
            display: flex;
            flex-direction: column;
            font-family: "Nunito", sans-serif;
            line-height: 25px;
        }

        .Addy {
            display: flex;
            flex-direction: column;
            font-family: "Nunito", sans-serif;
            line-height: 25px;

            a {
                color: rgb(235, 50, 96);
                font-weight: bold;
            }
        }
    }
}

/* Footer */
footer {
    background-color: rgb(62, 37, 54);
    height: 300px;
    padding: 100px 150px;

    .Bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border-bottom: 2px solid white;

        section {
            flex: 1;
            margin-bottom: 40px;

            span {
                color: gray;
                display: block;

                a {
                    color: white;
                }
            }
        }

        p {
            color: gray;
        }
    }

    h3 {
        margin-bottom: 10px;
        font-weight: bold;
        color: white;
        font-size: large;
        font-family: "Titan One", sans-serif;
    }

    div {
        display: flex;
        justify-content: space-between;
        width: 60%;
        color: gray;
        margin-top: 20px;

        a {
            color: gray;
        }
    }
}

/* Media Queries */
@media (max-width:1100px){
    #peanut{
        margin-top:80px;
    }
}
@media (max-width:1040px){
    .flavors dl:nth-of-type(5){
        height:80px;
        dd{
        display:none;
    }
    } 
    .hOne{
            padding: 10px 80px;
    }
}
@media (max-width: 900px){
    .hOne{
            padding: 10px 40px;
    }
    .flavors dl:nth-of-type(3){
        height:80px;
        dd{
        display:none;
    }
    } 
    .flavors dl:nth-of-type(1){
        height:80px;
        dd{
        display:none;
    }
    }
    .flavors dl:nth-of-type(2){
        height:80px;
        dd{
        display:none;
    }
    }
    .flavors dl:nth-of-type(4){
        height:80px;
        dd{
        display:none;
    }
    }

    .Wharf{
        height: 700px;
    }
    .Info{
        flex-direction: column;
    }
}
@media (max-width:790px){
    .hOne{
            padding:0;
            align-items: center;
    }
    .flavors p:first-of-type{
        display: none;
    }
    .flavors h2{

        margin-bottom: 30px;
    }
    .cups{
        height:800px;
        p{
            display: none;
        }
    }
    .sizes{
        flex-wrap: wrap;
        height:300px;
        width:800px;
    }
}