:root {
    --animation-duration: 200ms;
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
}

html {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
}

body {
    min-height: 100svh;
    background-color: oklch(97% 0.014 254.604);
    display: grid;
    place-content: center;
}

main {
    margin-inline: auto;
    max-width: max-content;
    font-size: 2rem;
    color: oklch(43.9% 0 0);
}

.first {
    opacity: 0;
    display: inline-block;
    animation: var(--animation-duration) linear
        calc(var(--animation-duration) * 1) forwards fade-in;
}
.second {
    opacity: 0;
    display: inline-block;
    animation: var(--animation-duration) linear
        calc(var(--animation-duration) * 2) forwards fade-in;
}
.third {
    opacity: 0;
    display: inline-block;
    animation: var(--animation-duration) linear
        calc(var(--animation-duration) * 3) forwards fade-in;
}
.fourth {
    opacity: 0;
    display: inline-block;
    animation: var(--animation-duration) linear
        calc(var(--animation-duration) * 4) forwards fade-in;
}
.fifth {
    opacity: 0;
    display: inline-block;
    animation: var(--animation-duration) linear
        calc(var(--animation-duration) * 5) forwards fade-in;
}
.sixth {
    opacity: 0;
    display: inline-block;
    animation: var(--animation-duration) linear
        calc(var(--animation-duration) * 6.5) forwards fade-in;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}