body {
    background-color: #999999;
    /* background-color: #a1a1a1; */
    padding: 20px;
    margin: 20px;
}

.header {
    text-align: center;
    color: #4c5c6c;
    font-size: clamp(24px, 5vw, 50px); /* responsive font size */
    font-family: Courier, monospace;
}

#grid {
    border-collapse: collapse;
    border-style: hidden;
    margin: 2rem auto;
}
   
.borderTd {
    border-width: 0.5vw;
    border-style: solid;
    border-color: #666666;
    height: min(5vw, 9rem);
    width: min(15vw, 9rem);
}

.tdButton {
    cursor: pointer;
    background-color: #999999;
    font-size: min(10vw, 6rem);
    color: #4c5c6c;
    text-align: center;
    width: min(15vw, 9rem);
    height: min(15vw, 9rem);
    border: hidden;
    border-radius: 0.3rem;
    display: block;
}

.tdButton:hover {
    background-color: #888888;
}

.tdButtonWinner {
    cursor: pointer;
    background-color: #999999;
    font-size: min(10vw, 6rem);
    color: #40475f;
    text-align: center;
    width: min(15vw, 9rem);
    height: min(15vw, 9rem);
    border: hidden;
    border-radius: 0.3rem;
    display: block;
}

.tdButtonWinner:hover {
    background-color: #888888;
}

/* Media query for smaller screens (e.g., mobile devices) */
@media screen and (max-width: 600px) {
    .borderTd {
        border-width: 0.5vw;
        height: min(18vw, 8rem); /* Increased size */
        width: min(18vw, 8rem);
    }

    .tdButton, .tdButtonWinner {
        font-size: min(12vw, 5rem); /* Increased font size */
        width: min(18vw, 8rem);
        height: min(18vw, 8rem);
        border-radius: 0.25rem;
    }
}

@media screen and (max-width: 400px) {
    .borderTd {
        border-width: 0.5vw;
        height: min(22vw, 10rem); /* Increased from 18vw, 8rem */
        width: min(22vw, 10rem); /* Increased from 18vw, 8rem */
    }

    .tdButton, .tdButtonWinner {
        font-size: min(14vw, 6rem); /* Increased from 11vw, 5rem */
        width: min(22vw, 10rem); /* Increased from 18vw, 8rem */
        height: min(22vw, 10rem); /* Increased from 18vw, 8rem */
        border-radius: 0.3rem; /* Increased for consistency */
    }
}

#resultStatus {
    font-size: min(7vw, 2rem); /* Converted 30px to ~1.875rem */
    color: #505050;
    text-align: center;
    visibility: hidden;
}

#chooseFlagX {
    border: hidden;
    font-size: min(5vw, 2rem); /* Converted 30px */
    font-family: 'Times New Roman', Times, serif;
    background-color: #999999;
    color: #505050;
    text-align: center;
    width: auto; /* Resize to fit text */
    padding: min(1vw, 0.5rem); /* Add padding for better appearance */
}

#chooseFlagX:hover {
    cursor: pointer;
}

#chooseFlagO {
    border: hidden;
    font-size: min(5vw, 2rem); /* Converted 30px */
    font-family: 'Times New Roman', Times, serif;
    background-color: #999999;
    color: #707070;
    text-align: center;
    width: auto; /* Resize to fit text */
    padding: min(1vw, 0.5rem);
}

#chooseFlagO:hover {
    cursor: pointer;
}

.buttonTable {
    margin: auto;
    padding: min(0.5vw, 0.3125rem); /* Converted 5px */
}

.buttonMargin {
    padding: min(1vw, 0.625rem); /* Converted 10px */
}

#reset {
    cursor: pointer;
    width: auto; /* Resize to fit text */
    min-width: min(10vw, 8.125rem); /* Converted 130px, ensure minimum size */
    height: auto; /* Resize to fit text */
    min-height: min(5vw, 4.0625rem); /* Converted 65px */
    font-size: min(5vw, 2rem); /* Converted 35px */
    font-family: Courier, monospace;
    border: hidden;
    border-radius: min(0.5vw, 0.4375rem); /* Converted 7px */
    background-color: #909090;
    color: #4c5c6c;
    padding: min(1vw, 0.5rem); /* Add padding for text */
}

