#start-page {
    display: none;
    justify-content: center;
}
#start-page.active {
    display: flex;
}

.start-page-svg-bg {
    position: absolute;
    width: 100dvw;
    height: 100dvh;
    z-index: -1;

    background-image: linear-gradient(#FFFFFF, #B3EDF9, var(--blue));
}

.top-bubbles {
    position: absolute;
    top: 0;
    left: 0;
}

.bottom-bubbles {
    position: absolute;
    bottom: 0;
    object-fit: cover;
    object-position: center bottom;

    width: 100%;
}

.logo {
    position: absolute;
    top: 5px;
    left: 20px;
    width: 30vw;
    max-width: 200px;
}

.start-page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2vh;
    padding-top: calc(25vh - 10vw);
    width: 70vw;
    overflow: hidden;
}

    .start-page-content h3 {
        color: var(--purple);
        font-weight: 500;

        font-size: clamp(1.7em, 4vw, 3.45em);
        line-height: 0.9;
    }

    .start-page-content h2 {
        color: black;
        font-weight: 700;

        font-size: clamp(2.4em, 5vw, 4.8em);
        line-height: 0.9;
        padding-top: 1.66vh;
    }

    .start-page-content h1 {
        color: black;
        font-weight: 800;

        font-size: clamp(2.9em, 6vw, 5.875em);
        line-height: 0.9;
        padding-bottom: 3.33vh;
    }

    .start-btn {
        background: linear-gradient(to top,  #6D1D59, #A12D84, #DC3EB5);
        border-radius: 1000000px;
        z-index: 100;

        color: white;
        font-weight: 700;
        font-size: clamp(1.9em, 4.5vw, 3.9em);
        padding: 3vh 5vw;
        box-shadow: inset 0px 3.15px 15.75px 0px rgba(0, 0, 0, 0.3);
        transition: box-shadow 0.4s ease;
    }

    .start-btn:hover {
        box-shadow: inset 0px 3.15px 15.75px 0px rgba(0, 0, 0, 0.5);
    }

    .animal {
        position: absolute;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    }

    .bee {
        z-index: 1;

        width: 16.32vw;
        height: auto;

        bottom: 10vh;
        left: 4.2vw;

        animation: bee-jump 1.5s ease-in-out infinite;
        animation-play-state: paused;
    }

    @keyframes bee-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-2.22vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .owl {
        z-index: 5;

        width: 10.64vw;
        height: auto;

        bottom: 7.5vh;
        left: 15.3vw;

        animation: owl-jump 1.5s ease-in-out infinite;
        animation-play-state: paused;
    }

    @keyframes owl-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-7.88vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .armadillo {
        z-index: 4;

        width: 19.8vw;
        height: auto;

        bottom: 5vh;
        left: 24vw;

        animation: armadillo-jump 1.5s ease-in-out infinite;
        animation-play-state: paused;
    }

    @keyframes armadillo-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-3vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .panda {
       z-index: 3;

       width: 14.8vw;
       height: auto;

       bottom: 4.2vh;
       left: 40.8vw;

       animation: panda-jump 1.5s ease-in-out infinite;
       animation-play-state: paused;
    }

    @keyframes panda-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-1.66vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .squirrel {
        z-index: 2;

        width: 19.8vw;
        height: auto;

        bottom: 3.8vh;
        left: 49.3vw;

        animation: squirrel-jump 1.5s ease-in-out infinite;
        animation-play-state: paused;
    }

    @keyframes squirrel-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-5.22vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .poodle {
        z-index: 1;

        width: 22.0vw;
        height: auto;

        bottom: 4.7vh;
        left: 59.3vw;

        animation: poodle-jump 1.5s ease-in-out infinite;
        animation-play-state: paused;

    }

    @keyframes poodle-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-1.88vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .octopus {
        z-index: 5;

        width: 24.3vw;
        height: auto;

        bottom: 3vh;
        left: 72.9vw;

        animation: octopus-jump 1.5s ease-in-out infinite;
        animation-play-state: paused;
    }

    @keyframes octopus-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-2vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .rabbit {
        z-index: 1;

        width: 19vw;
        height: auto;

        bottom: calc((30vw + 20vh)/2);
        left: 73.2vw;

        animation: rabbit-jump 1.5s ease-in-out infinite;
        animation-play-state: paused;
    }

    @keyframes rabbit-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-5.44vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

@media (max-width: 768px) and (orientation: portrait) {
    .top-bubbles {
        margin-top: -75px;
    }

    .bottom-bubbles {
        transform: translateY(90px);
    }

    .start-page-content {
        width: 100vw;
        gap: 0vh;
        padding-top: calc(27vh - 12vw);
    }

    .start-page-content h3 {
        font-size: clamp(1.4em, 8vw, 3em);
    }

    .start-page-content h2 {
        font-size: clamp(2em ,9vw, 4em);
    }

    .start-page-content h1 {
        font-size: clamp(2em ,9vw, 4em);
        padding-bottom: 1.5vh;
    }

    .start-btn {
        font-size: clamp(2em, 8.5vw, 10em);
    }

    .owl {
        width: 21.9vw;

        bottom: 3.5vh;
        left: 4.2vw;

        z-index: 4;
    }

    @keyframes owl-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-4.05vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .bee {
        width: 33.6vw;

        bottom: 12vh;
        left: 7vw;

        z-index: 1;
    }

    @keyframes bee-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-1.20vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .armadillo {
        width: 32.7vw;

        bottom: 3.6vh;
        left: 20vw;

        z-index: 3;
    }

    @keyframes armadillo-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-1.35vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .panda {
        width: 24.5vw;

        bottom: 8.8vh;
        left: 38.8vw;

        z-index: 2;
    }

    @keyframes panda-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-1.80vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .poodle {
        width: 36.2vw;

        bottom: 10.7vh;
        left: 49vw;

        z-index: 1;
    }

    @keyframes poodle-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-2.40vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .octopus {
        width: 40.1vw;

        bottom: 0.5vh;
        left: 48vw;

        z-index: 4;
    }

    @keyframes octopus-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-1.95vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .squirrel {
        width: 29.2vw;

        bottom: 4vh;
        left: 70.3vw;

        z-index: 3;
    }

    @keyframes squirrel-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-4.05vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }

    .rabbit {
        width: 32vw;

        bottom: 27vh;
        left: 68vw;

        z-index: 1;
    }

    @keyframes rabbit-jump {
        0% {transform: translateY(0)}
        15% {transform: translateY(-2.85vh)}
        25% {transform: translateY(1.11vh)}

        /* animation ends at 35% the rest is just delay between jumping again */
        35% {transform: translateY(0)}
        100% {transform: translateY(0)}
    }
}


