body{
    background-image: linear-gradient(#343446,#606081);
    font-family: 'Trebuchet MS', sans-serif;
    font-size: large;
}

header{
    position: sticky;
    top: 0;
    background-color: #606081;
    padding: 15px;
    text-align: center;
    margin: -8px;
}

footer{
    bottom: 0;
    background-color: #46465e;
    padding: 15px;
    text-align: center;
    margin: -8px;
}

.main{
    border-radius: 10px;
    max-width: 1500px;
    margin: 20px auto;
    background: #576565;
    padding: 20px;
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.logo{
    background: white;
    padding: 5px;
    border-radius: 5px;
    float: left;
    border-style: solid;
    border-width: 2px;
}

.nav{ 
    background: #47475f;
    border-radius: 10px;
    padding: 20px;
}

/* The Page items*/
.nav a{
    color: white;
    text-align: center;
    padding: 20px;
    text-decoration: none;
    border-radius:10px;
    font-size: 17px;
}


/* When the curser is hovering over it*/
.nav a:hover{
    background-color: white;
    color: black;
}

/* I cant tell if i want the page to shine when i hover over the page its on.

When you on the selected page */

.nav a.active{
    background-color: #242430;
    color: white;
}

#weather {
    margin : 13px;
    padding: 25px;
    width: 100px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.curveBorder,table,th,td{
    background: #728686;
    border-radius: 5px;
    border: 1px solid black;
}
.headline{
    height:2px;
    border-width:0;
    color:black;
    background-color:black
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}