#reset:hover {
    background-color: #888888;
}

#playerVsPlayer {
    cursor: pointer;
    width: auto; /* Resize to fit text */
    min-width: min(12vw, 10.625rem); /* Converted 170px */
    height: auto; /* Resize to fit text */
    min-height: min(5vw, 4.0625rem); /* Converted 65px */
    font-size: min(5vw, 2rem);
    font-weight: bold;
    font-family: Courier, monospace;
    border: hidden;
    border-radius: min(0.5vw, 0.4375rem); /* Converted 7px */
    background-color: #909090;
    color: #4c5c6c;
    padding: min(1vw, 0.5rem);
}

#playerVsPlayer:hover {
    background-color: #888888;
}

#playerVsComputer {
    cursor: pointer;
    width: auto; /* Resize to fit text */
    min-width: min(12vw, 10.625rem); /* Converted 170px */
    height: auto; /* Resize to fit text */
    min-height: min(5vw, 4.0625rem); /* Converted 65px */
    font-size: min(5vw, 2rem);
    font-family: Courier, monospace;
    border: hidden;
    border-radius: min(0.5vw, 0.4375rem); /* Converted 7px */
    background-color: #909090;
    color: #4c5c6c;
    padding: min(1vw, 0.5rem);
}

#playerVsComputer:hover {
    background-color: #888888;
}

.buttonContainer {
    display: flex;
    justify-content: center;
    align-items: center; /* Optional: for vertical alignment */
}

/* Media query for smaller screens (e.g., mobile devices) */
@media screen and (max-width: 600px) {
    #chooseFlagX, #chooseFlagO {
        font-size: min(5vw, 1.8rem);
        padding: min(0.8vw, 0.4rem);
    }

    .buttonTable {
        padding: min(0.4vw, 0.25rem);
    }

    .buttonMargin {
        padding: min(0.8vw, 0.5rem);
    }

    #reset {
        min-width: min(11vw, 10rem);
        min-height: min(4.5vw, 3.5rem);
        font-size: min(4vw, 2rem);
        border-radius: min(0.4vw, 0.375rem);
        padding: min(0.8vw, 0.4rem);
    }

    #playerVsPlayer, #playerVsComputer {
        min-width: min(13vw, 10rem);
        min-height: min(4.5vw, 3.5rem);
        font-size: min(4vw, 2rem);
        border-radius: min(0.4vw, 0.375rem);
        padding: min(0.8vw, 0.4rem);
    }
}

/* Media query for very small screens (e.g., narrow mobile devices) */
@media screen and (max-width: 400px) {
    #chooseFlagX, #chooseFlagO {
        font-size: min(7vw, 2rem); /* Increased from 1.6vw, 1.25rem */
        padding: min(1vw, 0.625rem); /* Increased from 0.7vw, 0.4rem */
    }

    .buttonTable {
        padding: min(1vw, 0.5rem); /* Increased from 0.3vw, 0.2rem */
    }

    .buttonMargin {
        padding: min(1.2vw, 0.75rem); /* Increased from 0.7vw, 0.4rem */
    }

    #reset {
        min-width: min(12vw, 11rem); /* Increased from 8vw, 6rem */
        min-height: min(6vw, 4rem); /* Increased from 4vw, 3rem */
        font-size: min(5vw, 2rem); /* Increased from 2vw, 1.5rem */
        border-radius: min(0.5vw, 0.5rem); /* Increased from 0.3vw, 0.3rem */
        padding: min(1vw, 0.625rem); /* Increased from 0.7vw, 0.35rem */
    }

    #playerVsPlayer, #playerVsComputer {
        min-width: min(30vw, 10rem); /* Increased from 9vw, 7.5rem */
        min-height: min(6vw, 4rem); /* Increased from 4vw, 3rem */
        font-size: min(5vw, 2rem); /* Increased from 1.6vw, 1.125rem */
        border-radius: min(0.5vw, 0.5rem); /* Increased from 0.3vw, 0.3rem */
        padding: min(1vw, 0.625rem); /* Increased from 0.7vw, 0.35rem */
    }
}