*{ padding: 0; margin: 0; }

body { background-color: white; }

#contenedor { background-color: whitesmoke; border: solid; border-width: 1px; margin-left: auto; margin-right: auto; height: auto; max-width: 960px; }

header { height: auto; border: solid; border-width: 1px; margin-bottom: 10px; background-image: url(imagenes/header.jpg) } 

nav { background-color: rgba(80, 80, 255, 0.66); float: right; height: auto;; border: solid; border-width: 1px;padding: 5px; 5px; }

nav ul { margin-top: 25px; list-style-type: none; width: 100%;
    display: inline-block; }

nav li { border: solid; border-width: 1px; font-size: 12px; float: right; margin-right: 40px; padding: 5px 5px; border-radius: 10px;}

nav a { font-size: 16px; color: rgba(0,0,0,0.7); color: white; text-align: center; }

nav a:hover { font-size: 16px; color: rgb(0,0,0); }

main { padding-top: 50px; padding-bottom: 50px; border: solid; border-width: 1px; height: auto; background-color: cyan; }

main p { color: rgba(0,0,0,0.8); }

h2 { color: rgba(12, 2, 132, 0.75); }

h3 { color: rgba(0,0,0,0.5); }

h4 { margin: 5px; color: rgba(0,0,0,0.6); }

article { padding: 43px; float: left; width: 150px; height: auto; margin-right: auto; margin-left: auto;  }

article img { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); height: 180px; width: 150px; }

article img:hover { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); -ms-filter: grayscale(0); height: 180px; width: 150px; }

aside { padding: 10px; border: solid; border-width: 1px; float:right; width: 300px; }

footer { padding-top: 20px; padding-bottom: 20px; clear: both; border: solid; border-width: 1px; height: auto;background-color: darkslategray}

footer p { font-size: 12px; color: rgba(221, 221, 221, 0.87); }

@media screen and (max-width:480px){
    
    nav { background-color: rgba(80, 80, 255, 0.66); float: center; height: auto;; border: solid; border-width: 1px; padding: 5px; 5px; margin-bottom: auto; text-align: center; list-style-type: none; text-decoration: none;}

nav ul { margin-top: 25px; list-style-type: none; width: 100%; display: inline-block; margin-bottom: auto; margin: auto; text-align: center; }

nav li { border: solid; border-width: 1px; font-size: 12px; float: center; margin: auto; padding: 5px 5px; border-radius: 10px; margin-bottom: auto; text-align: center; list-style-type: none; width: 100%;}

nav a { font-size: 16px; color: rgba(0,0,0,0.7); color: white; text-align: center; height: auto; display: inline-block; width:50%; padding: 1em 1em; overflow: auto; list-style-type: none; text-decoration: none; }

nav a:hover { font-size: 16px; color: rgb(0,0,0); margin-bottom: auto; }
}