*{ padding: 0; margin: 0; }
* {
    box-sizing: border-box;
}

#contenedor { background-color: rgba(255, 0, 255, 0.62); padding-left: 25px; padding-right: 25px; margin-left: auto; margin-right: auto; height: 220px; max-width: 580px; }

header { padding-top: 10px; } 
img { float: left; margin-right: 50px; margin-bottom: 10px; } 

main { background-color: rgba(49, 255, 0, 0.62); height: auto; padding-top: 30px; padding: 15px; 15px; }

h2 { margin-bottom: 15px; font-size: 40px; color: rgba(0,0,0,0.2); }

h3 { font-size: 15px; color: rgba(0,0,0,0.5); }

h4 { font-size: 15px; color: rgba(0,0,0,0.6); margin-bottom: 10px; }

main p { font-size: 10px; color: rgba(0,0,0,0.8); padding: 15px; 15px; }

nav { height: auto; background-color: rgba(127, 142, 255, 0.78); text-align: center; list-style-type: none; text-decoration: none;}

nav a { font-size: 16px; color: rgba(0,0,0,0.7); text-align: center; height: auto;  background-color: rgba(127, 255, 212, 0.78); 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); }

ul { margin-right: 100px; margin: auto; list-style-type: none; }

li { font-size: 10px; float: center; margin-left: 5px; margin-top: auto; margin-right: 5px; text-align: center; list-style-type: none; }

footer { margin-bottom: 20px; margin-top: 20px; background-color: crimson; height:auto;}

footer p { font-size: 12px; color: rgba(255, 252, 252, 0.94); padding: 15px; 15px; }


@media screen and (min-width:720px) {

*{ padding: 0; margin: 0; }

#contenedor { background-color: rgba(255, 0, 255, 0.62); padding-left: 25px; padding-right: 25px; margin-left: auto; margin-right: auto; height:90px; max-width: 960px; }

header { padding-top: 10px; } 

img { float: left; margin-right: 50px; margin-bottom: 10px; } 

main { background-color: rgba(49, 255, 0, 0.62); height: auto; padding-top: 30px; }

h2 { margin-bottom: 15px; font-size: 40px; color: rgba(0,0,0,0.2); }

h3 { font-size: 20px; color: rgba(0,0,0,0.5); }

h4 { font-size: 20px; color: rgba(0,0,0,0.6); margin-bottom: 10px; }

main p { font-size: 16px; color: rgba(0,0,0,0.8); padding: 15px; 15px; }

nav { height: au; background-color: rgba(127, 142, 255, 0.78); text-align: center; list-style-type: none; }

nav a { font-size: 11px; color: rgba(0,0,0,0.7); text-align: center; background-color: rgba(127, 255, 212, 0.78); display: inline-block; width:auto; padding: 1em 1em; overflow: auto; list-style-type: none;}

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

ul { margin-right: 100px; margin: auto; list-style-type: none; }

li { font-size: 11px; float: center; margin-left: 12px; margin-top: auto; margin-right: 10px; text-align: center; list-style-type: none; }

footer { margin-bottom: 20px; margin-top: 20px; background-color: crimson; height:auto;}

footer p { font-size: 12px; color: rgba(255, 252, 252, 0.94); padding: 15px; 15px; }

}