* {
    margin: 0;
    padding: 0;
    font-family: 'Ubuntu', sans-serif;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
    width: 85%;
    /* height: 90%; */
    position: relative;
    top: 50%;
    left: 50%;
    /* float: right; */

}

.hero {
    width: 100%;
    height: 100%;
    /* background: linear-gradient(45deg, #6ac1c5, #bda5ff); */
    position: relative;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */

}
 #calendar1{
    width: 99%; 
    max-height: 550px;

    position: absolute;
    float: left;

} 
#calendar2{
    width: 99%;
    max-height: 530px;
    position: absolute;
    
    float: right;

}  
.midnight-blue tr.calendar-header  {
    background: black;
   }
.midnight-blue tr.calendar-body  {
 background: black;
}
.midnight-blue tr.calendar-body .calendar-day .day {
    border-width: 2px;
    border-radius: 0;
    /* color: #fff; */
}