#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loader .typewriter {
    /* Use the 'Creepster' horror font */
    font-family: 'Creepster', cursive;

    /* Reset letter-spacing from main.css to ensure correct width calculation */
    letter-spacing: normal !important;

    /* Animation settings for "ACTIO" */
    width: 5.5ch; /* Adjusted width for 5 characters */
    white-space: nowrap;
    overflow: hidden;
    border-right: .15em solid orange;
    font-size: 28px; /* Set to match h2 size as requested */
    color: #fff;
    animation: typing 1.5s steps(5, end),
               blink-caret .75s step-end infinite !important;
}

@keyframes typing {
    from { width: 0 }
    /* Adjust the final width to match the element's width */
    to { width: 5.5ch } /* Adjusted width for 5 characters */
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
}