:root {
    --no-freq: gray;
    --low-freq: rgb(0, 240, 0);
    --medium-freq: orange;
    --high-freq: red;
    --square-len: 30px;
}

@font-face {
  font-family: 'GothamMedium';
  src: url('Gotham-Medium.otf') format("opentype"),
     url('Gotham-Medium.ttf')  format('truetype'),
     url('Gotham-Medium.svg#svgFontName') format('svg');
   font-style: normal;
 }

body {
    margin: 0;
    font-family: 'GothamMedium';
}

p {
    font-size: 16px;
}

.spanColorFreq {
    display: inline-block;
    background: var(--no-freq);
    width: var(--square-len);
    height: var(--square-len);
    margin-right: 5px;
}

.spanColorNoFreq {
    background: var(--no-freq);
}

.spanColorLowFreq {
    background: var(--low-freq);
}

.spanColorMediumFreq {
    background: var(--medium-freq);
}

.spanColorHighFreq {
    background: var(--high-freq);
}

#mainDiv {
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 1%;
    clear: both
}

#divLegende {
    width: auto;
    float: right;
}

.dateDiv {
    margin: 0;
    font-family: 'GothamMedium';
    font-size: 36px;
}

#divTextHeader {
    width: 50%;
    float: left;
}

.divTimeFrame {
    float: left;
    text-align: center;
    vertical-align: middle;
    width: 6%;
    margin-left: 1.16%;
    margin-right: 1.16%;
    height: 300px;
    font-size: 18px;
    font-weight: bold;
    position: relative;
}

.spanSvgArrow {
    position:absolute;
    width: 100%;
    height: 30px;
    top: -15px;
}

.spanRectTimeFrame {
    display: inline-block;
    height:100%;
    width: 100%;
}

.spanHour {
    display: inline-block;
    height: 100%;
}

.svgTimeFrameLowRes {
    display: none;
}

@media (max-width: 768px) {

    p {
        margin: 0;
        line-height: 30px;
    }
    
    #divLegende {
        float:none;
    }

    #divTextHeader {
        width:100%;
    }
    
    .dateDiv {
        font-size: 25px;
    }
    
    #divTextHeader::after {
        clear:both;
    }

    .divTimeFrame {
        width: 100%;
        height: 30px;
        margin-left: 0%;
        margin-right: 0%;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .divTimeFrame::after {
        clear: both;
    }

    .spanRectTimeFrame {
        width: 70%;
        height:30px;
        margin-left: 0%;
        float: left;
    }

    .spanSvgArrow {
        position: absolute;
        top:0px;
        left:-16px;
    }

    .svgTimeFrameLowRes {
        display: block;
    }

    .svgTimeFrameHighRes {
        display: none;
    }

}