@import url(fonts.css);

:root {
    --white: #eee1cf;
    --background: #f7f1ec;
    --parchment: #f6ede2;
    --copper: #913a05;
    --dark-copper: #642903;
    --teal: #154849;

    --font-headers: "Kirkwood";
    --font-body: "Josefin Sans"
}

/* ----- Reset ------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    padding: 0;
    margin: 0;

    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;

    font-family: var(--font-body);
    background: var(--background);
    color: var(--brown);
}

a {
    text-decoration: none;
    color: inherit;
}
a:hover, a:active {
    text-decoration: underline;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

#navbar {
    display: grid;
    grid-template-columns: 50% 50%;;
    padding: 0 10%;
    background-color: var(--parchment);
}

#logo {
    font-size: 3vw;
    font-family: var(--font-headers);
    color: var(--copper);
}
#logo span {
    color: var(--teal);
}
#details {
    margin: auto;

    font-family: var(--font-headers);
    font-size: 1.5vw;
    color: var(--teal);
}
#details span {
    color: var(--copper);
}
#details img {
    display: inline-block;
    height: 1vw;
}

#banner {
    padding: 1vw;

    background: linear-gradient(to top, var(--copper), var(--dark-copper));
    color: var(--parchment);

    font-family: var(--font-headers);
    font-size: 1.5vw;
    font-weight: 500;
    text-align: center;
}
#banner span {
    display: inline-block;
    padding: 0 1rem;
    transform: scale(1.2, 1.2);
}


/* ------ Hero space ---------- */
#hero {
    display: grid;
    grid-template-columns: 30% 70%;
}

#tagline {
    padding: 2vw 0;
    font-family: var(--font-headers);
    text-transform: capitalize;
    text-align: center;
}
#tagline-top {
    font-size: 3vw;
    line-height: 100%;
    color: var(--teal);
}
#tagline-naturally {
    font-size: 5vw;
    line-height: 100%;
    color: var(--copper);
}
#tagline-refreshing {
    font-size: 4.7vw;
    line-height: 100%;
    color: var(--teal);
}
#tagline-separator {
    font-size: 2.5vw;
    line-height: 100%;
    color: var(--copper);
}
#tagline-bottom {
    font-size: 1.7vw;
}
#tagline a {
    display: block;
    margin: .5rem 10% 0 10%;

    color: var(--parchment);
    background: var(--teal);
    border: solid 2px var(--copper);
}
#tagline a:hover,
#tagline a:active {
    color: var(--teal);
    background: var(--parchment);
    border: solid 2px var(--white);
}

#hero-image {
    background-image: url("images/hero.webp");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain; 
}


/* ----- Features bar  ---------- */
#bar {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;

    background-color: var(--teal);
}
.bar-detail {
    display: grid;
    grid-template-columns: 30% 70%;
    padding: 2vw;
}
.bar-detail img {
    height: 4.5vw;
    min-height: 3rem;
    margin: auto auto;
    padding-right: .5rem;
}
.bar-detail p {
    padding: 1rem 0rem;

    color: var(--parchment);
    font-family: var(--font-headers);
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: .1rem;
    font-size: 1.5vw;
    line-height: 100%;
}
.bar-detail p span {
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 1.6vw;
    letter-spacing: .006rem;
    line-height: .05rem;
}

/* ----- Products and Prices ---------- */
#products {
    padding: 4rem 5% 6rem 5%;

    font-weight: bold;
    background-color: var(--white);
}

#classics,
#flavored,
#shavedice  {
    margin: auto;
    padding: 0 5vw 5rem 5vw;
}

#classics h2,
#flavored h2,
#shavedice h2 {
    padding: 1vw;

    color: var(--copper);
    font-family: var(--font-body);
    text-align: center;
    font-weight: bold;
    font-size: 1.5vw;
}
#classics h2 span,
#flavored h2 span,
#shavedice h2 span {
    font-family: var(--font-headers);
    font-size: 1.7vw;
    letter-spacing: .15rem;
    text-transform: uppercase;
    color: var(--teal);
}

#classic-products,
#flavored-products,
#shavedice-products {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.product {
    color: var(--copper);
    font-family: var(--font-body);
    font-size: 1.2vw;
    font-weight: bolder;
    background-color: var(--white);
    text-align: center;
}
.product img {
    margin: auto auto .25rem auto;
    height: 13vw;
}

#product-prices {
    display: none;
}


/* ----- Call to Action banner ---------- */
#calltoaction {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;

    background-color: var(--teal);
}
#calltoaction .bar-detail {
    padding: 2vw 1vw 1vw 1vw;
}
#calltoaction .bar-detail p span {
    font-size: 1.2vw;
}


/* ----- Footer ---------- */
footer {
    padding: 1vw;

    background: linear-gradient(to top, var(--copper), var(--dark-copper));
    color: var(--parchment);

    font-family: var(--font-headers);
    font-size: 1.5vw;
    font-weight: 500;
    text-align: center;
}

