* {
    padding: 0;
    margin: 0;
}

:root {
    --clr-0: #e4eef7;
    --clr-1: #F5EFE6;
    --clr-2: #303030;
    --clr-3: #AEBDCA;
    --clr-4: #7895B2;

    --clr-10: #c5bbac;
    --clr-11: #656363;

    --clr-pale: #ddd;
}
/* 
:root {
    --clr-0: #768089;
    --clr-1: #8b9ead38;
    --clr-2: #576372;
    --clr-3: #AEBDCA;
    --clr-4: #7895B2;

} */
section.page {
    position: relative;
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

section.page1 {
    background-color: var(--clr-2);
}

section.page1 .title {
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

section.page1 .title h1 {
    text-align: center;
    max-width: 30%;
    transform: translateX(-20vw);
    font-size: var(--fs-m);
}

section.page1::after {
    position: absolute;
    content: "";
    height: 2vh;
    width: 100%;
    top: 96vh;
    padding: 0;
    margin: 0;
    z-index: 2;
    background-color: var(--clr-1);
}
section.page1::before {
    position: absolute;
    content: "";
    height: 6vh;
    width: 100%;
    top: 94vh;
    padding: 0;
    margin: 0;
    z-index: 1;
    background-color: var(--clr-2);
}


section.page1 .circle1 {
    position: absolute;
    background-color: var(--clr-1);
    border-radius: 50%;
    height: 50vw;
    width: 50vw;
    bottom: -10vw;
    right: -10vw;
    opacity: 0.8;
    animation: circle1 1.5s forwards ease-in-out;
}

section.page1 .circle2 {
    position: absolute;
    background-color: var(--clr-1);
    border-radius: 50%;
    height: 100vh;
    width: 100vh;
    top: -50%;
    left: -10%;
    opacity: 0.4;
    animation: circle2 3s forwards ease-in-out;
}
section.page1 .circle3 {
    position: absolute;
    background-color: var(--clr-1);
    border-radius: 50%;
    height: 100vh;
    width: 100vh;
    bottom: -10%;
    left: 40%;
    opacity: 0.2;
    animation: circle3 5s forwards ease-in-out;
}
@media (max-width: 50em) {
    section.page1 .circle1 {
        height: 70vw;
        width: 70vw;
        bottom: -10vw;
        right: -10vw;

    }
    section.page1 .circle2 {
        height: 70vh;
        width: 70vh;
        top: -30%;
        left: -30%;
    }
    section.page1 .circle3 {
        height: 100vh;
        width: 100vh;
        bottom: -20%;
        left: -10%;
    }
}

@keyframes circle1 {
    0% {
        transform: translateX(0vw)
    }
    100% {
        transform: translateX(-55vw)
    }
}

@keyframes circle2 {
    0% {
        transform: translateX(-30vw)
    }
    100% {
        transform: translateX(0vw)
    }
}
@keyframes circle3 {
    0% {
        transform: translateX(-10vw)
    }
    100% {
        transform: translateX(10vw)
    }
}