html{
    scroll-behavior: smooth;
}
body{
    padding: 0px;
    margin: 0px;
    background-color: #1b1a1b;
}
    .nav-bar{
        position: sticky;
        top: 0px;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        z-index: 1;
        background-color: hsl(0, 100%, 35%);
        display: flex;
        align-items: center;
    }
    .nav-bar ul{
        list-style-type: none;
    }
    .nav-bar img{
        
        padding: 10px;
        width: 10%;
    }
    .nav-bar-links a{
        color: white;
        display: block;
        text-decoration: none;
        font-size: 20px;
        padding: 12px;
        text-align:center;
        font-family: 'Fredoka', cursive;
        text-align: center;
        border-left: solid white 1px;
        width: 70px;
    }
    .nav-bar-links a:hover{
        animation-name: nav-bar-hover;
        animation-duration: 0.5s;
        animation-iteration-count: initial;
        animation-fill-mode: forwards;
    }
    .nav-bar li{
        float: left;
    }
    .front{
        position: relative;
        text-align: center;
    }
        #pizza-front{
            width: 100vw;
            opacity: 0.65;
            max-height: 100vh;
        }
        #title-front{
            position: absolute;
            left: 15%;
            top: 25%;
            font-size: 15vw;
            line-height: 1px;
            font-family: 'Fredoka', cursive;
            color: hsl(0, 0%, 90%);
            font-style: italic;
        }
    .seasonal-offers{
        width: 95vw;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .snacks{
        width: 95vw;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .cold-drinks{
        width: 95vw;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .hot-drinks{
        width: 95vw;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .pizza{
        width: 95vw;
        display: flex;
        justify-content: center;
        flex-wrap: wrap; 
    }
    .salads{
        width: 95vw;
        display: flex;
        justify-content: center;
        flex-wrap: wrap; 
    }
    .end{
        width: 100%;
        background-color: hsl(0, 100%, 35%);
        display: flex;
        justify-content:center;
        flex-wrap: wrap;
        align-items: center;
        height: 30vh;
    }
    .end svg{
        margin: 2vw;
    }
    .end svg:hover{
        animation-name: contacts-hover;
        animation-duration: 0.5s;
        animation-iteration-count: initial;
        animation-fill-mode: forwards;
    }
    .headers{
        color: hsl(0, 0%, 90%);
        font-family: 'Fredoka', cursive;
        width: 95vw;
        font-size: 50px;
        margin-left: 30px;
        border-bottom: solid hsl(0, 0%, 40%) 2px;
        border-bottom-style: groove;
        padding-bottom: 5px;   
        text-shadow: #000000 7px 7px 10px;
    }
    .offers{
        /*border: solid 2.5px hsl(0, 100%, 60%);*/
        border: solid 2.5px hsl(59, 100%, 50%);
        border-radius: 10px;
        padding: 10px;
        margin: 10px;
        width: fit-content;
        box-shadow: #000000 10px 10px 10px;
        background-color: hsl(300, 2%, 15%);
    }
    .images img{
        width: 15vw;
        min-width: 100px;
        max-width: 250px;
    }
    .offers:hover{
        animation: offer-hover 0.5s;
        animation-iteration-count: initial;
        animation-fill-mode: forwards;
    }
    .titles{
        line-height: 5px;
        color: hsl(0, 0%, 90%);
        font-family: 'Fredoka', cursive;
        font-size: 1vw;
    }
    .prices{
        line-height: 10px;
        color: hsl(0, 0%, 90%);
        font-family: 'Fredoka', cursive;
    }
    .buttons button{
        background-color: hsl(59, 100%, 50%);
        font-size: 20px;
        color: hsl(0, 100%, 35%);
        border-radius: 10px;
        font-weight: bold;
        font-family: 'Fredoka', cursive;
        line-height: 2;
        border: solid 2.5px hsl(0, 100%, 35%);
        width: 100%;
        font-size: 2vw;
    }
    .buttons button svg{
        width: 3vw;
        height: 3vw;
        transform: translateY(0.5vw);
    }
    .contacts svg{
        padding-top: 10px;
    }

    .buttons button:hover{
        animation-name: button-hover;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-iteration-count: initial;
    }
    .buttons button:hover svg{
        animation-name: icons-hover;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-iteration-count: initial;
    }
    .icons{
        stroke: hsl(0, 100%, 35%);
        height: 30px;
    }
    #ande-logo{
        height:50%; 
        transform: translateY(-2vw);
    }
    @keyframes offer-hover{
        0%{border: solid 2.5px hsl(59, 100%, 50%);}
        100%{border: solid 2.5px hsl(0, 100%, 35%);}
    }
    @keyframes button-hover{
        0%{border: solid 2.5px hsl(0, 100%, 35%);
           background-color: hsl(59, 100%, 50%);
           color: hsl(0, 100%, 35%);}
        100%{border: solid 2.5px hsl(59, 100%, 50%);
             background-color: hsl(0, 100%, 35%);
             color: hsl(59, 100%, 50%);
            }
    }
    @keyframes icons-hover{
        0%{stroke: hsl(0, 100%, 35%);}
        100%{stroke: hsl(59, 100%, 50%);}
    }
    @keyframes contacts-hover{
        0%{stroke: hsl(45, 100%, 50%);}
        100%{stroke: hsl(45, 100%, 40%);}
    }
    @keyframes nav-bar-hover{
        0%{background-color: hsl(0, 100%, 35%);
            color: white;}
        100%{background-color: hsl(0, 100%, 40%);
            color: #1b1a1b;}
    }