@import url("./style.css");


main{
    margin: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;

    #img-formulario{
        width: 70%;

        img{
            width: 100%;
            border-radius: 5%;
        }


    }
    #formulario{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        align-content: center;
        margin: auto;
        gap: 20px;
        font-size: large;
    

        textarea{
            width: 100%;
        }
        button {
            justify-content: center;
            align-items: center;
            margin-top: 10px;
            background-color: var(--color-principal);
            color: var(--color-secundario);
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 1.2em;
            font-weight: bold;

            transition: background-color 0.3s ease;

            &:hover {
                background-color: var(--color-secundario);
                color: var(--color-principal);
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            }
        }
    }
}


@media (max-width: 870px) {

    
}






/* Estilos para pantallas de hasta 650px de ancho y 600px de alto */
@media (max-width: 650px) {
    main{
        margin: 40px;
        display: grid;
        grid-template-columns: 1fr;
        #img-formulario{
        display: none;
        }
    
    }
}