/* This is the stylesheet for the Weather Site */

/*Table of contents:
    1. Imports
    2. General Rules
    3. Mobile First Rules
    4. Larger Screen Rules*/

/* Section 1 - Imports */
@import url('https://fonts.googleapis.com/css?family=Sansita');
@import url('normalize.css');


/* Section 2 - General Rules */
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

.tile {
    background-color: rgba(200, 200, 200, .6);
    margin: .2em auto;
    border: 1px solid;
    border-radius: 15px;
}

header {
    background-color: #0e89d5;
    padding: 3px;
    padding-bottom: 2px;
    width: 100%;
    margin-top: 0px;
}

#pageHeader {
    display: flex;
    justify-content: flex-start;
}

#logo {
    width: 70px;
    float: left;
    margin-right: 5px;
    margin-top: 0px;
}

#siteBrand {
    font-size: 45px;
    position: relative;
}

#siteBrand h1 {
    font-family: 'Sansita', sans-serif;
}

h1 {
    margin-top: 0;
    font-family: 'Sansita', sans-serif;
}

h2{
    font-family: 'Sansita', sans-serif;
    font-size: 40px;
}

h3,
h4,
h5,
h6 {
    font-family: 'Sansita', sans-serif;
    padding: 10px;
    margin: 0;
}

nav {
    background-color: #0e89d5;
    width: 100%;
    bottom: 0;
    left: 0;
}

nav ul {
    display: flex;
    justify-content: space-around;
}

nav ul li {
    display: inline-block;
    list-style: none;
    margin-right: 5px;
    padding: 0px;
}

nav ul li a {
    text-decoration: none;
    color: white;
}

#pageContent ul {
    display: flex;
}

#locInfo {
    list-style: none;
    padding-left: 10px;
    font-size: 15px;
}

#locName {
    padding-left: 10px;
}

body {
    font-size: 20px;
    font-family: Helvetica, sans-serif, Arial;
}

#currentTemp {
    font-size: 80px;
    margin: 10px;
}

.hc {
    display: inline;
    margin-left: 5px;
}

#hot {
    color: red;
}

#cold {
    color: blue;
}

#dial {
    height: 150px;
    width: 150px;
    background: no-repeat center/85% url("/wsp_hw/weather/images/wind-pointer.png");
    z-index: 100;
    margin: -.6em auto 0;
}
/* Wind direction rules */
.n{
    transform: rotate(0deg);
}

.ne{
    transform: rotate(45deg);
}

.e{
    transform: rotate(90deg);
}

.se{
    transform: rotate(135deg);
}

.s{
    transform: rotate(180deg);
}

.sw{
    transform: rotate(225deg);
}

.w{
    transform: rotate(270deg);
}

.nw{
    transform: rotate(315deg);
}

#curWeather {
    background-size: cover;
    text-align: center;
}

#curTemp{
    font-size: 80px;
    margin: 15px;
}

footer {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 67px;
    background-color: #0e89d5;
    color: black;
}

#hourly h2 {
    text-align: center;
}

#hourly h3 {
    text-align: center;
}

#hourly ul {
    overflow: auto;
    overflow: scroll;
    margin-top: 0px;
    white-space: nowrap;
    padding-left: 5px;
    display: flex;
    flex-direction: row;
    list-style: none;
}

#hourly ul li {
    padding: 3px;
}

nav {
    position: fixed;
}

#wind {
    position: relative;
}

img{
    max-width: 100%;
}

#weatherImage{
    height:200px;
    width: 300px;
    margin: -.6em auto 0;
    margin-top: 10px;
    margin-bottom: 15px;
    background-size: cover;
}

.hide{
    display: none;
}

#gusts{
    display: inline;
}
/* Section 3: Mobile first rules */


#windSpeed {
    font-size: 25px;
    margin-top: -90px;
    margin-bottom: 70px;
}

/* summary image rules for smaller screens*/
@media screen and (max-width: 799px){
.clear{
    background-image: url("/wsp_hw/weather/images/clear-new.jpg");
}

.rainy{
    background-image: url("/wsp_hw/weather/images/rain-new.jpg");
}

.cloudy{
    background-image: url("/wsp_hw/weather/images/clouds-new.jpg");
}

.snow{
    background-image: url("/wsp_hw/weather/images/snow-new.jpg");
}

.fog{
    background-image: url("/wsp_hw//weather/images/fog-new.jpg");
}
}
/*Section 4: Larger Screen rules*/
@media screen and (min-width: 800px) {

    /* css for large screens goes here */
    #curWeather {
        display: flex;
        flex-direction: row;
        background-size: cover;
    }

    .tile {
        flex-grow: 1;
    }

    nav {
        position: static;
    }

    nav ul {
        margin: 0;
        padding-bottom: 5px;
    }

    footer {
        margin-bottom: 0;
        padding: 5px;
    }

    .clear{
        background-image: url("/wsp_hw/weather/images/clear.jpg");
    }
    
    .rainy{
        background-image: url("/wsp_hw/weather/images/rain.jpg");
    }
    
    .cloudy{
        background-image: url("/wsp_hw/weather/images/clouds.jpg");
    }
    
    .snow{
        background-image: url("/wsp_hw/weather/images/snow.jpg");
    }
    
    .fog{
        background-image: url("/wsp_hw//weather/images/fog.jpg");
    }
}