html, body { margin:0; padding:0; overflow:hidden }
#screen { 
    background: url("/assets/aqls-sky.svg");
    background-size: cover;
    position:fixed; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%;
}

#content {
    position: relative;
    width: 85%;
    left: 12%;
    top: 2%;

}
#current-aq {
    position: relative;
    width: inherit;
    left: 4%;
    margin-bottom: 40%;

}
#current-weather {
    position: relative;
    width: inherit;

}

h1 {
    font-family: Lato, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 4vw;
    letter-spacing: normal;
    margin-top: 0%;
    margin-bottom: 3%;
    display: inline-block;
}

h2 {
    font-family: Lato, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 2.5vw;
    margin-bottom: 0;
    margin-top: 8px;


}

h3  {
    font-family: Lato, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 1.5vw;
    margin-bottom: 0;
    margin-top: 0;
}
p {
    font-family: Lato, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.2vw;
    margin: 1px;
}

hr {
    border-top: 2px solid black;
}

.weather {
    width: 23%;
    clear: both;
    display: inline-block;
    text-align: center;

}

.weather > p:first-child {

    font-family: Lato, Helvetica, sans-serif;
    font-size: 2vw;
    font-weight: 700;
    margin-bottom: 5px;
}

.data {
    font-family: Lato, Helvetica, sans-serif;
    font-size: 2vw;
    font-weight: 700;
    margin-bottom: 5px;
}

.label {
    font-family: Lato, Helvetica, sans-serif;
    font-weight: 600;
}

#update-area {
    position: relative;
    width: 100%;

}
#aq-update {
    display: inline-block;
    width: 84%;
}
#bee {
    margin-left:1.5rem;
    width: 12%;
    vertical-align: bottom;
    animation-name: ckw;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    display: inline-block;
}
#processing {
    display: inline-block;

}

#dial-area {

    width: inherit;
    position: absolute;
    left: 3%;
    margin-top: 3.5%;
}
.dial-pointer {
    width: 68%;
    position: absolute;
    top: 13.4%;
    left: 16.4%;
    transform: rotate(30deg);
}
.dial-message {
    font-family: Lato, Helvetica, sans-serif;
    color: white;
    font-weight: 600;
    font-size: 2vw;
    position: absolute;
    width: 6.5em;
    top: 64%;
    left: 28%;
}

#ozone {
    position: relative;
    display: inline-block;
    width: 43%;
    text-align: center;
}

#pm {
    position: relative;
    display: inline-block;
    width: 43%;
    text-align: center;
    left: 16%;
}

#ozone-cast {

    font-family: Lato, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 3vw;
    position: absolute;
    width: 20%;
    top: 38%;
    left: 40%;
}

#pm-cast {
    font-family: Lato, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 3vw;
    position: absolute;
    width: 20%;
    top: 38%;
    left: 40%;
}

/* #weather-area {

    position: fixed;
    bottom: 1em;
    width: 76%;

} */

#temp {
    margin-left: -1vw;
    margin-right: 2vw;
}

#winddirection {

    margin-left: 2vw;
    margin-right: -2vw;
}

img.divider { 

    height: 3.5vw;
}


@keyframes ckw {
   

    0% {
        transform: translate(0px,0px);
    }
    10% {
        transform: rotate(2deg);
    }
    20% {
        transform: translate(1px,0px);
    }
    30% {
        transform: translate(-1px,0px);
    }
    40% {
        transform: translateY(2px);
    }
    50% {
        transform: translate(-1px,0px);
    }
    60% {
        transform: translate(-1px,0px);
    }
    70% {
        transform: rotate(-3deg);
    }
    80% {
        transform: translate(1px,0px);
    }
    90% {
        transform: translateY(-2px);
    }
    100% {
        transform: translate(0px,0px);
    }

}
    
    .loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;  
    animation: ellipsis steps(4,end) 2000ms infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
    width: 0px;
    }

    @keyframes ellipsis {
    to {
        width: 20px;    
    }
    }

    @-webkit-keyframes ellipsis {
    to {
        width: 20px;    
    }
}