* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100vh;
    /* background: #1f2028; */
}

section {
    position: relative;
    width: 100%;
}

.waves {
    position: relative;
}

.waves .wave {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: url('../img/olas/wave.png');
    background-size: 1000px 100px;
}

.waves .wave#wave1 {
    opacity: 1;
    bottom: 0;
    z-index: 1000;
    animation: animate 4s linear infinite;
}

.waves .wave#wave2 {
    opacity: .5;
    bottom: 10px;
    z-index: 999;
    animation: animate2 4s linear infinite;
}

.waves .wave#wave3 {
    opacity: .2;
    bottom: 15px;
    z-index: 998;
    animation: animate 2s linear infinite;
}

.waves .wave#wave4 {
    opacity: .7;
    bottom: 20px;
    z-index: 999;
    animation: animate2 2s linear infinite;
}

@keyframes animate {
    0% {
        background-position: 1000px;
    }
    100% {
        background-position: 0;
    }
}

@keyframes animate2 {
    0% {
        background-position: 0;
    }
    100% {
        background-position: 1000px;    }
}

.stars {
    position: absolute;
    bottom:0 ;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    mix-blend-mode: screen;
}

.island {
    position: absolute;
    bottom: 0px;
    left: 25%;
    transform: translateX(-50%);
    pointer-events: none;
    width: 65vw;
}