main {
    width: 992px;
    margin: auto;
}

.container {
    display: grid;
    grid-template-columns: 130px auto 130px;
    text-align: center;
}

header {
    background-color: #c7c7c7;
}

img {
    width: 100%;
}

h1 {
    font-size: 48px;
    font-weight: bold;
    color: rgb(221, 51, 94);
    font-family: Arial, Helvetica, sans-serif;

}

h2 {
    font-size: 36px;
    color: rgb(36, 207, 219);
}

h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all .5s;
}
h3:hover{
    cursor: pointer;
    transform: scale(1.2);
}

form>ul>li:nth-of-type(2) fieldset legend::before {
    content: '2';
}

form>ul>li:nth-of-type(3) fieldset legend::before {
    content: '3';
}

legend {
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.red {
    color: rgb(221, 51, 94);
}

.area {
    display: grid;
    text-align: center;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
        "sub sub sub"
        "datos preferencia tipo";
}

.sub {
    grid-area: sub;
}

.datos {
    grid-area: datos;
}

.preferencia {
    grid-area: preferencia;
}

.tipo {
    grid-area: tipo;
}

.datos h3::before,
.preferencia h3::before,
.tipo h3::before {
    content: '1';
    font-size: 35px;
    display: flex;
    background-color: rgb(221, 51, 94);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
}

.preferencia h3::before {
    content: '2';
}

.tipo h3::before {
    content: '3';
}

legend::before {
    content: '1';
    font-size: 35px;
    display: inline-flex;
    background-color: rgb(221, 51, 94);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

h3:nth-child(3)::before,
#preferencia legend::before{
    content:'2';
}
h3:nth-child(4)::before,
#tipo legend::before{
    content:'3';
}

fieldset {
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

.personales label {
    display: block;

}

.personales input {
    width: 90%;
}

.personales {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.obligatorio {
    color: red;
    font-size: 20px;
}

.column {
    display: flex;
    flex-direction: column;
}

.preferencias {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

form {
    /* Centrar el formulario en la página */
    padding: 1em;

}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

fieldset {
    margin-top: 1em;

}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c7c7c7;
    height: 80px;
    margin-top: 15px;

}

.politica {
    margin-left: 50px;
}

.boton ul {
    display: flex;
    gap: 20px;
    margin-left: 40px;
    margin-top: 20px;
    margin-bottom: 25px;
}

label {
    /* Tamaño y alineación uniforme */
    display: inline-block;

}

input,
textarea {
    /* Para asegurarse de que todos los campos de texto tienen la misma configuración de letra
       Por defecto, las áreas de texto tienen un tipo de letra monoespaciada */
    font: 1em sans-serif;
    background-color: #dddddd;

    /* Hacer coincidir los bordes del campo del formulario */
    border: 1px solid #999;
}

input:focus,
textarea:focus {
    /* Destacado adicional para elementos que tienen el cursor */
    border-color: #000;

}

textarea {
    /* Alinear los campos de texto multilínea con sus etiquetas */
    vertical-align: top;

    /* Proporcionar espacio para escribir texto */
    height: 7em;
    width: 99%;
}

.button {
    /* Alinear los botones con los campos de texto */
    padding-left: 90px;
    /* mismo tamaño que los elementos de la etiqueta */

}

button {
    /* Este margen adicional representa aproximadamente el mismo espacio que el espacio
       entre las etiquetas y sus campos de texto */
    margin-left: 0.5em;
    cursor: pointer;
    background-color: #089f6e;
    border-radius: 5px;
    padding: 5px 8px;
    color: #ffffff;
    display: inline-block;
    font: normal bold 15px/1 "Open Sans", sans-serif;
    text-align: center;
}
.color{
    background-color: rgb(158, 18, 18);
}

#pet-select{
    height: 125px;
}

/* The Modal (background) */
#datos, #preferencia{
    display: none;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;

    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.8s;
  animation-name: animatetop;
  animation-duration: 0.8s
  }

  /* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-600px; opacity:0} 
    to {top:0; opacity:1}
  }
  
  @keyframes animatetop {
    from {top:-600px; opacity:0}
    to {top:0; opacity:1}
  }
  
  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  .modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
  }
  
  .modal-body {padding: 2px 16px;}
  
  .modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
  }