/* style_calendar.css */
body {
    font-family: 'Roboto', Arial, sans-serif; /* Updated font for a modern look */
    background-color: #1C1C1C; /* Dark background for contrast */
    color: #FFFFFF; /* Light text color */
    margin: 0;
}

header {
    text-align: center;
    margin: 20px 0;
    color: #50E3C2; /* Teal color for header */
}


.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px; /* Increased gap for better spacing */
    margin: 20px;
}

.day {
    background-color: #2C2C2C; /* Darker background for days */
    border: 1px solid #444; /* Darker border for a modern look */
    border-radius: 8px; /* Rounded corners */
    padding: 15px; /* Increased padding for better touch targets */
    text-align: center;
    transition: background-color 0.3s ease; /* Smooth background transition */
}

.day:hover {
    background-color: #4A90E2; /* Change background on hover */
    color: #FFFFFF; /* Change text color on hover */
}

.event {
    background-color: #50E3C2; /* Teal background for events */
    border: 1px solid #007bff; /* Blue border for events */
    border-radius: 5px; /* Rounded corners for events */
    margin-top: 5px;
    padding: 8px; /* Increased padding for events */
    transition: transform 0.2s ease; /* Smooth transform transition */
}

.event:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

/* Assuming this is the class for your modal */
.modal {
    background-color: #FFFFFF; /* Updated background color for event details */
    color: #000000; /* Text color */
    padding: 20px; /* Padding for the modal */
    border-radius: 16px; /* Rounded corners */
    /* ... other styles ... */
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    border-radius: 16px; /* Added to make corners round */
}

nav ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
}

nav ul li {
    display: inline; /* Display links in a single line */
    margin-right: 15px; /* Space between links */
}

nav ul li a {
    text-decoration: none; /* Remove underline from links */
    color: #50E3C2; /* Link color */
    font-weight: bold; /* Bold text */
}

nav ul li a:hover {
    color: #50E3C2; /* Darker color on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .calendar {
        grid-template-columns: repeat(7, 1fr); /* Set to 7 columns for days */
        gap: 3px; /* Space between days */
    }

    .day {
        padding: 2px; /* Adjust padding for smaller boxes */
        font-size: 1rem; /* Adjust font size for smaller screens */
    }

    .event {
        padding: 2px; /* Adjust padding for events */
        font-size: 0.9rem; /* Adjust font size for events */
    }

    .modal {
        background-color: #FFFFFF; /* Updated background color for event details */
        color: #000000; /* Text color */
        padding: 5px; /* Padding for the modal */
        border-radius: 8px; /* Rounded corners */
    }

    .modal-content {
        background-color: #fefefe;
        margin: 5% auto; /* 15% from the top and centered */
        padding: 5px;
        border: 1px solid #888;
        width: 80%; /* Could be more or less, depending on screen size */
        border-radius: 16px; /* Added to make corners round */
    }
}

@media (max-width: 480px) {
    .calendar {
        grid-template-columns: 1fr; /* Stack days in a single column for very small screens */
    }

    .day {
        padding: 15px; /* Adjust padding for very small screens */
        font-size: 1.1rem; /* Slightly reduce font size for very small screens */
    }

    .event {
        padding: 8px; /* Adjust padding for events */
        font-size: 0.9rem; /* Adjust font size for events */
    }
}