/* Position and style the container */
.container {
    position: absolute; /* Position the container absolutely within its parent */
    top: 240px; /* Distance from the top of the parent element */
    left: 895px; /* Distance from the left of the parent element */
    background-color: white; /* White background color */
    padding: 20px; /* Padding inside the container */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Style the body to ensure the wallpaper remains static and doesn't cause scrolling */
body {
    background-image: url('path/to/your/image.jpg'); /* Background image */
    background-size: cover; /* Cover the entire background */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-attachment: fixed; /* Keep the background fixed during scrolling */
    overflow: hidden; /* Disable scrolling */
    height: 100vh; /* Full viewport height */
    margin: 0; /* Remove default margin */
}

/* General body styling */
body {
    font-family: 'Apple System', 'Helvetica Neue', sans-serif; /* Font family */
    background-color: #F0F0F0; /* Light gray background color */
    color: #333; /* Dark gray text color */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    display: flex; /* Flexbox layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    min-height: 100vh; /* Minimum height of full viewport */
}

/* Additional container styling */
.container {
    padding: 30px; /* Padding inside the container */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    text-align: center; /* Center text */
    word-wrap: break-word; /* Break long words */
    overflow-wrap: break-word; /* Break long words */
}

/* Style for headings */
h1 {
    color: maroon; /* Maroon text color */
}

/* Style for labels */
label {
    display: block; /* Block display */
    margin-bottom: 5px; /* Space below the label */
    color: maroon; /* Maroon text color */
}

/* Style for text inputs */
input[type="text"] {
    width: 100%; /* Full width */
    padding: 10px; /* Padding inside the input */
    margin-bottom: 15px; /* Space below the input */
    border: 1px solid maroon; /* Maroon border */
    border-radius: 5px; /* Rounded corners */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Style for the results section */
#results {
    margin-top: 20px; /* Space above the results section */
}

/* Style for paragraphs within the results section */
#results p {
    margin-bottom: 5px; /* Space below the paragraph */
    color: maroon; /* Maroon text color */
}

/* Style for the welcome message */
#welcome-message {
    color: maroon; /* Maroon text color */
    font-size: 16px; /* Font size */
}

/* Style for the error message */
#error-message {
    color: gold; /* Gold text color */
    font-weight: bold; /* Bold text */
    margin-bottom: 10px; /* Space below the error message */
}

/* Hide slider containers initially */
#slider-container-1, #slider-container-2 {
    display: none; /* Hide the containers */
    margin-top: 20px; /* Space above the containers */
}

/* Style for labels within slider containers */
#slider-container-1 label, #slider-container-2 label {
    display: block; /* Block display */
    margin-bottom: 5px; /* Space below the label */
    color: maroon; /* Maroon text color */
}

/* Style for range inputs */
input[type="range"] {
    width: 100%; /* Full width */
    margin-bottom: 10px; /* Space below the input */
}

/* Hover effect for the submit button */
#submitButton:hover {
    transform: scale(1.1); /* Slightly enlarge the button */
}

/* Disable buttons within slider containers and change their appearance */
#slider-container-1 button:disabled, #slider-container-2 button:disabled {
    background-color: #ccc; /* Gray background for disabled buttons */
    cursor: not-allowed; /* Change cursor to indicate the button is not clickable */
}

/* General body styling with gradient background */
body {
    font-family: 'Arial, sans-serif'; /* Font family */
    margin: 0; /* Remove default margin */
    padding: 20px; /* Padding inside the body */
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(128,0,0,1) 35%, #00d4ff 100%); /* Gradient background */
    display: flex; /* Flexbox layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    height: 100vh; /* Full viewport height */
}

/* Additional container styling */
.container {
    width: 600px; /* Fixed width */
    padding: 20px; /* Padding inside the container */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Style for range and text inputs */
input[type="range"], input[type="text"] {
    width: 100%; /* Full width */
    margin: 0 auto; /* Center horizontally */
    display: block; /* Block display */
    padding: 5px; /* Padding inside the input */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Style for the welcome box */
.welcome-box {
    max-width: 100%; /* Full width */
    margin: 0 auto; /* Center horizontally */
    padding: 10px; /* Padding inside the box */
    background-color: white; /* White background color */
    border: 0px solid maroon; /* No border */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center text */
}

/* Additional styling for the error message */
#error-message {
    margin-top: 10px; /* Space above the error message */
    font-size: 16px; /* Font size */
}

/* Style for the submit button */
#submitButton {
    background-color: gold; /* Gold background color */
    color: white; /* White text color */
    padding: 10px 20px; /* Padding inside the button */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: transform 0.3s ease-in-out; /* Smooth transition for the transform property */
}

/* Hover effect for the submit button */
#submitButton:hover {
    transform: scale(1.1); /* Slightly enlarge the button */
}

/* General button styling */
button {
    background: linear-gradient(90deg, Gold 0%, Gold 35%, Gold 100%); /* Gradient background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
    border: none; /* No border */
    color: white; /* White text color */
    padding: 10px 20px; /* Padding inside the button */
    text-align: center; /* Center text */
    text-decoration: none; /* No text decoration */
    display: inline-block; /* Inline-block display */
    font-size: 16px; /* Font size */
    margin: 4px 2px; /* Margin around the button */
    cursor: pointer; /* Pointer cursor */
    border-radius: 4px; /* Rounded corners */
}

/* Style for the prelim grade input */
input[type="text"] {
    width: 100%; /* Full width */
    max-width: 300px; /* Maximum width */
    margin: 0 auto; /* Center horizontally */
    display: block; /* Block display */
    padding: 5px; /* Padding inside the input */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-size: 2em; /* Large font size */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center text */
}

/* Additional styling for the prelim grade input box */
input[type="text"] {
    width: 100%; /* Full width of the parent container */
    max-width: 300px; /* Maximum width of 300px */
    margin: 10px auto; /* Center horizontally with 10px margin on top and bottom */
    display: block; /* Display as a block element */
    padding: 10px; /* Padding inside the input box */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-size: 2em; /* Large font size for the text */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center the text inside the input box */
    border: 2px solid maroon; /* Maroon border with 2px width */
    border-radius: 10px; /* Rounded corners with 10px radius */
    background-color: #f9f9f9; /* Light gray background color */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition for the box-shadow property */
}

/* Styling for the input box when it is focused */
input[type="text"]:focus {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    outline: none;
}

/* Slider transitions */
#midtermSlider-1, #finalSlider-1, #midtermSlider-2, #finalSlider-2 {
    transition: all 0.3s ease-in-out;
}