/* Base Styles */

body{
font-family: Arial, Helvetica, sans-serif;
background:white;
margin:0;
padding:0;
}


/* Outer Container */

.container{
width:800px;
margin:40px auto;
background:#d9f0ff;
padding:30px;
text-align:center;
}


/* Header */

header h1{
margin-bottom:10px;
}


/* Navigation */

nav{
border-top:2px solid black;
border-bottom:2px solid black;
padding:10px 0;
}

nav ul{
list-style:none;
padding:0;
margin:0;
}

nav li{
display:inline;
margin:0 15px;
}

nav a{
color:purple;
text-decoration:none;
}

nav a:visited{
color:purple;
}


/* Box Section */

.boxes{
margin-top:40px;
}


/* Shared Box Styles */

.box{
display:inline-block;
vertical-align:top;
width:300px;
margin:0 20px;
padding:20px;
text-align:left;
}


/* Left Box */

.left-box{
background:white;
border:3px solid green;
box-shadow:4px 4px 10px rgba(0,0,0,0.3);
height:230px;
}


/* Right Box */

.right-box{
background:magenta;
border:3px solid blue;
border-radius:15px;
height:180px;
color:white;
}


/* Footer */

footer{
margin-top:40px;
text-align:left;
}


/* Responsive Media Query */

@media (max-width:900px){

.container{
width:90%;
}

.box{
display:block;
margin:20px auto;
}

}/* CSS Document */