html,
body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
    font-size: 16px;
}

#header1 {
    font-size: 2rem;
    letter-spacing: -0.025rem;
    font-weight: 700;
    line-height: 1.2;
    animation:
        0.5s ease-in-out 0s 1 normal forwards running opacity,
        0.5s ease-in-out 0s 1 normal forwards running translateDown;
    opacity: 0;
    margin: 0;
}

#header2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    animation:
        0.5s ease-in-out 0.25s 1 normal forwards running opacity,
        0.5s ease-in-out 0.25s 1 normal forwards running translateDown;
    opacity: 0;
    margin: 0;
}

#paragraphText {
    font-size: 1.25rem;
    animation:
        0.5s ease-in-out 0.5s 1 normal forwards running opacity,
        0.5s ease-in-out 0.5s 1 normal forwards running translateDown;
    opacity: 0;
    margin: 0;
}

@keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes translateDown {
    0% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes translateUp {
    0% {
        transform: translateY(50px);
    }
    100% {
        transform: translateY(0);
    }
    
}