/*Establece el color de fondo del contenido principal y hace que ocupe el espacio disponible*/
main {
  background-color: var(--background-main);
  flex: 1;
}

/*Establece la altura y el color de fondo de toda la página*/
body {
  height: 100%;
  background-color: var(--background-main);
}

/*Da formato al contenedor principal del formulario de contacto*/
.contact_form {
  width: 460px;
  height: auto;
  margin: 80px auto;
  border-radius: 10px;
  padding-top: 30px;
  padding-bottom: 20px;
  background-color: #fbfbfb;
  padding-left: 30px;
}

/*Controla el tamaño y la apariencia de los campos de entrada*/
input {
  background-color: #fbfbfb;
  width: 408px;
  height: 40px;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--background-header);
  margin-top: 10px;
  padding-left: 10px;
  margin-bottom: 20px;
}

/*Controla el tamaño y la apariencia del área de texto*/
textarea {
  background-color: #fbfbfb;
  width: 405px;
  height: 150px;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--background-header);
  margin-top: 10px;
  padding-left: 10px;
  margin-bottom: 20px;
  padding-top: 15px;
}

/*Coloca las etiquetas encima de cada campo del formulario*/
label {
  display: block;
}

/*Da formato al botón de envío del formulario*/
button {
  height: 45px;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 20px;
  margin-top: 10px;
  text-transform: uppercase;
  background-color: var(--background-header);
  border-color: var(--background-header);
  border-style: solid;
  border-radius: 10px;
  width: 420px;
  cursor: pointer;
  color: #fff;
}

/*Resalta el color de los asteriscos de los campos obligatorios*/
span {
  color: var(--background-header);
}

/*Da formato al aviso situado al final del formulario*/
.aviso {
  font-size: 13px;
  color: #0e0e0e;
}

/*Establece el formato del subtítulo del formulario*/
h3 {
  font-size: 16px;
  padding-bottom: 30px;
  color: #0e0e0e;
}

/*Da formato al texto del formulario*/
p {
  font-size: 14px;
  color: #0e0e0e;
}

/*Controla el color del texto de ayuda de los campos de entrada*/
::-webkit-input-placeholder {
  color: #a8a8a8;
}

/*Controla el color del texto de ayuda del área de texto*/
::-webkit-textarea-placeholder {
  color: #a8a8a8;
}

/*Cambia el borde del campo de entrada cuando recibe el foco*/
.formulario input:focus {
  outline: 0;
  border: 1px solid var(--background-ingles);
}

/*Cambia el borde del área de texto cuando recibe el foco*/
.formulario textarea:focus {
  outline: 0;
  border: 1px solid var(--background-ingles);
}

/*Configuración específica para dispositivos móviles*/
@media (max-width: 768px) {
  /*Reduce el ancho del formulario y centra su contenido*/
  .contact_form {
    width: 90%;
    margin: 20px auto;
  }

  /*Adapta el ancho de los campos de entrada*/
  input {
    width: 90%;
  }

  /*Adapta el ancho del área de texto*/
  textarea {
    width: 90%;
  }

  /*Adapta el ancho del botón*/
  button {
    width: 90%;
  }
}