.container {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.2rem;
    line-height: 2em;
    text-align: center;
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    }

    body {
        background-image: linear-gradient(to left, rgb(245, 237, 204), rgb(236, 216, 125), rgb(245, 237, 204));
    }

    h1{
        font-size: 1.8em;
        line-height: 1.3em;
    }

    hr {
        width: 100%;
        height: 5px;
        background: blue;
    }

    .contenedor{
        align-content: center;
        justify-content: center;
        display: grid;
        width: 200vh;
    }
    
    .nav-boton{
        border: 3px solid rgba(100,100,100,100,0,1);
        margin-bottom: 20px;
        padding: 20px;
        width: 300px;
        font-family: 'Times New Roman', Times, serif;
        font-size: 20px;
        border-radius: 8px;
        cursor: pointer;
        color: whitesmoke;
        background-size: 300%;
    }
    
    .nav-boton{
        background-image: linear-gradient(to left, blue, aquamarine, blue);
    }

    #ima2 {
        width: 100%;
        height: auto;
    }

    @media only screen and (max-width: 600px) {

        h1{
            font-size: 1.3em;
            line-height: 1.3em;
        }

        .container {
            font-family: 'Times New Roman', Times, serif;
            font-size: 1rem;
            line-height: 2em;
            text-align: center;
            width: 90%;
            max-width: 900px;
            margin: 0 auto;
            }

        #ima1 {
            width: 100%;
            height: auto;
        }

        #ima2 {
            width: 100%;
            height: auto;
        }

        #ima3 {
            width: 100%;
            height: auto;
        }

        #ima4 {
            width: 100%;
            height: auto;
        }

        .contenedor{
            align-content: center;
            justify-content: center;
            display: grid;
            width: 80vh;
        }

    }