@media (min-width: 768px){
    header{
        top: 20px;
    }
}

header {
    color: whitesmoke;
    z-index: -1; /* Ensures it stays above other content */
    width: 70vw;
    margin: 0 auto;
}

header h1, header h2, header h3, header h4 {
    font-size: 2.5vw;
    transform: translateZ(0); /* Improves animation performance */
    will-change: transform; /* Optimizes for scrolling */
}

header h1 {
    margin: 20% 0 15px 0%;
    animation: fadeIn 0.5s forwards;
}

header h2 {
    margin: 0 0 100px 0%;
    opacity: 0;
    animation: fadeIn 1s forwards 1s;
}

header h3,
header h4 {
    margin: 0;
    text-align: right;
    line-height: 1.5;
    opacity: 0;
}

header h3 {
    animation: fadeIn 2s forwards 2s;
}

header h4 {
    animation: fadeIn 3s forwards 3s;
}

/* Adjust the scroll speed using a parallax effect */
body {
    scroll-behavior: smooth;
}