
/* Custom styles to enhance the school-book feel */
body {
    /* Light paper-like background */
    background-color: #f7f7e8;
    font-family: 'Inter', sans-serif;
}

/* Styling for the main content container to look like a worksheet */
.worksheet-container {
    border: 4px solid #4A90E2; /* Blue border like construction paper */
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1); /* Fun, lifted shadow */
    padding: 2.5rem;
    margin-top: 2rem;
    background-color: white; /* White paper background */
    position: relative;
}

/* Style for the table to look like an organized chart */
table {
    border-collapse: separate;
    border-spacing: 0 5px; /* Add vertical space between rows */
}

th {
    background-color: #7ED321; /* Green header */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px 6px 0 0;
    border: 1px solid #6aa01e;
}

td {
    padding: 0.5rem 0.5rem;
    text-align: center;
}

/* Styling for labels to look like handwritten text */
label {
    display: inline-block;
    color: #4A90E2; /* Bright blue ink */
    font-weight: 700;
    /* Slight shadow to make it pop like marker or crayon */
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    /* Subtle rotation for a fun, handwritten look */
    transform: rotate(-1deg);
}

/* Fun styling for inputs */
input[type="number"], input[type="text"] {
    border: 2px solid #F5A623; /* Yellow pencil border */
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
    transition: border-color 0.2s;
}

input[type="number"]:focus, input[type="text"]:focus {
    outline: none;
    border-color: #D0021B; /* Red focus */
    box-shadow: 0 0 5px rgba(208, 2, 27, 0.5);
}

/* Fieldset to look like a labeled box */
#operations {
    border: 3px dashed #4A90E2; /* Dashed blue line */
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    background-color: #eaf3ff; /* Very light blue background */
}

#operations legend {
    font-weight: bold;
    font-size: 1.25rem;
    color: #D0021B; /* Red title */
    padding: 0 0.5rem;
    background-color: #f7f7e8;
    border-radius: 4px;
}