a {
    text-decoration: none;
}

h1.index {
    width: 100%;
    text-align: center;
}

h2 {
    font-size: 14pt;
    margin: 0.2em;
}

.yellow {
    background-color: #FFEE00;
}

span.red {
    color: #FF0000;
}

span.green {
    color: #66AA22;
}

span.blue {
    color: #66CCFF;
}

body {
    background-color: #F0F0F0;
    display: flex;
    flex-flow: column;
    font-family: Roboto, 'Segoe UI', Tahoma, sans-serif;
    height: 95vh;
    margin: 0;
}

div.months {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

div.months a {
    display: block;
    width: 200px;
    border: 1px solid red;
    text-align: center;
    padding: 1em;
}

div.header {
    flex-basis: 70px;
    text-align: center;
    display: flex;
    justify-content: space-between;
}

div.header h1 {
    font-size: 14pt;
    margin: 0.5em;
}

div.body {
    flex-grow: 1;
    display: flex;
}

div.body div.feedback {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin: 0 5px;
    border-left: 3px solid #FF0000;
    border-right: 3px solid #FF0000;
}

div.body div.blue {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin: 0 5px;
    border-left: 3px solid #66CCFF;
    border-right: 3px solid #66CCFF;
}

div.body div.feedback div.rotation {
    font-size: 12pt;
    font-weight: bold;
    margin: 0;
    padding: 0;
    width: 1em;
    transform: rotate(-90deg);
    text-align: center;
}

div.body div.feedback div.rotation div {
    width: 70vh;
    position: absolute;
    left: -35vh;
    top: -0.6em;
}

div.body div.left {
    flex-basis: 30%;
    flex-shrink: 0;
    max-width: 400px;
    display: flex;
    align-items: center;
}

div.body div.left table.excel {
    flex-grow: 1;
    width: 100%;
    border: 1px solid black;
}

div.body div.left table.excel td {
    border: 1px solid black;
    text-align: center;
    padding: 2px;
    font-size: 8pt;   
}

div.body div.left table.excel td.first {
    width: 1em;
    font-size: 10pt;   
    font-weight: bold;
}

div.body div.left table.excel td.second {
    font-size: 8pt;   
    font-weight: bold;
}

div.body div.left table.excel td.third {
    font-size: 8pt;   
    font-weight: bold;
    text-align: left;
}

div.body div.left table.excel tr.blind td {
    border: 0;
    height: 0.5em;
}

div.body div.left table.excel tr.yellow td {
    background-color: #FFEE00
}

div.body div.left table.excel tr.blue td {
    background-color: #66CCFF
}

div.body div.left table.excel tr.bold td {
    font-weight: bold;
}


@media only screen and (max-height: 719px) {
    div.body div.left table.excel td table.list td {
        font-size: 3pt;
    }
}

@media only screen and (min-height: 720px) and (max-height: 819px) {
    div.body div.left table.excel td table.list td {
        font-size: 4pt;
    }
}

@media only screen and (min-height: 820px) and (max-height: 939px) {
    div.body div.left table.excel td table.list td {
        font-size: 5pt;
    }
}

@media only screen and (min-height: 940px) and (max-height: 989px)  {
    div.body div.left table.excel td table.list td {
        font-size: 6pt;
    }
}

@media only screen and (min-height: 990px) and (max-height: 1119px) {
    div.body div.left table.excel td table.list td {
        font-size: 7pt;
    }
}

@media only screen and (min-height: 1120px){
    div.body div.left table.excel td table.list td {
        font-size: 8pt;
    }
}

div.body div.left table.excel td table.list td {
    border: 0;
    padding: 0 0.5em;
    margin: 0;
    text-align: left;
}

div.body div.left table.excel td table.list td.right {
    text-align: right;
}

div.body div.left table.excel td table.list td.center {
    text-align: center;
}

@media only screen and (max-height: 699px) {
    div.body div.left table.excel tr.euro td {
        font-size: 4pt;
    }
}

@media only screen and (min-height: 700px) and (max-height: 749px) {
    div.body div.left table.excel tr.euro td {
        font-size: 5pt;
    }
}

@media only screen and (min-height: 750px) {
    div.body div.left table.excel tr.euro td {
        font-size: 6pt;
    }
}

div.body div.left table.excel tr.euro td {
    text-align: left;
}

div.body div.left table.excel tr.euro td.first {
    font-size: 10pt;
}

div.body div.left table.excel tr.euro td.center {
    text-align: center;
}

@media only screen and (max-height: 874px) {
    div.body div.right {
        font-size: 8pt;
    }
}

@media only screen and (min-height: 875px) and (max-height: 999px) {
    div.body div.right {
        font-size: 10pt;
    }
}

@media only screen and (min-height: 1000px) {
    div.body div.right {
        font-size: 12pt;
    }
}

div.body div.right {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-flow: column;
    align-items: left;
    justify-content: space-between;
}

div.body div.right div {
    padding: 1em;
}

div.body div.right div.hint h1 {
    font-size: 125%;
    font-weight: bold;
    color: #FF0000;
}

div.body div.right div.hint h1.blue {
    color: #66CCFF;
}

div.body div.right div.hint > ul {
    list-style-type: decimal;
    padding-left: 1em;
}

div.body div.right div.hint > ul li ul{
    list-style-type: dotted;
    padding-left: 2em;
}

div.body div.right div.disclaimer p {
    margin: 0;
    font-style: italic;
}

div.body div.right div.disclaimer p.bold {
    font-weight: bold;
}

div.body div.right div.image {
    text-align: center;
}

div.body div.right div.image img {
    width: 90%
}