/* =========================================================*/
/*                            FOOTER                        */
/* =========================================================*/
.wave-footer {
    aspect-ratio: 900/200;
    width: 100vw;
    position: absolute; 
    bottom: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('../svg/wave-footer.svg');
}

footer { 
    display: flex; 
    position: relative;
    justify-content: center;
    height: 20vh;
    align-items: center;
    width: 100%;
}

footer #legal {
    position: absolute;
    bottom: .5rem; 
    color: white;
    font-size: .8rem;
    z-index: 10;
}
footer .icons {
    position: absolute;
    bottom: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 175px;
    z-index: 10;
}

footer .icons .icon a img {
    width: 40px;
    height: 40px;
    transition: transform 0.2s;
}
footer .icons .icon a img:hover {
    transform: translateY(-4px);
}
footer .icons .icon a {
    transition: filter 0.2s ease-in-out;
}
/* ===================================================== */

@media screen and (min-width:1920px) {
    .wave-footer {
        aspect-ratio: 900/125;
    }
} 
@media screen and (max-width:820px) {
    .wave-footer {
        height: 150%;
    }
}
@media screen and (max-width:480px) {
    .wave-footer {
        height: 175%;
    }
    footer #legal {
        font-size: x-small;
        bottom: 1.5rem;
    }
}