#staticEventCalendar {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
}

#staticEventCalendar .calendar {
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    list-style: none;
    margin: 0;
    outline: none;
    padding: 0;
    background-color: #eeeeee;
    border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
    height: 501px;
    perspective: 1000;
    transition: .9s;
    transform-style: preserve-3d;
    width: 100%;

    * {
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
        list-style: none;
        margin: 0;
        outline: none;
        padding: 0;
    }

    a {
        text-decoration: none;
    }

    /* Front - Calendar */
    .front {
        transform: rotateY(0deg);
    }

    .display-date {
        border-bottom: 1px solid rgba(73, 114, 133, .6);
        display: flex;
        justify-content: space-between;
        padding: 30px 40px;
        background-color: #8cc63f;
    }

    .display-date h1 {
        color: #263910;
        font-size: 1.4em;
        font-weight: 300;
    }

    .week-days {
        color: #263910;
        display: flex;
        justify-content: space-between;
        font-weight: 600;
        padding: 30px 40px;
    }

    .days {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .weeks {
        color: #263910;
        display: flex;
        flex-direction: column;
        padding: 0 40px;
    }

    .weeks div {
        display: flex;
        font-size: 1.2em;
        font-weight: 300;
        justify-content: space-between;
        margin-bottom: 20px;
        width: 100%;
    }

    .last-month {
        opacity: .3;
    }

    .weeks span {
        padding: 10px;
    }

    .weeks span.active {
        background: #f78536;
        border-radius: 50%;
    }

    .weeks span.event:hover {
        cursor: pointer;
        font-weight: 600;
    }

    .event {
        position: relative;
    }

    .event:after {
        content: '•';
        color: #f78536;
        font-size: 1.4em;
        position: absolute;
        right: -4px;
        top: -4px;
    }

    /* Back - Event form */

    .back {
        height: 100%;
        display: none;
    }

    .back h1 {
        background: none;
        border: none;
        border-bottom: 1px solid rgba(73, 114, 133, .6);
        color: #263910;
        font-size: 1.4em;
        font-weight: 300;
        padding: 30px 40px;
        width: 100%;
    }

    #eventTitle {
        background-color: #8cc63f;
    }

    .info {
        color: #263910;
        background-color: #eeeeee;
        display: flex;
        flex-direction: column;
        font-weight: 600;
        font-size: 1.2em;
        padding: 30px 40px;
    }

    .info>div:not(#info-notes) {
        margin-bottom: 40px;
    }

    .info span {
        font-weight: 300;
    }

    .info #dateAndTime {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .info #info-date {
        width: 100%;
        margin-bottom: 0.5em;
    }

    .info #info-address,
    .info #info-room {
        width: 100%;
    }

    .info #info-address {
        margin-bottom: 0.5em;
    }

    .actions {
        bottom: 0;
        border-top: 1px solid rgba(73, 114, 133, .6);
        display: flex;
        justify-content: right;
        position: absolute;
        width: 100%;
    }

    .actions button {
        background: none;
        border: 0;
        color: #263910;
        font-weight: 600;
        letter-spacing: 3px;
        margin: 0;
        padding: 30px 0;
        text-transform: uppercase;
        width: 50%;
    }

    .actions button:first-of-type {
        border-right: 1px solid rgba(73, 114, 133, .6);
    }

    .actions button:hover {
        background: #8cc63f;
        cursor: pointer;
    }

    .actions button:active {
        background: #8cc63f;
        outline: none;
    }
}

@media screen and (max-width: 679px){
    #staticEventCalendar {
        display: none;
    }
}

@media (prefers-color-scheme: dark) {
    #staticEventCalendar .calendar {
        background-color: #595959;

        .info {
            background-color: #595959;
        }

        .display-date, #eventTitle {
            background-color: #404040;
        }

        .actions button:hover {
            background-color: #C36900;
        }

        .display-date h1, .week-days, .weeks, .back h1, .info, .actions button {
            color: #FBEADA
        }

        a:hover {
            color: #C36900;
        }
    }
}