body, html {
    height: auto; /* Change to auto to accommodate the content's length */
    margin: 0;
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically for smaller contents */
    background-color: #333;
    padding: 20px; /* Add some padding around the content */
    color: whitesmoke;
    font-size: 24px;
}

.content {
    max-width: 600px; /* Set a max-width for the content for better readability */
    text-align: center; /* Center the text */
    margin-bottom: 20px; /* Space between the text and the grid */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-template-rows: repeat(5, auto); /* 5 rows with auto height */
    gap: 20px; /* Increase gap for better spacing */
    padding: 20px; /* Padding around the grid */
    background-color: #444; /* White background for the grid */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow for depth */
    border-radius: 10px; /* Rounded corners for the grid container */
}

.slider-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.slider-label {
    margin-right: 60px;
}

.slider {
    margin-left: auto; /* This pushes the slider and span to the right */
}

.slider + span {
    margin-left: 32px;
}

.slider + span.small-margin {  /*100*/
    margin-left: 0px; 
}

.slider + span.medium-margin { /*10-99*/
    margin-left: 20px; 
}

.slider + span.large-margin {  /*0-9*/
    margin-left: 32px; 
}

#slidersContainer {
    padding: 20px; /* Padding around the grid */
    background-color: #444; /* White background for the grid */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow for depth */
    border-radius: 10px; /* Rounded corners for the grid container */
}

#answerField {
    padding: 20px; /* Padding around the grid */
    background-color: #c2c2c2; /* White background for the grid */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow for depth */
    border-radius: 10px; /* Rounded corners for the grid container */
    color:#000;
    font-size: 20px;
}

textarea::placeholder {
    font-size: 20px;
    color:#000;
}

.column {
    display: flex;
    flex-direction: column;
}

.column button:last-child {
    margin-bottom: -77px; /* Reduce this to decrease the gap below the bottom button */
}

button {
    width: 160px;
    height: 70px;
    padding: 15px 20px; /* More padding for a larger button */
    font-size: 20px;
    color: #ffffff; /* White text */
    background-color: #007bff; /* Soft blue background */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners for the buttons */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    margin-bottom: 20px;
}

button:hover {
    background-color: #0056b3; /* Darker shade of blue on hover */
}

button:disabled {
    background-color: #cccccc; /* Light gray background */
    color: #666666; /* Darker text color */
    cursor: not-allowed; /* Change cursor to indicate the button is not clickable */
}

.empty-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #444; /* Fallback color */
    background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
}

.modal-content {
    background-color: #444;
    margin: 8% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 3px solid rgba(0,0,0,0.1);
    width: 50%; /* Could be more or less, depending on screen size */
    border-radius: 10px
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}