body {
    font-family: Arial, sans-serif;
    font-size: 22px;
    text-align: center;
    /* Disable pull-to-refresh but allow regular scrolling */
    overscroll-behavior-y: contain;
}

.large-font {
    font-size: 42px; /* Adjust the size as needed */
}
       
#game {
    width: 80%;
    margin: auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#operations label {
    margin-right: 10px; /* Adjust spacing between each checkbox */
    display: inline-block; /* Display labels in-line */
}

input, button {
    background-color: #8899CC; /* Slightly darker shade for hover effect */
    margin-top: 10px;
    padding: 5px;
}

.num-button {
    width: 90%;
    margin: 2px; // Small margin around buttons
    padding: 10px; // Padding inside buttons
    box-sizing: border-box; // Include padding and borders in the width and height
}

#numberPadAndHistory {
}

#headingAndFullScreen {
    font-size: 34px;
    width: 100%;
    display: grid;
	grid-template-columns: 70% 30%;
}


#questionAndAnswer {
    background-color: #5FFFCC; /* Slightly darker shade for hover effect */
    font-size: 44px;
    width: 100%;
    display: grid;
	grid-template-columns: 65% 35%;
}

#answer {
    background-color: #5FFFCC; /* Slightly darker shade for hover effect */
    width: auto; /* or specify a fixed width */
    margin-left: 0;
}


#answer {
    background-color: #FFFFCC; /* Slightly darker shade for hover effect */
}

#languageAndGrade {
    font-size: 44px;
    width: 100%;
    display: grid;
	grid-template-columns: 25% 25% 25% 25%;
}

#rangeControls {
    font-size: 44px;
    background-color: #AFFFCC; /* Slightly darker shade for hover effect */
}
.inputNumberClass {
    font-size: 44px;
    width: 3em;
    /* Add any other styles you want to apply to your inputs */
}

.basicButtonClass {
    font-size: 44px;
}

#history {
    font-size: 30px;
    box-sizing: border-box;
    max-width: 100%; /* Prevents it from growing larger than its container */
    min-width: 70%; /* Prevents it from growing larger than its container */
    overflow: auto; /* To handle overflowing content */
    /* Additional styling here */
    color: #CCFFCC; /* Slightly darker shade for hover effect */
}

.personButton {
    background-color: #FF0000; /* Change to your desired background color */
    color: white; /* Change to your desired text color */
    border: 2px solid #4CAF50; /* Optional: Change to your desired border color */
    /* Additional styling for the button */
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.personButton:hover {
    background-color: #889988; /* Slightly darker shade for hover effect */
}

#numberPad {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns with equal fraction of space */
    grid-template-rows: repeat(4, 2fr); /* 4 rows with double height */
    gap: 5px;
}

#numberPad button {
    font-size: 52px;
    height: 150%; /* Double the height, adjust as needed */
    width: 100%;

}

.grid-cell {
    width: 50px; /* Adjust as needed */
    height: 50px; /* Adjust as needed */
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
}