body {
    background-color: #eeeeee;
    font-family: Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
    font-size: 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Trebuchet MS", Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
    margin: 0.6em;
}

h1 {
    color: #454560;
    font-size: 130%;
    font-weight: bold;
}

h2 {
    color: #68687f;
    font-size: 115%;
    font-weight: 300;
    border: 2px solid #cccccc;
    border-width: 0px 0px 1px 0px;
    padding-bottom: 0px;
}

h3 {
    color: #707088;
    font-size: 80%;
    font-weight: bold;
    border: 1px solid #cccccc;
    border-width: 0px 0px 1px 0px;
    padding: 0 0 0 20px;
}
h4 {
    font-size: 80%;
    font-weight: 500;
}
img {
    margin: 5px;
}

.container {
    display: flex;
    flex-wrap: wrap;
}
.header, .each_calendar, .footer {
    padding:0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}
.footer {
    margin-top: 1.5em;
    font-size: 70%;
    font-weight: 400;
}
@media only screen and (max-width: 500px) {
    h1 {
        font-size: 6vw !important;
    }
    h2 {
        font-size: 5.5vw !important;
    }
    h4 {
        font-size: 4vw !important;
    }
    .footer {
        font-size: 2.7vw !important;
    }
    .highlight {
        border: 1px dashed black;
        border-radius: 3vw;
    }
}
@media only screen and (min-width: 501px) and (max-width: 768px) {
    .each_calendar {
        display:inline-table;
    }
    .highlight {
        border: 1px dashed black;
        border-radius: 2vw;
        display: compact;
    }
}
@media only screen and (max-width: 500px) {
    .each_calendar {
        display: inline;
    }
}

font {
    font-family: Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
}

a:link {
    color: black;
}

.bullet {
    margin: 0 10px 0 5px;
}

a img {
    border: 0;
}