body{
    font-family: "K2D",Arial, Helvetica, sans-serif;
    }
header{
    background-color: #3a4048;
    text-align: center;
    padding: 0.5rem;
    color:white;
    
}
header > img {
    width: 100px;
    height: auto;
    vertical-align: middle;
    
    }
.headertext {
    display:inline-block ;
    vertical-align: middle;
}
.headertext h1 {
    font-size: 1.5rem;
    margin-top: -5px ;

  /*----- Subheading-------------*/  
}
.subheading {
    font-size: 0.9rem;
    color: #ffc90c ;
    font-style: italic;
    margin-top:-20px ;
    
}
.currentweather{
    display: inline-block;
    margin: 1.1rem 0 1rem 10rem;
        padding: .5rem;
        vertical-align: middle;
        color:white;
        background-color: #3a4048;
        border: 1pt solid white;
        font-size: .9rem ;
        width: 140px;
        height: 70px;
        
}
.currentweather img {
    width: 70px;
    height: auto;
    float:left;
    
    
}

/*-----------Navigation bar----------------------------*/

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #d6d3d2;
    text-align: center;
}

li {
    display: inline-block;
}


li a {
    display: block;
    color: #3a4048;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #ffffff;
}



/*-----------Main section, preston image-------------*/
main,footer { 
    max-width: 80%;
    margin: auto;
    
    
}

h2 {
    text-align: center;
    padding: 20px;
}

.prestonimg {
    max-width: 100%;
    height: auto;
    position: relative;
    
    
    
}
.weathersummarybox {
   /*REFERENCE border: 3px solid purple;*/
    position: relative;
}

h3{
    color: #ffc90c;
}


.weathersummary{
    /*REFERENCE border: 3px solid red;*/
    background: rgba(128, 128, 128, 0.8);
    width: 220px;
    position: absolute;
    padding:20px ;
    top: 20px ;
    left: 20px;
    

}
/*.weatherdetails{ }*/

.label {
    color:#e4dd9e;
    margin: 0px !important;
    border: 0px !important;
    padding: 0px !important;
    text-align:left;
}

/* trick to remove paragraph spaces
display: block !improtant;
    margin: 0px !important;
    border: 0px !important;
    padding: 0px !important;
*/

.value {
    color:#ffffff;
    
    margin-top: -23px !important;
    border: 0px !important;
    padding: 0px !important;
    text-align:right;
}

/*----------Forecast------------------------*/

.forecast{
   
    background:#d6d3d2;
    text-align: center;
    color:#3a4048;
    position: relative;
    height: 120px;
    border: 3px solid #d6d3d2;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    
}

 h4{
    color: #3a4048;
    position: relative;
    bottom: 15px;
}
.table1{
    
    bottom: 30px;
    position: relative;
    width: 360px;
    background-color: #e4dd9e;

    /*display table centered*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    
    /*border: 3px solid purple;*/
}

 td {
     
    color:#ffc90c;
    border: 3px solid #3a4048;
    background-color: #3a4048;
    text-align: center;
}


/*--------------First article--------------------*/
article{
    background-color: #ffc90c;
    padding: 2rem;
    bottom: 30px;
    margin-top: 4px;
    text-align:justify;
    
    
    
    
}
article > img {
    width: 20%;
    float: right;
    margin-top: -40px;
    right: 250px;
    border: 3px solid #3a4048;
    position: absolute;
}

.first-article {
    
    width: 55%;
}
/*----------------Site-map ----------------------*/

.site-map{
   /* border: 3px solid purple;*/
    background-color: #e4dd9e;
    margin-top: 0.5rem;
    
}

.text-map{
    display:inline-block ;
    width: 30%;
    text-align: center;
    bottom: 3.5rem;
    position: relative;
    
   
    
}

section > img {
    width: 30%;
    height: auto;
    margin-top: 2.0rem;
    left: 900px;
    margin-left: 1.5rem;
    
}

footer{
    background-color: #3a4048;
    color: #ffffff;
}

footer > p {
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 3.5rem;
}