@charset "utf-8";
/* CSS Document */


body{
    margin:0;
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

#wrapper{
    max-width:900px;
    margin:0 auto;
    padding:20px;
	width:100%;
}

h1{
    text-align:center;
    font-size:48px;
}

hr{
	max-width:500px;
	width:100%;
}

#nav{
    text-align:center;
    padding:0;
}

#nav li{
    display:inline-block;
    list-style:none;
    margin:0 18px;
}

#nav a{
    text-decoration:none;
    color:magenta;
    font-size:24px;
}

#boxes{
    text-align:center;
    margin-top:80px;
}

#box-left,
#box-right{
    display:inline-block;
    vertical-align:top;
}

#box-left{
    width:200px;
    height:150px;
    background:white;
    border:6px solid #8ccf63;
    padding:20px;
    text-align:left;
    box-shadow:10px 10px 10px gray;
    margin-right:50px;
}

#box-left h2{
    margin-top:0;
    font-size:20px;
    font-weight:bold;
}

#box-left a{
    color:darkorange;
    text-decoration:none;
    font-weight:bold;
}

#box-right{
    width:200px;
    height:200px;
    background-color:magenta;
    border:6px solid #48c6f2;
    border-radius:10px;
}

#text{
	max-width:90%;
}

@media screen and (max-width:730px){
	#boxes, #box-left, #box-right{
		display:block;
		margin:auto;
	}
}

@media screen and (max-width:680px){
	#nav li{
			display:list-item;
    		list-style:none;
    		margin:0 18px;
			padding:5px;
	}
}
@media screen and (max-width:900px){
	#text{
		max-width: 50%;
		margin: auto;
	}
}