body {
    font-family: Arial, sans-serif;
    background-image:url(img/juls_fondo.png); 
    display: flex;
    justify-content: center;

}














.mensaje-bienvenida {
    position: absolute;
    transform: translate(-30%, -80%);
    opacity: 0;
    animation: destello 3s ease forwards;
}



@media screen and (max-width: 799px) {
    .formulario {
        background-color: #fff;
        padding: 20px;  
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        padding: 10px;
        min-width: 90%;
    }
    .formulario-container {
        opacity: 0;
        animation: enfocar 10s ease forwards;
        min-width: 90%;
        }
    .img-bienvenida{

        width: 300px;
    }
        
    @keyframes destello {
            0% {
                opacity: 0;
                transform: translateX(-100%);
            }
            50% {
                opacity: 1;
                transform: translateX(0);
            }
            100% {
                opacity: 0;
                transform: translateX(100%);
            }
        }
        
        
        
        @keyframes enfocar {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
}

@media screen and (min-width: 800px) {
    .formulario {
        background-color: #fff;
        padding: 20px;  
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        min-width: 800px;
    }

    .formulario-container {
        opacity: 0;
        animation: enfocar 10s ease forwards;
        
    }
    .img-bienvenida{

        width: 500px;
    }
    
    
    @keyframes destello {
        0% {
            opacity: 0;
            transform: translateX(-100%);
        }
        50% {
            opacity: 1;
            transform: translateX(0);
        }
        100% {
            opacity: 0;
            transform: translateX(100%);
        }
    }
    
    
    
    @keyframes enfocar {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

}


.formulario h1 {
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
    display:flexbox;
}
.texto-centrado{
    display: flex;
    margin-bottom:30px;
    align-items: center;
    text-align: center;
    color: #630b06;

}

.form-group2 {
    margin-bottom: 20px;
    display:flex;
}
.form-group3 {
    display:flex;
}

.form-group label[for="nombre"] {
    display:block;
    margin-bottom: 5px;
}
.form-group3 label{
    margin: auto;
}
.form-group input[id="calle"],
.form-group input[id="nombre"],
.form-group input[id="Apaterno"],
.form-group input[id="ciudad"],
.form-group input[id="telefono"],
.form-group input[id="exterior"],
.form-group input[id="municipio"],
.form-group input[id="CP"]

{
    margin-right: 3px;
}


.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="num"],
.form-group input[name="TipoCompra"],
.form-group textarea {
    width: 90%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    
}

.form-group textarea {
    resize: none;
}

button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}