html{
    height: 100%;
    font-family: Roboto;
    font-size:10px;
}

body{
 height: 100%;
 display: flex;
}

.container {
  max-width: 100%;
}

.header{
height:20%
}

.cond_line{
text-align: center;
color: #605858;
margin-top: 5px;
font-weight: 500;
}

.cond_line.second{
margin-top: -3px;
}

.cond_line.third{
margin-top: -2px;
font-size: 8px;
}

.logo{
text-align: center;
align-self:center;
}

.logo img {
width: 80%;
margin-bottom: 10px;
}

.content{
height:70%
}

.footer{
height:10%
}

.link{
text-align:center;
}

.link a{
color: #3538ac;
font-weight: 500;
font-size: 7px;
}

.contact{
color: #3538ac;
font-size: 7px;
margin-top: -5px;
font-weight: 500;
}

.updated_since{
font-weight: bold;
font-size: 6px;
color: #ffffff;
align-self:center;
margin-left: -10px;
}

.widget{
text-align: center;
color: #015d94;
}

.widget i{
color:#f68406;
margin-top: 10px;
font-size: 25px;
}

.value1{
font-weight: 500;
font-size: 8px;
}

.value1 b{
font-size: 20px;
}

.value2 b{
font-size: 20px;
}

.value_type{
font-style: italic;
font-weight: 400;
margin-top: -8px;
}

.grey {
background-color: #f7f7f7;
}

.wind_direction{
color: #015d94;
font-style: italic;
font-weight: 800;
font-size: 20px;
}

.wind_direction i{
color: #015d94;
}

.previous-button{
position: absolute;
left: 5%;
top: 50%;
z-index: 1;
margin-left: -8px;
opacity:0.5;
}

.control-button{
position: absolute;
left: 50%;
top: 80%;
z-index: 1;
margin-left: -8px;
opacity:0.5;
}

.next-button{
position: absolute;
left: 95%;
top: 50%;
z-index: 1;
margin-left: -8px;
opacity:0.5;
}