/*Smaller desktop (600px) */
@media (max-width: 600px) {

    /* Adjust calculator container */
    .age-calculator {
        padding: 3rem 1.5rem;
        border-radius: 20px 20px 80px 20px;
    }

    /* Input fields adjustments */
    .input-fields {
        width: 100%;
        padding-bottom: 3rem;
        gap: 0.75rem;
    }

    /* Smaller input fields */
    input {
        font-size: 1.2rem;
        padding: 0.6rem;
        max-width: 100px;
    }

    /* Smaller labels */
    label {
        font-size: 0.65rem;
        letter-spacing: 2px;
    }

    /* Adjust submit button position and size */
    .submit-section {
        justify-content: center;
    }

    .calculate-btn {
        width: 60px;
        height: 60px;
        top: -30px;
    }

    .calculate-btn img {
        width: 25px;
    }

    /* Adjust results display */
    .result-display {
        margin-top: 3rem;
    }

    .result-item {
        font-size: 3rem;
    }

    /* Error message positioning */
    .error-message {
        bottom: -2rem;
        font-size: 0.6rem;
    }
}

/* Mobile I (480px) */
@media only screen and (max-width: 480px) {

    /* Adjust calculator container */
    .age-calculator {
        padding: 3rem 1.5rem;
        border-radius: 20px 20px 80px 20px;
    }

    /* Input fields adjustments */
    .input-fields {
        width: 100%;
        padding-bottom: 3rem;
        gap: 0.75rem;
    }

    /* Smaller input fields */
    input {
        font-size: 1.2rem;
        padding: 0.6rem;
        max-width: 80px;
    }

    /* Smaller labels */
    label {
        font-size: 0.65rem;
        letter-spacing: 2px;
    }

    /* Adjust submit button position and size */
    .submit-section {
        justify-content: center;
    }

    .calculate-btn {
        width: 60px;
        height: 60px;
        top: -30px;
    }

    .calculate-btn img {
        width: 25px;
    }

    /* Adjust results display */
    .result-display {
        margin-top: 3rem;
    }

    .result-item {
        font-size: 3rem;
    }

    /* Error message positioning */
    .error-message {
        bottom: -2rem;
        font-size: 0.6rem;
    }
}

/* Mobile II (375px) */
@media only screen and (max-width: 375px) {

    /* Adjust calculator container */
    .age-calculator {
        padding: 3rem 1.5rem;
        border-radius: 20px 20px 80px 20px;
    }

    /* Input fields adjustments */
    .input-fields {
        width: 100%;
        padding-bottom: 3rem;
        gap: 0.75rem;
    }

    /* Smaller input fields */
    input {
        font-size: 1.2rem;
        padding: 0.6rem;
        max-width: 70px;
    }

    /* Smaller labels */
    label {
        font-size: 0.65rem;
        letter-spacing: 2px;
    }

    /* Adjust submit button position and size */
    .submit-section {
        justify-content: center;
    }

    .calculate-btn {
        width: 60px;
        height: 60px;
        top: -30px;
    }

    .calculate-btn img {
        width: 25px;
    }

    /* Adjust results display */
    .result-display {
        margin-top: 3rem;
    }

    .result-item {
        font-size: 3rem;
    }

    /* Error message positioning */
    .error-message {
        bottom: -2rem;
        font-size: 0.6rem;
    }
}