*{
box-sizing: border-box;
margin: 0;
font-family: sans-serif;
}
html, body{
height: 100%;
header{
background: #16a085;
color: #ecf0f1;
height: 100px;
text-align:center;
line-height: 100px;
header h1 img{
height: 70px;
width: auto;
vertical-align: middle;
nav{
display: inline-block;
height: calc(100% - 150px);
width: 200px;
vertical-align:top;
background-color: #34495e;
color: #D0D0D0;
padding: 15px;
nav ul{
list-style-type: none;
padding: 0;
section{
width: calc(100% - 200px);
background-color: #2c3e50;
vertical-align:middle;
overflow: auto;
footer{
background-color: #16a085;
text-align : center;
height: 50px;
line-height: 50px;
nav .logo img{
width: 50%;
height: auto;
#yellow:hover{
fill: #f6b93b;
#blue:hover{
fill: #1e3799;
#red:hover{
fill: #eb2f06;
nav li{
transition: 0.3s;
line-height: 1.5em;
nav li:hover{
background-color: rgba(255, 255, 255, 0.3);
.logo{
text-align: center;
section rect, section circle{
fill: #D0D0D0;
a{
color: #C0C0C0;