/*Table of Contents

1. Imports 
2. General
    2a.Navigation
    2b.ul formating
    2c.colors
    2d.image and fonts
    2e.links
    2f.header
3. Moble Rules
    3a.fomating
    3b.borders
    3c.navigation format
4. Large Screen Rules
    4a. box rows
    4b. navigation
    4c. font size 

*/

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

/* 2. General */
body {
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    margin-bottom: 90px;
}
h1,h2,h3,h4,h5,h6 {
    font-family: Sansita, sans-serif;
}
/* 2a.Nagigation */
nav{
    background-color: #0e89d5;
    height: 80px;
    color: white;
    text-align: center;
}
/* 2b.ul formating */
ul{
    padding-left: 0;
}
li{
    display: inline;
}
/* 2c.colors */
footer {
    background-color: #0e89d5;
}
#hi{
    color: red;
}
#low{
    color: #0e89d5;
}
/* 2d.image and fonts */
/* #largeframe{
    background-image: url(/weather/franklinimages/rain.jpg);
} */
#temp{
    font-size: 3em;
}
#block{
    display: block;
}
/* 2e.links */
a:link, a:visited{
    color: #fff;
    text-decoration: none;
}
a:hover {
    color:#fff;
    text-decoration: underline;
}
/* 2f.header */
#header{
    background-color: #0e89d5;
    display: flex;
    align-items: center;
}

.n{
    transform: rotate(0deg);
}
.ne{
    transform: rotate(45deg);
}
.nw{
    transform: rotate(90deg);
}
.s{
    transform: rotate(135deg);
}
.se{
    transform: rotate(180deg);
}
.sw{
    transform: rotate(225deg);
}
.e{
    transform: rotate(270deg);
}
.w{
    transform: rotate(315deg);
}

/* 2bla. background images */

#largeframe {
    background-size: cover;
   }

   .hide{
    display: none;
  }

/* 3. Mobile Rules */
/* 3a.fomating */
#site-head{
    display: inline;
    font-size: 1.5em;
}
 #wind{
    position: absolute;
    left: 0;
    top: 30%;
    width: 100%;
    text-align: center;
}
#windspeed{
    position: relative;
} 

#dial {
    height: 150px;
    width: 150px;
    background: no-repeat center/85% url('/weather/franklinimages/wind-pointer.png');
    z-index: 100;
    margin: -.6em auto 0;
   }

/* 3b.borders */
.borders{
    border-radius: 25px;
    border: 2px solid black;
    padding: 20px;
    text-align: center;
    background-color: rgba(211, 211, 211, 0.8);
    flex: 1 1 auto;
}
#hour-forecast{
    background-color: rgb(211, 211, 211)!important;
}
#overflow{
    white-space: nowrap;
    overflow: auto;
}
#icon{
    background-size: cover;
    width: 200px;
    height: 200px;
    margin: auto;
}
#rainimg {
    width:200px;
}
/* 3c.navigation format */
#nav li{
    padding: 0 10px;
    white-space: nowrap;
}
#nav{
    display:flex;
    justify-content: space-evenly;
    padding-bottom: 10px;
    
}
nav{
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index:100;
}
/* 3d. font size */
#location {
    font-size: .6em;
    padding-left: 10px;
}

/* 3e. background pictures */
   
   /* Background pictures for summary */
   .clear {
    background-image: url("/weather/franklinimages/sl-images/clear-400.jpg");
   }
   .rain {
    background-image: url("/weather/franklinimages/sl-images/rain-400.jpg");
   }
   .cloud {
    background-image: url("/weather/franklinimages/sl-images/clouds-400.jpg");
   }
   .fog {
    background-image: url("/weather/franklinimages/sl-images/fog-400.jpg");
   }
   .snow {
    background-image: url("/weather/franklinimages/sl-images/snow-400.jpg");
   }

/* 4. Large Screen Rules */

@media only screen and (min-width: 600px) {
    /* 4a. box rows */
    #largeframe {
        display: flex;
        width: 100%;
        padding: 10px 0;
    }
    /*navigation*/
    nav{
        position: relative;
    }
    #nav {
        padding-bottom: 0px;
        padding-top: 30px;
        margin-top:0px;
    }
    /* 4c. font size */
    #location {
        font-size: 20px;
    }
    #site-head{
        font-size: 2.5em;
    }

    /* 4d. background images large */
    .clear {
        background-image: url("/weather/franklinimages/sl-images/clear-1200.jpg");
       }
       .rain {
        background-image: url("/weather/franklinimages/sl-images/rain-1200.jpg");
       }
       .cloud {
        background-image: url("/weather/franklinimages/sl-images/clouds-1200.jpg");
       }
       .fog {
        background-image: url("/weather/franklinimages/sl-images/fog-1200.jpg");
       }
       .snow {
        background-image: url("/weather/franklinimages/sl-images/snow-1200.jpg");
       }
}