a {
    color:#7b7dc4;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

body {
    font-weight:bold;
    font-family: 'Lato', sans-serif;
    font-size:5vmin;
    display:block;  
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    margin: 0;
    position:relative;
    background-image: url(../images/lightning-dark.png);

}


div {
    text-align:center;
    color:#7b7dc4;
    /*background-color:rgba(255, 255,2550, 0.25);*/
    box-sizing: border-box;
}

div.block {
    padding-top:0;
}

#front_loop {
    top:0;
    padding:0;
}

/* Top Section */

#title-div {
    width:33vw;
    height:40%;
    text-align:center;
    /*background:rgba(0,0,0,0.6);*/
    vertical-align:middle;            
    font-size:0.6em;
    float:left;
}

#title-logo {
    height:25%;
    width:100%;
    float:none;
    display:flex;
    justify-content:center;
}

#title-description {
    float:none;
}

#logo {
    height:100%;
    vertical-align:middle;
}

div.current_conditions {
    float:left;
    display:table;
    width:25vw;
    height:40vh;
    margin-left:0vw;
    margin-top:0vh;
    /*background-color:rgba(0, 0,0, 0.6);*/

}

div.live-stream {
    height:40%;
    width:40vw;
    object-fit:fill;
    position:absolute;
    top:0vh;
    right:0vw;
}

div.title-lapses {
    width :100vw;
    /*background-color:rgba(0, 0,0, 0.6);*/
    top:40vh;
    height:10vh;
    bottom:unset;
    position:absolute;
}

div.lapses {
    top:45vh;
    width:100vw;
    height:36vh;
    position:absolute;
}

.garage-b {
    position:absolute;
    left:0vw;
    width:33vw;
    height:36vh;
    object-fit:fill;
}

.driveway-a {
    left:33vw;
    width:33vw;
}


.loop-video {
    width:100%;
    height:100%;
    right:0vw;
    position:absolute;
    object-fit:fill;
}

.loop-div {
    width: 33%;
    height: 35vh;
    position: absolute;
    object-fit: fill;
    top: 46vh;
}


div.radar-div {
    width: 34%;
    height: 35vh;
    right: 0vw;
    top: 46vh;
    position: absolute;
    object-fit: fill;
}

img.loop-radar {
    width:100%;
    height:100%;
} 

div img {
    float:left;
}

div.title-24h {
    width :98vw;
    top:80vh;
    height:10vh;
    bottom:unset;
    position:absolute;
}

div.graphs_24h {
    float:left;
    display:table;
    width:100vw;
    /*background-color:rgba(0, 0,0, 0.6);*/
    height:65vh;
    height:unset;
    bottom:unset;
    position:unset;
}

div.block_chart {
    width:24vw;
    top:88vh;
    position:absolute;  
}

div.chart_winddirection {
    left:0vw;
}

div.chart_windspeed {
    left:25vw;
    
}

div.chart_temperature {
    left:50vw;
    
}

div.chart_humidity {
    left:75vw;
    
}


div.forecast-title {

    display:table;
    width:98vw;
    height:65vh;
    height:unset;
    bottom:unset;
    position:absolute;
    top:112vh
}

div.forecast {
    display:table;
    /*background-color:rgba(0, 0,0, 0.6);*/
    height:65vh;
    width:98vw;
    top:121vh;
    height:unset;
    bottom:unset;
    position:absolute;
}

div.cc_row {
    display:table-row;
}


div.cc_cell_title {
    display:table-cell;
    text-align:center;
    font-size:3vmin;
}

div.cc_cell_value {
    display:table-cell;
    text-align:center;
    font-size:5vmin;
}

div.cc_cell_space {
    display:table-cell;
    height:1vh;
}

span.unit {
    font-size:1vw;
}



div.updated {
    position:absolute;
    bottom:25vh;
}



.chart {
    position: relative;
    display: block;
    background-color: #dddddd;
    border-style: solid;
    border-color: 1;
    border-width: 1px;
    /*height: 25vh;*/
}



div.winddirection {
    bottom:70vh;
}

div.windspeed {
    bottom:47vh;
}

div.temperature {
    bottom:24vh;
}

div.humidity {
    bottom:1vh;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    body {
    }

    #title-div {
        width:100vw;
        height:unset;
        float:left;
        position:unset;
    }

    div.current_conditions {
        width:100vw;
        float:left;
        top:unset;
        position:unset;
    }

    #twitch-embed {
        width:100vw;
        height:25vh;
        float:left;
        position:unset;
    }


    div.title-lapses {
        width:100vw;
        float:left;
        position:unset;
    }

    .garage-b {
        width:100vw;
        height:unset;
        float:left;
        position:unset;
    }

    .driveway-a {
        width:100vw;
        height:unset;
        float:left;
        position:unset;
    }


    .loop-video {
        width:100vw;
        height:uset;
        float:left;
        position:unset;
    }

    .loop-div {
        width:100vw;
        height:unset    ;
        float:left;
        position:unset;
    }


    div.radar-div {
        width:100vw;
        height:unset;
        float:left;
        position:unset;
    }

    img.loop-radar {
        width:100%;
        height:100%;
    } 

    div.title-24h {
        width :100vw;
        top:unset;
        height:10vh;
        bottom:unset;
        position:unset;
        float:left;
    }

    div.chart {
        width:100vw;
        height:25vh;
        float:left;
        position:unset;
    }


    div.block_chart {
        width:100vw;
        height:unset;
        float:left;
        position:unset;
    }

    div.forecast-title {

        display:table;
        width:98vw;
        height:unset;
        bottom:unset;
        position:unset;
        top:unset;
        float:left;
    }

    div.forecast {
        width:100vw;
        height:25vh;
        float:left;
        position:unset;
    }

    div.winddirection, div.windspeed, div.temperature, div.humidity {
        width:100vw;
        height:25vh;
        float:left;
        position:unset;
    }

}