body{
font-family: Arial,sans-serif;
magin: 0;
padding: 0;
background-color: #f5f5f5;
}

header, nav ,main, footer{
padding: 1rem;
}


header{
background-color: #333;
color: #fff;
}

nav{
background-color: #333;
color: #fff;
}

nav ul{
list-style: none;
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
}

nav li a{
color: #fff;
text-decoration:none;
padding: 1rem;
display: block;
}

nav li a:hover{
background-color #999;
}

main{
padding: 1rem
}

article{
background-color: #fff;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 5px;
box-shadow: 2px;�@2px; 5px;
rgba(0,0,0,0,3);
}

article h2{
margin-top: 0;
}

footer{
background-color: #666;
color: #fff
margin-top:�@1rem;
text-align: center;
}

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

header h1{
font-size: 1.5rem;
}

nav ul{
flex-direction: column;
}

nav li a{
margin-bottom: 0.5rem;
}

}