@media only screen and (max-width: 576px) {
    #menu {
        width: 70%;
    }

    main {
        margin-inline: 5%;
    }

    table {
        font-size: 14px;
    }

    th,
    td {
        padding: 10px 12px;
    }

    #calendar {
        width: 100%;
        margin: 0 auto;
        font-size: 0.9rem;
    }

    .fc-list-event {
        border-left: 4px solid var(--primary);
        padding-left: 0.5rem;
    }
}

@media only screen and (min-width:600px) {
    main {
        max-width: 100vw;
        max-height: 100vh;
    }

    #calendar {
        max-width: 1000px;
        width: 90%;
        margin: 2rem auto;
        background: white;
        box-shadow: var(--box-shadow);
        border-radius: 8px;
        padding: 1rem;
    }

    .fc-daygrid-day {
        border: 1px solid var(--gray-light);
    }

    .fc-daygrid-day:hover {
        background-color: var(--primary-light);
        cursor: pointer;
    }

    .fc-toolbar-title {
        color: var(--primary);
        font-family: var(--roboto-family);
    }

}