* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #0a0a0f;
    font-family: "Outfit", sans-serif;
}

main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.material-symbols-outlined {
    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
    font-size: 1.3em;
    margin-top: 2px;
}

button,
#show-quotes-checkbox,
label[for="show-quotes-checkbox"] {
    cursor: pointer;
}

#settings-btn {
    position: absolute;
    right: 22px;
    top: 22px;
    color: #9c98cd;
    background-color: transparent;
    border: none;
    gap: 5px;
    font-size: 0.9rem;
    letter-spacing: 1.8px;
    display: flex;
    align-items: center;
}

#settings-menu {
    background-color: #0f0f1a;
    border: solid 1px #1e1e30;
    border-radius: 12px;
    position: absolute;
    width: 288px;
    inset: unset;
    top: 55px;
    right: 14px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.45),
        0 16px 48px rgba(124, 111, 255, 0.18);
}

#settings-menu * {
    margin: 0;
}

label[for="birthday-input"] {
    font-size: 0.625rem;
    color: #9c98cd;
    letter-spacing: 1.8px;
}

#birthday-input {
    display: block;
    background-color: #13131f;
    border: solid 1px #1e1e30;
    color: white;
    border-radius: 8px;
    padding: 10px 12px;
    width: 100%;
    margin: 5px auto 15px;
}

#birthday-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

label[for="show-quotes-checkbox"] {
    font-size: 0.875rem;
    color: #9c98cd;
    display: flex;
    align-items: center;
    gap: 10px;
}

#show-quotes-checkbox {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #7c6fff;
    border-radius: 50%;

    /* Alignment for the inner dot */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition: border-color 0.2s ease;
}

#show-quotes-checkbox::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #7c6fff;

    /* Hide the dot by default using scale */
    transform: scale(0);
    transition: transform 0.15s ease-in-out;
}

#show-quotes-checkbox:checked::before {
    transform: scale(1);
}

#show-quotes-checkbox:hover {
    border-color: #b5b1ff;
}

/* Accessible focus state for keyboard navigation */
#show-quotes-checkbox:focus-visible {
    outline: 2px solid #b5b1ff;
    outline-offset: 2px;
}

div {
    text-align: center;
    padding-bottom: 50px;
    background: radial-gradient(
        rgba(124, 111, 255, 0.12) 0%,
        rgba(0, 0, 0, 0) 70%
    );
    margin: auto 0;
}

#age-year {
    font-family: "JetBrains Mono", monospace;
    font-weight: 300;
    font-size: 4.5rem;
    color: white;
    display: inline;
}

#age-decimal-part {
    font-family: "JetBrains Mono", monospace;
    font-weight: 300;
    font-size: 2.625rem;
    color: #7c6fff;
}

#quote {
    font-style: italic;
    color: #9c98cd;
    font-size: 1.2rem;
    font-family: "Times New Roman", Times, serif;
    max-width: 85%;
    margin: 30px auto 0;
}