body {
    background-color: rgb(70, 67, 67);
    margin-top: 50px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
/*Vamos a introducir las medias queries. Estas dan formato tambien pero lo hacen 
para adaptar nuestro documento HMTL a nuestra pantalla, es decir, si abrimos el documento 
en una tablet, ordenador o teléfono móvil, el formato varia de tal forma que se adapta
al tamaño de la pantalla.

Para dar diferentes estilos, vamos a dar la orden a nuestro CSS indicando el mínimo, el máximo
o el mínimo y el máximo tamaño, que tiene que tener la pantalla para introducir el estilo
nuevo.*/

/* Para móviles */

@media only screen and (max-width: 600px) {
    body {
        background-color: rgb(70, 67, 67);
        margin-top: 10px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
      .opciones {
        color:rgb(88, 8, 8);
        background-color: grey;
        border: 3px solid black;
        text-align: center;
        padding: 20px;
        margin-left: 100px;
        margin-right: 100px;
    }
    
        img {
            margin-left: 150px;
            margin-top: 80px;
    }
    
        #centrar {
            margin-left: 145px;
            margin-top: 80px;
    
    }
    
        #colorfondo {
            background-color: green;
            color: honeydew;
            
    }
    
        a {
            border: 3px solid black;
            padding: 20px;
            text-decoration: none;
    }
    
        #fondopagina {
            margin-top: 80px;
            height: 50px;
            padding-top: 25px;
            margin-left: 80px;
            margin-right: 10px;
    }
    
        #colorletra {
            color: darkgreen;    
            background-color: white;
    } 
}

/* Para tablets */

@media only screen and (min-width: 601px) and (max-width: 900px ) {
    body {
        background-color: rgb(70, 67, 67);
        margin-top: 20px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .opciones {
        color:rgb(88, 8, 8);
        background-color: grey;
        border: 3px solid black;
        text-align: center;
        padding: 20px;
        margin-left: 250px;
        margin-right: 250px;
    }
    
        img {
            margin-left: 330px;
            margin-top: 100px;
    }
    
        #centrar {
            margin-left: 335px;
            margin-top: 150px;
    
    }
    
        #colorfondo {
            background-color: green;
            color: honeydew;
            
    }
    
        a {
            border: 3px solid black;
            padding: 20px;
            text-decoration: none;
    }
    
        #fondopagina {
            margin-top: 80px;
            height: 50px;
            padding-top: 25px;
            margin-left: 290px;
            margin-right: 80px;
    }
    
        #colorletra {
            color: darkgreen;    
            background-color: white;
    }        
}



/* para ordenadores */

@media only screen and (min-width: 900px) {
    body {
        background-color: rgb(70, 67, 67);
        margin-top: 50px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

    .opciones {
        color:rgb(88, 8, 8);
        background-color: grey;
        border: 3px solid black;
        text-align: center;
        padding: 20px;
        margin-left: 500px;
        margin-right: 500px;    
    }

    img {
        margin-left: 650px;
        margin-top: 100px;
    }

    #centrar {
        margin-left: 660px;
        margin-top: 150px;

    }

    #colorfondo {
        background-color: green;
        color: honeydew;
        
    }

    a {
        border: 3px solid black;
        padding: 20px;
        text-decoration: none;
    }

    #fondopagina {
        margin-top: 200px;
        margin-right: 300px;
        height: 50px;
        padding-top: 25px;
        margin-left: 615px;
    }

    #colorletra {
        color: darkgreen;    
        background-color: white;
    }
}