footer a {
    display: inline-block;
    padding: .25rem;

    background: linear-gradient(to top, var(--white), var(--parchment) 40%);
    color: var(--copper);
    border: solid 4px var(--dark-copper);
    border-radius: .5rem;
}
footer a:hover,
footer a:active {
    color: var(--parchment);
    background: linear-gradient(to top, var(--copper), var(--dark-copper) 40%);
}


/* ----- Small screen ---------- */
@media (max-width: 1024px) and (min-width: 869px) {
        
    #classic-products,
    #flavored-products,
    #shavedice-products {
        grid-template-columns: auto auto;
    }


    #products h2 {
        font-size: 6vw;
    }
    #products h2 span {
        padding-bottom: 2rem;

        font-size: 5vw;
    }

    .product {
        padding-bottom: 2rem;
        
        font-size: 4vw;
    }
    .product img {
        height: 30vw;
    }
}


/* ----- Tablet ---------- */
@media (max-width: 868px) and (min-width: 641px) {

    #navbar {
        display: block;
        padding: 1rem 0;
    }

    #logo {
        text-align: center;
        font-size: 10vw;
    }
    #details {
        text-align: center;
        font-size: 6vw;
    }
    #details img {
        height: 5vw;
    }

    #banner {
        font-size: 5vw;
    }

    #hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    #hero-image {
        grid-row: 1;
        height: 40vw;
    }

    #tagline-top {
        font-size: 8vw;
    }
    #tagline-naturally {
        font-size: 12vw;
    }
    #tagline-refreshing {
        font-size: 11.4vw;
    }
    #tagline-separator {
        font-size: 7vw;
    }
    #tagline-bottom {
        font-size: 4.4vw;
    }
    #tagline a {
        font-size: 5vw;
    }

    #bar {
        display: grid;
        grid-template-columns: auto;
    }
    .bar-detail img {
        height: 11vw;
    }
    .bar-detail p {
        padding: 1rem 0rem;
        font-size: 3vw;
    }
    .bar-detail p span {
        font-size: 4.5vw;
        line-height: 100%;
    }

    #classic-products,
    #flavored-products,
    #shavedice-products {
        grid-template-columns: auto auto;
    }

    #products {
        padding-bottom: 2rem;
    }
    #products h2 {
        padding-bottom: 1rem;
        margin-bottom: 1rem;

        font-size: 6vw;
        border-bottom: dashed 1px var(--copper);
    }
    #products h2 span {
        font-size: 5vw;
    }

    .product {
        padding-bottom: 2rem;

        font-size: 4vw;
    }
    .product img {
        height: 35vw;
    }

    #calltoaction {
        grid-template-columns: auto;
    }
    #calltoaction .bar-detail p {
        font-size: 4vw;

        line-height: 125%;
    }
    #calltoaction .bar-detail p span {
        font-size: 4.5vw;
        line-height: 100%;
    }

    footer {
        font-size: 5vw;
    }
}

/* ----- Phones ---------- */
@media (max-width: 640px) {
    
    #navbar {
        display: block;
        padding: 1rem 0;
    }

    #logo {
        text-align: center;
        font-size: 10vw;
    }
    #details {
        text-align: center;
        font-size: 6vw;
    }
    #details img {
        height: 5vw;
    }

    #banner {
        padding: 3vw;

        font-size: 6vw;
    }

    #hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    #hero-image {
        grid-row: 1;
        height: 40vw;
        background-size: cover;
    }

    #tagline-top {
        font-size: 8vw;
    }
    #tagline-naturally {
        font-size: 12vw;
    }
    #tagline-refreshing {
        font-size: 11.4vw;
    }
    #tagline-separator {
        font-size: 7vw;
    }
    #tagline-bottom {
        font-size: 4.4vw;
    }
    #tagline a {
        font-size: 5vw;
    }

    #bar {
        display: grid;
        grid-template-columns: auto;
    }
    .bar-detail img {
        height: 11vw;
    }
    .bar-detail p {
        padding: 1rem 0rem;
        font-size: 5vw;
    }
    .bar-detail p span {
        font-size: 5vw;
        line-height: 100%;
    }

    #classic-products,
    #flavored-products,
    #shavedice-products {
        grid-template-columns: auto auto;
    }

    #products {
        padding-bottom: 2rem;
    }
    #products h2 {
        padding-bottom: 1rem;
        margin-bottom: 1rem;

        font-size: 6vw;
        border-bottom: dashed 1px var(--copper);
    }
    #products h2 span {
        font-size: 5vw;
    }

    .product {
        padding-bottom: 2rem;

        font-size: 6vw;
    }
    .product img {
        height: 35vw;
    }

    #classics, #flavored, #shavedice {
        padding-bottom: 1rem;
    }

    #calltoaction {
        grid-template-columns: auto;
    }
    #calltoaction .bar-detail p {
        font-size: 5vw;
        line-height: 125%;
    }
    #calltoaction .bar-detail p span {
        font-size: 5vw;
        line-height: 100%;
    }

    footer {
        font-size: 5vw;
    }

}