/* Estilo general para el cuerpo del documento */
body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; /* Define la fuente del texto */
    margin: 20px; /* Agrega un margen alrededor del contenido */
   width: 100%; /*Esdtablece el ancho del body*/
   background-color: rgb(107, 114, 3);/* Establece un color de fondo verde */
}

/* Estilo para los encabezados h1 y h2 */
h1{
    color: #4e0909; /* Establece el color del texto */
}
h2 {
    color: #158f27; /* Establece el color del texto */
}
/* Contenedor para los formularios, que permite alinearlos horizontalmente */
.form-container {
    display: flex; /* Usa el modelo de caja flexible para alinear los elementos */
    justify-content: space-around; /* Distribuye el espacio entre los elementos */
    margin-bottom: 20px; /* Agrega un margen en la parte inferior */
}

/* Estilo para cada formulario */
form {
    border: 1px solid #ccc; /* Agrega un borde gris claro alrededor del formulario */
    padding: 20px; /* Espaciado interno dentro del formulario */
    border-radius: 5px; /* Bordes redondeados para un efecto más suave */
    width: 300px; /* Establece un ancho fijo para los formularios */
    position: relative; /* Permite posicionar elementos dentro del formulario */
}
fieldset{
    background-color: #648b21;/* Establece un color de fondo a mi gusto */

}
/* Estilo para las imágenes dentro de los formularios */
.form-image {
    width: 180px; /* Establece un ancho fijo para la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    position: absolute; /* Permite posicionar la imagen en relación al formulario */
    right: -200px; /* Posiciona la imagen a la derecha del formulario */
    top: 20px; /* Posiciona la imagen a 20px desde la parte superior del formulario */
}

/* Estilo para las etiquetas de los formularios */
label {
    display: block; /* Hace que cada etiqueta ocupe toda la línea */
    margin: 10px 0 5px; /* Agrega márgenes alrededor de las etiquetas */
}

/* Estilo para los campos de entrada y el select */
input[type="number"], input[type="submit"], select {
    width: 100%; /* Hace que el campo ocupe todo el ancho disponible */
    padding: 10px; /* Agrega espaciado interno en los campos */
    margin-bottom: 10px; /* Agrega un margen en la parte inferior de los campos */
}

/* Estilo para el botón de enviar */
input[type="submit"] {
    background-color: #4CAF50; /* Establece un color de fondo verde */
    color: white; /* Establece el color del texto en blanco */
    border: none; /* Elimina el borde predeterminado del botón */
    cursor: pointer; /* Cambia el cursor a una mano al pasar por encima */
}

/* Efecto al pasar el cursor sobre el botón de enviar */
input[type="submit"]:hover {
    background-color: #45a049; /* Cambia el color de fondo cuando se pasa el cursor por encima */
}