@media (max-width:500px) {

    body{
        background-color: grey;
    }

    #main-index{
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-style: italic;
        font-weight: normal;
        font-size: x-small;
    }
    #main-index h2 {
        font-size: 20px;
        font-stretch: condensed;
    }
    #main-index h5 {
        font-size: 14px;
        font-stretch: condensed;
    }
    #main-index img {
        width: 100px;
    }

    .fondo{
        background-color: rgb(54, 172, 166);
        color: white;
    }

    #reloj {
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 20px;
    }

    #footer-index {
        font-size: small;
    }
}

@media(min-width:501px) and (max-width:1278px) {

    #main-index{
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-style: italic;
        font-weight: bold;
        font-size: medium;
    } 
    #main-index img{
        width: 200px;
    }

    #reloj {
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 30px;
    }

    .fondo{
        background-color: rgb(26, 90, 226);
        color: white;
    }
}

@media(min-width:1278px){

    #main-index{
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-style: italic;
        font-weight: bold;
        font-size: medium;
    } 
    #main-index img{
        width: 250px;
    }

    #reloj {
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 40px;
    }

    .fondo{
        background-color: rgb(25, 95, 8);
        color: white;
    }    
}