.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: column wrap;

    align-items: center;
    justify-content: center;
}

body{
    background-color: black;
    color: white;
    /* font-family: 'Sofia'; */
}

.monthPre{
    color: gray;
    text-align: center;
}
.monthNow{
    color: #555555;
    text-align: center;
}
.dayNow{
    border:0.2em solid #e42355;
    color: #e42355;
    text-align: center;
}
.calendarHead {
    background-color:#4ecdc4;
    color: white;
    font-size: 50px;
}

.calendarHead #todayDate{
    font-size: 180px;
    /* padding: 1px 8px; */
}

.calendar {
    background-color:#f5f5f5;
    font-size: 20px;
    color: #555555;
    font-weight: bold;
}

.calendar, .calendarHead {
    width: 400px;
    height: 400px;
    margin-block-end: 0px;
    margin-block-start: 0px;
}
.calendar td{
    /* htmlContent: 2px; */
    width: 40px;
    border-radius:100%;

}
.monthNow th{
    /* background-color: #000000; */
    color: #249991;
    font-size: 40px;
    text-align: center;
}
.dayNames{
    /* background: #0FF000; */
    color: #e42355;
    text-align: center;
}