body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.container {
    min-height: 100vh;
    /* width: 100vw; */
    overflow-y: auto; 
    text-align: center; 
    /* border: 1px solid black; */
}


.aria-oval {
    width: 60%;
    max-width: 300px;
    /* border: 1px solid black; */
    display: block;
    margin: auto;
    margin-top: 100px;
    opacity: 0;
    animation: fadeInAnimation 1.5s ease-in-out 0s forwards;
}

.aria-logotype {
    width: 160px;
    /* border: 1px solid black; */
    display: block;
    margin: auto;
    margin-top: 40px;
    opacity: 0;
    animation: fadeInAnimation 1.5s ease-in-out 0.8s forwards;
}

.text-container {
    /* border: 1px solid black; */
    line-height: 260%;
    /* margin-top:30px; */
    text-align: center;
    max-width: 800px;
    padding: 30px;
    font-size: 20px;
    margin: 30px auto 80px auto;
    font-family: "tt-hei-chs-variable", sans-serif;
    font-variation-settings: "wght" 200;
    opacity: 0;
    animation: fadeInAnimation 2s ease-in-out 1.5s forwards;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }

}