@font-face { 
    font-family: 'NimbusRoman'; 
    src: url('fonts/NimbusRomNo9L-Med.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 

h2 {
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
}


a { 
    font-size: 18px; 
    font-style: normal;
    color: black;
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace;
    
    /* Adds vertical and horizontal padding around the text */
    padding: 8px 8px; 
    /* Ensures vertical padding affects the background height */
    display: inline-block; 
} 


p { 
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px; 
} 

span { 
    background-color: yellow; 
    display: inline-block; 
    padding: 0 8px; 
    width: fit-content; 
    max-width: 0; 
    font-family: 'NimbusRoman', serif; /* Added generic fallback */
    overflow: hidden; 
    white-space: nowrap; 
    border-right: 3px solid #000; 
    
    /* Changed blinkCursor duration from 0.75s to 1.5s for a slower blink */
    animation: 
        typing 3s steps(30, end) forwards, 
        blinkCursor 1.5s step-end infinite; 
} 

@keyframes typing { 
    from { max-width: 0; } 
    to { max-width: 100%; } 
} 

/* Adjusted keyframes to match the step-end timing perfectly */
@keyframes blinkCursor { 
    from, to { border-color: transparent; } 
    50% { border-color: black; } 
} 

.header-txt { 
    background-color: white; 
    display: inline-block; 
    border-right: none !important; 
} 

.header-txt:hover { 
    background-color: yellow; 
    cursor: pointer;
}


.main-page-text { 
    display: grid; 
    place-items: center; 
    height: 100vh; 
}


.section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;  /* Centers the containers */
}

.container h1 {
    display: inline-block;
    width: fit-content;
    padding: 8px;
    text-align: left;  /* Aligns text to the left within the h1 */
}

.container h1 a {
    display: inline-block;
    width: fit-content;
    padding: 8px;
    color: black;
    text-decoration: none;
    font-size: 32px;
    font-family: NimbusRoman;
    transition: background-color 0.3s ease;
    text-align: left;  /* Ensures link text is left-aligned */
}

.container h1 a:hover {
    background-color: yellow;
}

.container:hover h1 {
    background-color: yellow;
}