html, body {
    margin: 0;
    padding: 0;
}

.animation-container {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 30%;
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family:  sans-serif;
    font-size: 15px;
}
#ray{
    width: 300px;
    border-radius: 25px;
}

svg {
    height: 42vh;
}

.page {
    height: 400vh;
}

.content {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
}

.content-section {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "JetBrains Mono", sans-serif;
}

.content-section:nth-child(1) {
    background-color: #E2D03E;
}

.content-section:nth-child(2) {
    background-color: #75b59a;
}
.content-section:nth-child(3) {
    background-color: #f1f1f1;
}

.content-section:nth-child(4) {
    background-color: #85ddeb;
}
.content-section:nth-child(5) {
    background-color: #ad85d27c;
}
.content-section:nth-child(6) {
    background-color: #6b85a2;
}
.content-section:nth-child(7) {
    background-color: #8ec9a3;
}
.content-section:nth-child(n+ 8) {
    background-color: #53a5cb;
}
.content-section:nth-child(n+9) {
    background-color: #ccc2c1;
}
.content-section:nth-child(10) { background-color: #c3adab; }
.content-section:nth-child(11) { background-color: #377abc; } 
.content-section:nth-child(12) { background-color: #bfc2c6; } 
.content-section:nth-child(13) {
    background-color: #b7d0c6;
}
.content-section:nth-child(14) {
    background-color: #0cadf3;
}

.content-section:nth-child(15) {
    background-color: #b9d2ea;
}

.content-section:nth-child(16) {
    background-color: #85ddeb;
}
.content-section:nth-child(17) {
    background-color: #85ddeb;
}
.content-section:nth-child(18) {
    background-color: #84b8ad;
}
.content-section:nth-child(19) {
    background-color: #bccf9b;
}
.content-section > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin-top: -10vh;
    max-width: 700px;
    text-align: center;
}

h1 {
    padding: 0;
    margin: .5em 0;
}

p {
    padding: 0;
    margin: .25em 0;
}

a {
    color: black;
}

.arrow-animated {
    font-size: 35px;
    animation: arrow-float 1s infinite;
}

@keyframes arrow-float {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    60% {
        transform: translateY(50%);
        animation-timing-function: ease-in-out;
    }
    100% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
}