style.css

/* Background div fills the viewport */
#background {
    width: 100%;
    height: 100%;
}

/* Main title spans full width */
.mainTitle {
    width: 100%;
    text-align: left;
    font-size: clamp(1rem, 2vw, 2rem); /* Responsive font size */
}

/* Rounds display spans full width */
.roundsDisplay {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(1rem, 4vw, 2rem);
}

/* Timer display adjusts with viewport */
.timerDisplay {
    width: 100%;
    font-size: clamp(2rem, 25vw, 12rem); /* Responsive font size */
    text-align: center;
}

/* Button container uses Flexbox */
#buttonDisplay {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Buttons adjust based on container width */
#buttonDisplay button {
    flex: 1 1 20%; /* Adjust percentage as needed */
    margin: 0.5%;
    min-width: 90px;   /* Optional: prevent buttons from becoming too small */
    max-width: 110px;  /* Optional: prevent buttons from becoming too large */
    font-size: clamp(0.875rem, 1.5vw, 1.5rem); /* Responsive font size */
    background-color: #c4ffc6;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}