index.css

/*Añadimos la font que tenemos en la carpeta de fonts*/
@font-face {
  font-family: 'Personalizada';
  src: url('fonts/Barlow-Regular.ttf') format('truetype');
}

#submitButton{
    margin-right: 1px;
  }

  #personal td:nth-child(1) {
  width: 30%;
  text-align: left;
  }

  #personal .tabla-club th {
    font-size: x-small !important;
  }

  #personal .tabla-club td {
    font-size: x-small !important;
  }

  #personal .tabla-club th {
    background-color: gray;
  }

  .banner{
    position: absolute;
    right: 0%;
    top: 11%;
    width: 127px
  }

  .grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 7px;
  }

  .grid img{
    width: 160px;
  }

  .grid p{
    font-size: x-small;
    margin-top: 0;
  }

  .lt-small{
    font-size: x-small;
  }

@media screen and (max-width: 480px) {
    /* Ajustar el tamaño para pantallas más pequeñas, como teléfonos móviles */
    .banner {
        width: 65px;
    }
}

  #personal td:nth-child(2) {
    width: 54%;
    text-align: left;
  }

  #aventura{
    font-size: 119%;
  }

  #personal td:nth-child(3) {
    width: 16%;
    text-align: center;
    /*white-space: pre;*/
  }

  #actual{
    display: none;
  }

  #resultados{
    display: none;
  }

  .title{
    font-weight: bold;
    color: #685ba4;
  }

  #contactotext{
    text-align: center;
    font-size: large;
  }

  /*----------Estilos de contacots----------*/

.contacto {
    text-align: center;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.social-icons {
    margin-top: 20px;
    text-align: center;
}

.social-icons a {
    display: inline-block;
    margin: 3%;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
}

.social-icons a img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.social-icons a:hover {
    transform: scale(1.2);
}

  /*
  🟢 Verde: #439844

  🟠 Naranja: #ed6e3d

  🔴 Rojo: #e43433

  🟣 Morado: #685ba4

  ⚫ Negro: #000000
  */

  #color1{
    color: #439844;
  }

  #color2{
    color: #ed6e3d;
  }

  #color3{
    color: #e43433;
  }

  #color4{
    color: #685ba4;
  }

  #color5{
    color: #000000;
  }

  .itl{
    font-style: italic;
  }

  #quienessomos{
    font-size: large;
    color: #685ba4;
  }

  .nc{
    font-weight: bold;
    font-style: italic;
  }

  #contacto{
    display: none;
  }

  .textoInicio{
    margin-top: 3%;
  }

  #quienes{
    margin-top: 3%;
    display: none;
  }

  .dropdown{
    margin-bottom: 1%;
    border: 0px;
    font-size: larger;
  }

  #personal th:nth-child(1) {
  width: 30%;
  text-align: left;
  }

  .line{
    border-bottom: 1px solid black;
  }

  /* Estilos para el menú */
  .menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .menu li {
      float: left;
  }

  .menu li a {
      display: block;
      color: rgb(0, 0, 0); /* Color del texto del menú */
      text-align: center;
      padding: 5px 6px;
      text-decoration: none;
      font-size: small;
  }

  #como{
    display: none;
  }

  .menu li a:hover {
      background-color: #555; /* Color de fondo al pasar el mouse sobre las opciones */
      color: white;
  }

  #policy{
    font-size: xx-small;
    font-style: italic;
    border-radius: 2%;
    color: gray;
  }

  #personal th:nth-child(2) {
    width: 54%;
    text-align: left;
  }

  #personal th:nth-child(3) {
    width: 16%;
    text-align: center;
  }

  *{
    font-size: small;
    font-family: 'Personalizada';
  }
  .estrellasnaranjas{
    color: #ead003;
  }

  .explicacion{
    font-size: x-small;
    color: gray;
    font-style: italic;
  }

  .estrellasrojas{
    color: #e43433;
  }

  .estrellasverdes{
    color: #439844;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }
  th,
  td {
    padding: 8px;
    text-align: left;
    word-wrap: break-word;
  }
  /* Estilos del formulario */
  .form {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    gap: 10px; /* Espacio entre el textbox y el botón */
    display: none;
  }
  /* Estilos del texto de instrucciones */
  .instructions {
    text-align: left;
    margin-bottom: 10px;
  }
  /* Estilos del recuadro */
  #resultados {
    border-radius: 0px;
    padding: 0px;
    padding-bottom: 0;
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
  }
.sub{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.p0{
  padding-top: 0 !important;
}

.tabla-club {
  /* margin-bottom: 20px;  Espacio entre las tablas */
  border-collapse: collapse;
  width: 100%;
  /*table-layout: fixed;*/
  margin-bottom: 5%;
  border: 2px black solid;
}
.tabla-club th {
  font-weight: bold; /* Estilo prominente para el título de la tabla */
  padding: 8px;
  /* background-color: #f2f2f2; Color de fondo gris claro */
  color: white;
  background-color: #685ba4;
  text-align: left;
}

.tabla-club caption {
  font-weight: bold; /* Estilo prominente para el título de la tabla */
  padding: 5px;
  background-color: #f2f2f2; /* Color de fondo gris claro */
  text-align: left;
  margin-bottom: 2%;
  font-size: x-large;
  color: #685ba4;
}

.captionTitle{
  background-color: white !important; /* Color de fondo gris claro */
}

#personal .tabla-club tr, #clubResults .tabla-club tr{
  border-top: 1px black solid;
}

.tabla-club th,
.tabla-club td {
  padding: 5px;
  text-align: left;
}
.error {
  color: #ff0000;
  font-weight: bold;
  background-color: #ffe6e6;
  padding: 10px;
  border: 1px solid #ff9999;
  border-radius: 5px;
}
.resaltado{
  color: white;
  font-weight: bold;
  background-color:#685ba48c;
  padding: 5px;
  border-radius: 5px;
}

#botonReset{
  display: none;
}

#botonReset{
  margin: 2px;
}

.bold{
  font-weight: bold;
}

.body{
  margin: 18;
  display: block;
}

body{
  margin: 0;
}

#answerBox{
  font-size:16px;
}

   td:nth-child(1) {
  width: 84%;
  text-align: left;
  }

   td:nth-child(2) {
    width: 16%;
    text-align: center;
  }

  .verificado{
    color: #ed6e3d;
    padding-top: 7% !important;
  }

   th:nth-child(1) {
  width: 84%;
  text-align: left;
  }

   th:nth-child(2) {
    width: 16%;
    text-align: center;
  }

  #byebye{
    height: 50px;
    text-align: center;
  }

  .logo img{
    width: 80%;
    margin: auto;
    display: block;
    /*max-width: 300px;*/
  }

  #result .tabla-club {
    border: 0;
  }

  .first {
    padding-bottom: 6% !important;
}

#frasefinal{
  /*Cursiva*/
  font-style: italic;
}