* {
box-sizing: border-box;
}
body {
font-family: American, Typrewriter, serif;
}
/* Style the header */
header {
background-color: #3E424B;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
.sidenav {
height:100%;
width: 0;
/*height: 300px; only for demonstration, should be removed */
position:fixed;
z-index: 1;
top:0;
left:0;
background:#3E424B;
overflow-x:hidden;
transition: 0.6s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display:block;
transition:0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height : 450px) {
.sidenav {padding-top: 15pz;}
.sidenav a {font-size : 18px;}
}