@media (max-width: 768px) and (min-aspect-ratio: 3/4.3) and (orientation: portrait) {
    .start-page-content {
        padding-top: calc(22vh - 12vw);
    }

    .start-page-content h3 {
        font-size: clamp(1.4em, 8vw, 2em);
    }

    .start-page-content h2 {
        font-size: clamp(2em ,9vw, 3em);
    }

    .start-page-content h1 {
        font-size: clamp(2em ,9vw, 3em);
    }

    .start-btn {
        font-size: clamp(2.5em, 4.5vw, 5em);
        padding: 3vh 5vw;
    }

    .bee {
        width: 28vw;
    }

    .panda {
        left: 42vw;
    }
}

/* Landscape phone  */
@media (max-height: 600px) and (orientation: landscape) {
    .top-bubbles {
        max-width: 25vw;
    }

    .logo {
        width: clamp(75px, 10vw ,100px);
    }

    .start-page-content {
        gap: 0vh;
        padding-top: calc(25vh - 15vw);
    }

    .start-page-content * {
        transform: scale(0.7);
    }

    .start-page-content h1 {
        padding-bottom: 0vh;
        font-size: clamp(2em, 6vw, 5.875em);
    }

    .start-page-content h2 {
        padding-top: 0vh;
        font-size: clamp(1.5em, 5vw, 4.8em);
    }

    .start-page-content h3 {
        font-size: clamp(0.8em, 4vw, 3.45em);
    }

    .bee {
        width: 16.05vw;
        left: 9.2%;
    }

    .owl {
        width: 11.51vw;
        left: 20.8%;
    }

    .armadillo {
        width: 14.84vw;
        left: 31.5%;
    }

    .panda {
        width: 10.84vw;
        left: 44.5%;
    }

    .squirrel {
        width: 14.84vw;
        left: 51.3%;
    }

    .poodle {
        width: 16.6vw;
        /*right: 24.1%;*/
        left: 58.9%;
    }

    .octopus {
        width: 20.44vw;
        /*right: 9.7%;*/
        left: 71.3%;
    }

    .rabbit {
        width: 16.2vw;
        /*right: 13.6%;*/
        left: 72.4%;
    }
}

/* END OF START PAGE STYLES */

/*402 x 595*/