* {
box-sizing: border-box;
}

body {
font-family: Arial;
padding: 10px;
background-color: #f1f1f1;
}


/* Navigation */

nav {
overflow: hidden;
background-color: #333;
}

nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

nav a:hover {
background-color: #ddd;
color: black;
}


/* Main Content */

main {

background-color: white;
padding: 20px;
margin-top: 20px;

text-align:center;

}


/* Footer */

footer {

background-color: #ddd;
padding: 20px;
text-align: center;
margin-top: 20px;

}


/* Tablet */

@media screen and (max-width: 800px) {

main {
width: 100%;
padding: 10px;
}

}


/* Mobile */

@media screen and (max-width: 400px) {

nav a {
float: none;
width: 100%;
}

}