#main {
    display: flex;
    flex-direction: row;
    background-color: #191b1aff;
}

#sidebar {
    width: 20%;
    background-color:#2d3130;
}

#nav-box-pad {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
}

#nav-box{
    display:flex;
    flex-direction: column;
}

#nav-box h4 {
    padding: 5% 15%;
    height: 70px;
    background-color:#0097a7;
    margin:0;
}

#nav-box > a {
    color: aliceblue;
    text-decoration: none;
    padding: 5% 15%;
}

#nav-box > a:hover {
    background-color:#00000025;
}

#content {
    padding:2%;
    width: 80%;
    margin-left: 1%;
}

#content > div {
    margin-bottom: 2%;
}

.events {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1%;
}

#eventsToggle {
    background-color: rgb(17, 17, 17);
    color: rgb(255, 255, 255);
    border: 0px;
}

#eventsToggle:hover {
    background-color: rgb(31, 31, 31);
    color: rgb(255, 255, 255);
    border: 0px;
}

.event {
    display: flex;
    flex-direction: row;
    padding: 2%;
    width: 45%;
    margin: 1%;
    background-color: rgb(27, 27, 27);
    cursor: pointer;
    border: solid 4px rgb(0, 151, 167); 
    clip-path: polygon( 
        calc(0% + 5px) calc(0% + 5px), 
        calc(100% - 5px) calc(0% + 5px), 
        calc(100% - 5px) calc(100% - 5px), 
        calc(0% + 5px) calc(100% - 5px) 
    );
    transition: clip-path 0.2s linear;
}

.event:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    background-color: #211e1e;
}

.event-image {
    margin-right: 3%;
    width: 15vh;
    height: 15vh;
    align-self: center;
}

.event-text {
    font-size: 115%;
    align-self: center;
}

.event-description {
    margin: 1%;
}

#past-competitions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 2%;
}

.past-competition {
    padding: 1.2%;
    border: 3px solid white;
}

.past-competition > * {
    margin: 1%;
}

.past-competition-link {
    color: white;
    cursor: pointer;
}

.past-competition-link:hover {
    color: #18C0C9;
}

#calendar-display-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#calendar-display-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 1%;
}

#calendar-list-container {
    display: flex;
    flex-direction: column;
    width: 40%;
    margin-left: 1%;
    margin-right: 1%;
    background-color: #2d3130;
}

#calendar-list-header {
    height: 15%;
    padding-top: 6%;
    text-align: center;
    background-color: #1b1b1b;
}

#calendar-list {
    display: flex;
    flex-direction: column;
    padding: 1% 3% 1% 3.2%;
}

.calendar-list-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2% 1% 0% 1%;
    margin: 1% 0% 2% 0%;
    background-color: darkslategray;
}

.calendar-list-item-image {
    width: 3vw;
    height: 3vw;
}

.calendar-list-item-text {
    margin-left: 1%;
}

.calendar-list-item-description {
    font-size: 0.92vw;
}

#calendar-view {
    display: flex;
    flex-direction: column;
    width: 70%;
}

#calendar-navigation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 1%;
    padding: 1% 2% 0.5% 3%;
}

#month-navigation {
    display: flex;
    flex-direction: row;
    text-align: center;
}

#month-navigation > button {
    width: 4vw;
    margin: 0% 3%;
    border: none;
    outline: none;
    font-size: 1.5vw;
    background-color: #2d3130;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#month-navigation > button:hover {
    background-color: #282b28;
}

#calendar-table-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#calendar-table {
    width: 100%;
    margin-left: 2%;
    margin-right: 1%;
    table-layout: fixed;
}

th {
    border: 1px solid white;
    padding: 1%;
    text-align: center;
}

tr > td {
    border: 1px solid white;
    padding: 1% 2% 10% 10%;
    text-align: right;
}
  
@media only screen and (max-width:1218px) {
    #calendar-container {
        display: none;
    }
    #sidebar {
        display: none;
    }

    #content {
        width: 100%;
    }

    .event {
        display: flow-root;
        text-align: center;
    }

    #calendar-container {
        zoom: 50%;
    }

    .list-item-title {
        zoom: 150%;
    }

    .list-item-description {
        zoom: 250%;
    }

    #month-navigation {
        zoom: 200%;
        width: 300px;
        height: 50px;
    }

    #calendar-date {
        zoom: 200%;
    }

    #calendar-list-header {
        zoom: 150%;
    }
}

#main h1 {
    color: #0097A7;
}