.header{
    background-color: #1F2833;
    color:#66FCF1;
    font-family: "Jersey 10", sans-serif;
    font-size: 4em;

    text-align: center;
    padding: 20px 0; /* Increase padding to make the header taller */
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.header h2 {
    margin: 0;
    padding: 0;
}

.header .stack {
    position: relative;
    height: 1.5em; /* Increase the height of the stack */
    overflow: hidden;
}

.header .stack span {
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    --stack-height: calc(100% / var(--stacks) - 1px);
    --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
    --clip-top: calc(var(--stack-height) * var(--index));
    --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
    clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
    animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
}

.header .stack span:nth-child(odd) { --glitch-translate: 8px; }
.header .stack span:nth-child(even) { --glitch-translate: -8px; }

@keyframes stack {
    0% {
        opacity: 0;
        transform: translateX(-50%);
        text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
    };
    60% {
        opacity: 0.5;
        transform: translateX(50%);
    }
    80% {
        transform: none;
        opacity: 1;
        text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
    }
    100% {
        text-shadow: none;
    }
}

@keyframes glitch {
    0% {
        text-shadow: -2px 3px 0 rgba(255,0,0,0.7), 2px -3px 0 rgba(0,0,255,0.7);
        transform: translate(var(--glitch-translate));
    }
    2% {
        text-shadow: 2px -3px 0 rgba(255,0,0,0.7), -2px 3px 0 rgba(0,0,255,0.7);
    }
    4%, 100% {  
        text-shadow: none; 
        transform: none;
    }
}