#header{
    background-color: #1a395c;
    padding: 20px;
    text-align: center;
    color: #f6a346; 
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    margin: 1% 2% 1% 10%;
    border-radius: 10px;
    text-shadow: 2px 2px 5px #C60270;
}

/*horizontal navigation*/

#topNav{
    overflow: auto;
    background-color: #333;
    margin: 0% 2% 1% 10%;
    border-radius: 10px;
}

#topNav a{
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}

#topNav a:hover{
    background-color: #ddd;
    color: #000000;
}

/*Main content*/
.columns{
    float:left;
    padding: 15px;
    
}

.columns.main{
    width: 50%;
    margin: 0% 2% 1% 10%;
    box-shadow: 10px 10px 10px 10px black;
}

.columns.side{
    width: 25%;
    margin: 0% 2% 1% 3%;
    box-shadow: 10px 10px 10px red;
}

#rows::after{
    content: "";
    display: table;
    clear: both;
}

.columns h2{
    text-align: center;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}


.columns p{
    font-family: Arial, Helvetica, sans-serif;
}

@media screen and (max-width:600px) {
    .columns.side .columns.main{
        width: 100%;
    }
}

/*Footer*/

#footer{
    background-image: linear-gradient(to bottom right, #0038A8, #C60270);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    color:#f6a346;
    padding: 15px;
    margin: 0% 0% 1% 10%;
    position: fixed;
    bottom: 0;
    width: 85%;
    
}