/* Basic reset and full height setup */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Comfortaa', sans-serif;
    /* Apply Comfortaa globally */
    transition: background-color 1.5s ease;
    /* Smooth background transition */
}

/* Flexbox centering for the body */
body {
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    background-color: #f0f0f0;
    /* Final Light gray background */
    overflow: hidden;
    /* Prevent scrollbars during animation */
}

/* Styles for the logo text container */
.logo-container {
    font-size: 15vw;
    /* Adjust the '15' value as needed. Larger value = larger text relative to screen width */
    /* To cap font size, consider using clamp() or media queries.
       e.g., font-size: clamp(2em, 15vw, 6em); */
    font-weight: 700;
    color: #004080;
    text-align: center;
    white-space: nowrap;
    position: relative;
    opacity: 0;
    /* Keep for GSAP */
    visibility: hidden; /* Hide initially via CSS */
}

/* Style for individual characters/elements for animation */
.char {
    display: inline-block;
    /* Allows transforms */
    position: relative;
    /* For transform-origin if needed */
    vertical-align: middle;
    /* Align characters consistently */
}

/* Container for the 'o' and its dot */
.o-container {
    position: relative;
    /* Crucial for positioning the absolute dot */
    display: inline-block;
    /* Keep it in line with other text */
    vertical-align: middle;
    /* Helps align inline-block elements better with surrounding text */
    line-height: 1;
    /* Normalize line height for more predictable centering */
}

/* Style the dot element */
.dot {
    position: absolute;
    top: 50%;
    /* Places top edge at vertical center of parent */
    left: 50%;
    /* Places left edge at horizontal center of parent */
    /* Use -50%, -50% to center the dot itself on the 50/50 point */
    transform: translate(-50%, -50%);
    /* Add an upward adjustment relative to parent's font size using margin-top */
    /* You will need to experiment with the exact value */
    margin-top: 0.07em;
    /* <-- Start with an estimated value and adjust */
    width: 0.2em;
    /* Size relative to the font size of .o-container */
    height: 0.2em;
    /* Size relative to the font size of .o-container */
    background-color: currentColor;
    /* Inherit color from parent */
    border-radius: 50%;
    /* Make it a circle */
    display: block;
    /* Ensures width/height are applied correctly */
}

/* Specific adjustment for the 'o' character if needed */
.o-char {
    /* Inherits .char styles. Ensure it also aligns well. */
    vertical-align: middle;
}