body {
    background: #3EA1FF url(../images/fondo.png) repeat; /* se indica el color del fondo (que se usa por defecto), se busca la imagen
    (ojo, que el directorio del css no es el mismo que el del proyecto y hay que bajar) y se indica que el fondo se repita si no es lo suficientemente grande*/
    color: white;
}

header {
    margin: 20px;
    padding: 30px;
    background-color: white;/* podemos elegir otro color, o bien hacerlo un poco transparente para que se vea el azul de debajo*/
    opacity: 0.7; /* 0 = transparencia total */
    color: black;
    border-radius: 20px;/* sólo válido en CSS 3 - es posible redondear las esquinas individualmente*/
    text-align: center;/* centra todo, no sólo el texto*/
}

header h1 {
    font-variant: small-caps;/* ojo, esto afecta a cualquier etiqueta h1. En nuestro caso no es problema porque sólo hay una. Si hubiese más, deberíamos especificar que sólo queremos que afecte a este etiqueta, por ejemplo usando el término header. Entonces sólo afecta a las etiquetas h1 dentro de header*/
}

#etsiit {
    /*de esta manera las reglas sólo hacen referencia a los elementos cuyo id sea el que queramos (puede ser más de uno)*/
    border: 1px solid white;
    border-radius: 20px;
    margin: 0 auto; /* el primer valor es el margen superior/inferior y el segundo valor es el derecha/izquierda*/
    display:block; /* convierte un elemento de línea en un elemento de bloque y viceversa, para permitir centrar, alinear, etc. En este caso debíamos hacerlo, ya que la imagen era un elemento de línea */
}

#contenido {
    margin: 40px 50px;
    padding-bottom: 1em;
}

#contenido h2 {
    /* queremos que nos actúe sólo sobre las etiquetas h2 que estén dentro de un identificador "contendio*/
    color: silver;
    text-transform: uppercase;
    
}
#contenido p {
    font-size: 110%;
    line-height: 130%;
    text-align: justify;
}

#contenido a {
    color: white;
    text-decoration: none;
    border-bottom: 1px dotted white;
    }
#contenido a:hover { /* sirve para indicar que este código sólo actúe cuando pasemos el ratón sobre el contenido*/
    color:silver;
    border-bottom: 1px dotted silver;
    
}

#contenido ol {/* lo seguimos haciendo aunque en nuestro caso no es necesario */
    list-style-type: upper-roman;
    margin-top: 30px;
    
}

#contenido ol li {/* se pueden colocar varios lementos (il de las ol de conetenido) */
    margin-bottom: 15px;
}

#contenido table {
    width: 300px;
    padding: 15px;
    border: 1px solid silver;
    border-radius: 15px;
    text-align: center;    
}

#contenido th {
    background-color: white;
    color: #3EA1FF;
    padding: 5px 15px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#contenido td {
    border: 1px solid silver;
    padding: 5px 15px;
}

footer {
    background-color: black;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%; /*right 0px también vale*/
    height: 3em;
    
}

footer p {
    text-align: center;/* cuando dos reglas sean contradictorias, utilizará la más restrictiva*/
    /*por ejemplo, la regla div es menos restrictiva que #contenido. En caso de igualdad, se tiene en cuenta la última*/
    font-size: 90%;
}