/* Google Font */
body {
    font-family: 'Roboto Mono', monospace;
    background-color: #1e1e2f;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Fill the entire viewport height */
    margin: 0; /* Remove default margin */
}
.flex-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers children */
    width: 100%; /* Ensures the container takes full width */
}

#typing-container {
    display: flex; /* Use flex to help with alignment */
    justify-content: center; /* Center the content horizontally */
    width: auto; /* Let it grow based on content size, or set a specific width */
    margin: 0 auto; /* Center the container horizontally if width is less than 100vw */
}

#typing-container h1 {
    text-align: left; /* Centers the text within h1 */
}
.container {
    text-align: center; /* Keeps text in .container centered */
    max-width: 600px; /* Ensures consistent width with #typing-container */
}
h1 {
    font-weight: 500;
    color: #00cc88;
    overflow: visible;
    font-size: 36px; /* Default font size */
}

p {
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 18px; /* Default font size */
}

ul {
    list-style-type: none;
    padding: 0;
    display: flex;          /* Center vertically */
    flex-direction: column; /* Stack items vertically */
}

li {
    margin-bottom: 10px;
    font-size: 18px; /* Default font size */
}

a {
    color: #00aaff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}



/* Cursor styling */
#cursor {
    width: 12px; /* Slightly larger cursor */
    height: 36px; /* Matches font size */
    background-color: #00cc88;
    display: inline-block;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
}

#typed-text{
    display: inline-block; /* Ensures elements are inline */
    font-family: 'Roboto Mono', monospace; /* Ensures font consistency */
    font-size: 24px; /* Adjust based on your design */
    vertical-align: top; /* Aligns elements at the top */
}



/* Blinking cursor animation */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}