/* === Fonts === */
@font-face {
    font-family: BebasNeue;
    src: url(fonts/Oswald/Oswald-Regular.ttf);
}

:root {
    --backgroundColor: #F5B387;
    --calHeaderColors: #44AEC2;
    --highlight: #c6c461;
    --displayColors: #44AEC2;
    --weekdayColors: #3799AB;
    --homeworkColor: #FF595E;
    --eventsColor: #FF924C;
    --scheduleColor: #FFCA3A;
    --holidayColor: #1982C4;
    --schoolEventsColor: #6A4C93;
}

html,
body {
    background-color: var(--backgroundColor);
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

body {
    font-family: BebasNeue;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 100vh;
    gap: 30px;
}

.container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

/* Calendar and Weekly Display Section */
section {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
}

/* Other Displays Container */
.other-displays {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.firstDisplay {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

/* Make all displays stack in a column */
.other-displays,
.container,
.firstDisplay {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: nowrap;
}

/* Calendar Styles */

.calendar {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

.calendar-header {
    background-color: #44AEC2;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.calendar-header button {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.calendar-header button:hover {
    text-decoration: underline;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: #ddd;
}

.calendar-cell {
    background-color: white;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
}

.calendar-cell.header {
    background-color: var(--calHeaderColors);
    color: white;
    font-weight: bold;
}

.calendar-cell.today {
    background-color: var(--highlight);
    font-weight: bold;
}

.calendar-cell.selected {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

/* Side Display Styles */
#homeworkDisplay,
#eventDisplay,
#weeklyDisplay,
#scheduleDisplay,
#holidayDisplay,
#schoolEventsDisplay,
#buttonDisplay {
    margin: auto;
    background-color: var(--displayColors);
    color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

#homeworkDisplay,
#eventDisplay,
#scheduleDisplay {
    width: 100%;
    max-height: 600px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

#weeklyDisplay {
    margin-left: auto;
    margin-right: 10px;
    max-width: none;
    overflow-x: auto;
}

#buttonDisplay {
    display: flex;
    gap: 20px;
    flex-direction: column;
    padding: 10px;
}

#homeworkDisplay h2,
#eventDisplay h2,
#weeklyDisplay h2,
#scheduleDisplay h2,
#holidayDisplay h2,
#schoolEventsDisplay h2,
#buttonsDisplay h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: bold;
}

.homework-items,
.event-items,
.weekly-items,
.schedule-items,
.holiday-items,
.school-events-items,
.buttons-items {
    display: flex;
    flex-direction: column;

}

.homework-items h2,
.event-items h2,
.weekly-items h2,
.schedule-items h2,
.holiday-items h2,
.school-events-items h2,
.buttons-items h2 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.homework-items p,
.event-items p,
.weekly-items p,
.schedule-items p,
.holiday-items p,
.school-events-items p,
.buttons-items p {
    margin: 0;
    color: #666;
    color: white;
}

.sunday,
.monday,
.tuesday,
.wednesday,
.thursday,
.friday,
.saturday {
    margin-left: 100px;
    justify-content: flex-start;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin: 5px;
    background-color: var(--weekdayColors);
    min-height: 200px;
    width: auto;
    min-width: 200px;
    max-width: 100%;
    box-sizing: border-box;
}

.homeworkColor {
    color: white;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 5px 0;
    background-color: var(--homeworkColor);
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
}

.eventsColor {
    color: white;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 5px 0;
    background-color: var(--eventsColor);
    width: auto;
    box-sizing: border-box;
    border-radius: 10px;

}

.scheduleColor {
    color: white;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 5px 0;
    background-color: var(--scheduleColor);
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
}

.holidayColor {
    color: white;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 5px 0;
    background-color: var(--holidayColor);
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
}

.schoolEventsColor {
    color: white;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 5px 0;
    background-color: var(--schoolEventsColor);
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
}

form {
    margin-bottom: 10px;
}

.theDates {
    display: flex;
    justify-content: center;
    width: 100%;
}

.theDates h1 {
    width: 100%;
    text-align: center;
}

.shadow-lg {
    background: #44AEC2;
    color: white;
}