:root {
  --font-size: 3rem;
  --line-height: 1.2;
  --num-words: 11; /* Including the extra word at the end */
  --animation-duration: 8s;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    height: 100vh;
    overflow: hidden;
    background: #0032c9;
}

.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Logo Section - 50% of screen */
.logo-section {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    max-width: 432px;
    max-height: 216px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Text Section - 50% of screen */
.text-section {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rotating-text {
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: white;
    text-align: center;
    font-weight: 300;
    letter-spacing: 0.05em;
}

.window {
    display: inline-block;
    overflow: hidden;
    height: calc(var(--font-size) * var(--line-height));
    vertical-align: top;
    margin: 0;
    padding: 0;
}

.window-inner {
    display: inline-block;
    animation: scroll-text var(--animation-duration) ease-in-out;
    color: white;
    font-weight: 600;
    margin: 0;
    padding: 0;
    text-align: left;
}

.window span {
    display: block;
    margin: 0;
    padding: 0;
}

@keyframes scroll-text {
    0% {
        transform: translateY(0%); /* great. */
    }
    9.09% {
        transform: translateY(calc(-9.09%)); /* feverish. */
    }
    18.18% {
        transform: translateY(calc(-18.18%)); /* nauseous. */
    }
    27.27% {
        transform: translateY(calc(-27.27%)); /* achy. */
    }
    36.36% {
        transform: translateY(calc(-36.36%)); /* congested. */
    }
    45.45% {
        transform: translateY(calc(-45.45%)); /* dizzy. */
    }
    54.54% {
        transform: translateY(calc(-54.54%)); /* dehydrated. */
    }
    63.63% {
        transform: translateY(calc(-63.63%)); /* queasy. */
    }
    72.72% {
        transform: translateY(calc(-72.72%)); /* wiped out. */
    }
    81.81% {
        transform: translateY(calc(-81.81%)); /* run down. */
    }
    90.90% {
        transform: translateY(calc(-90.90%)); /* dead. */
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    :root {
        --font-size: 2rem;
    }
    
    .logo {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size: 1.5rem;
    }
    
    .logo {
        font-size: 2rem;
    }
}