:root {
    --wave-gradient-one-1: linear-gradient(90deg, rgba(27,38,59,1) 0%, rgba(65,90,119,1) 100%);
    --wave-gradient-one-2: linear-gradient(90deg, rgba(119,141,169,1) 0%, rgba(22,105,122,1) 100%);
    --wave-gradient-one-3: linear-gradient(90deg, rgba(72,159,181,1) 0%, rgba(130,192,204,1) 100%);
    --bg-gradient: linear-gradient(0deg, rgba(215,192,153,1) 0%, rgba(237,135,28,1) 100%);
}

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

body {
    display: flex;
    flex-direction: column;
    justify-content: end;   
    align-items: center;
    min-height: 100vh;
    background: var(--bg-gradient);
}

.word-content {
    position: relative;
}

.word-content h2 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24em;
}

.word-content h2:nth-child(1) {
    color: transparent;
    -webkit-text-stroke: 4px #F5F9FF;
}

.word-content h2:nth-child(2) {
    color: rgb(27,38,59);
    animation: animate-1 4s ease-in-out infinite;
}

.wave {
    width: 100vw;
    height: 580px;
}

.wave-1 {
    background: var(--wave-gradient-one-1);
    animation: animate-1 4s ease-in-out infinite;
    opacity: .98;
}

.wave-2 {
    background: var(--wave-gradient-one-2);
    animation: animate-2 4s ease-in-out infinite;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: .96;
}

.wave-3 { 
    background: var(--wave-gradient-one-3);
    animation: animate-3 4s ease-in-out infinite;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: .94;
}

.boat {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: auto;
    z-index: 2;
}

.shark-fin, .lifebuoy {
    position: absolute;
    bottom: 100px;
    z-index: 2;
}

.shark-fin {
    left: 20%;
    width: 50px;
    height: auto;
}

.lifebuoy {
    right: 20%;
    width: 50px;
    height: auto;
}

@keyframes animate-1 {
    0%, 100% {
        clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
    }

    50% {
        clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
    }
}

@keyframes animate-2 {
    0%, 100% {
        clip-path: polygon(0% 61%, 16% 56%, 33% 57%, 51% 58%, 64% 54%, 80% 55%, 100% 60%, 100% 100%, 0% 100%);
    }

    50% {
        clip-path: polygon(0 55%, 16% 58%, 33% 60%, 49% 56%, 64% 54%, 81% 60%, 100% 54%, 100% 100%, 0% 100%);
    }
}

@keyframes animate-3 {
    0%, 100% {
        clip-path: polygon(0 57%, 19% 62%, 34% 65%, 52% 62%, 68% 60%, 83% 63%, 100% 61%, 100% 100%, 0% 100%);
    }

    50% {
        clip-path: polygon(0 54%, 18% 58%, 34% 59%, 52% 54%, 66% 57%, 83% 57%, 100% 55%, 100% 100%, 0% 100%);
    }
}

/* Responsive style */
@media (max-width: 1231px) {
    .word-content h2 {
        font-size: 20em;
    }

    .wave {
        height: 480px;
    }
}

@media (max-width: 1025px) {
    .word-content h2 {
        font-size: 14em;
    }

    .boat, .shark-fin, .lifebuoy {
        bottom: 40px;
    }

    .wave {
        height: 350px;
    }
}

@media (max-width: 718px) {
    .word-content h2 {
        font-size: 8em;
    }

    .boat, .shark-fin, .lifebuoy {
        bottom: 24px !important;
    }

    .wave {
        height: 200px;
    }
}