@media screen and (max-width: 480px){
    #tema h1{
        font-size: 1.5rem;
        text-align: center;
    }

    #openModal{
        font-size: 2rem;
    }

    img{
        padding-left: 1.5rem;
    }

}

@media (min-width: 481px) and (max-width: 650px){
    #tema h1{
        text-align: center;
        font-size: 2.5rem;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    img{
        width: 450px;
        height: 450px;
        padding-left: 4rem
    }

      #openModal{
        font-size: 4rem;   
    }

    dialog{
        width: 400px;
        & p {
            font-size: 1.7rem;
        }

        input[type="file"]::file-selector-button {
        font-size: 1.3rem;
        width: 60%;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }


    }








}


@media (min-width: 651px) and (max-width: 850px) {

    #tema h1{
        text-align: center;
        font-size: 2.6rem;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

    img{
        width: 320px;
        height: 320px;
    }

    #openModal{
        font-size: 4rem;
    }

    dialog{
        width: 400px;
            & p{
                font-size: 1.6rem;
            }

            & form {
                width: 100%;
            }   
                input[type="file"]::file-selector-button {
                 font-size: 1.2rem;
                 width: 65%;
                 border: none;
                 border-radius: 4px;
                 cursor: pointer;
                }
        }
}

@media screen and (min-width: 851px) and (max-width: 1024px){

    #tema h1{
        font-size: 4rem;
    }

    img{
        width: 450px;
        height: 450px;
        margin-left: 12rem;
    }

    #openModal{
        font-size: 3.2rem;
        margin-bottom: 2rem;
    }

    dialog{
        width: 500px;

        & p{
            font-size: 2rem;
        }   
    }

    input[type="file"]::file-selector-button {
        font-size: 1.8rem;
        width: 80%;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    img{
        padding-left: 2rem;
        margin-left: 2.8rem;
    }

    #openModal{
        font-size: 8rem;
    }
}