style.css

body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f5f5f5;
   background-image: url('https://media.istockphoto.com/photos/internet-crime-concept-hacker-working-on-a-code-on-dark-digital-with-picture-id1068209682?k=6&m=1068209682&s=612x612&w=0&h=1GXiv1cF_epj1wuimPcKbkACDu_ug7ni3rs_4jV7Vk0='); /* Ruta de la imagen de fondo */
      background-size: cover; /* Para que la imagen de fondo cubra todo el header */
    }
 img.centered {
      max-width: 100%; /* Ajusta el tamaño máximo de la imagen al ancho del cuerpo */
      max-height: 100vh; /* Ajusta el tamaño máximo de la imagen a la altura del cuerpo */
      display: block; /* Asegura que la imagen esté alineada al centro */
      margin: auto; /* Centra la imagen horizontalmente */
    }
    h1 {
      font-size: 24px;
      color: #333;
    }

    label {
      display: block;
      margin-bottom: 5px;
      color: #666;
    }

    select,
    textarea {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      color: #333;
      background-color: #fff;
    }

    button {
      padding: 10px 20px;
      background-color: #ff9999;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #ff6666;
    }

    table {
      border-collapse: collapse;
      width: 100%;
      margin-top: 20px;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: left;
      color: #333;
    }

    th {
      background-color: #f2f2f2;
    }


     header {
      position: relative;
      padding: 20px;
      border-bottom: 2px solid #ddd;
      background-image: url('https://th.bing.com/th/id/R.adf35ab0bb7231b1fed7dbdaf5ca5b38?rik=hIOrr06EeWzMSg&riu=http%3a%2f%2fi303.photobucket.com%2falbums%2fnn134%2fbXric%2fred-matrix.gif&ehk=zZmWKfahlJVfcuaACGfhlAhZq%2b1Ut5eadDgx9Dbh7Hw%3d&risl=&pid=ImgRaw&r=0'); /* Ruta de la imagen de fondo */
      background-size: cover; /* Para que la imagen de fondo cubra todo el header */
      color: white; /* Color del texto en el encabezado */
      text-align: center; /* Centrar el texto */
    }
   .logo {
      font-size: 10em;
      font-family: 'Chiller', sans-serif;
      color: red;
      text-shadow: 4px 4px 6px #000;
      text-align: center;
      opacity: 0; /* Inicialmente, el texto está invisible */
      animation: blood-fall 2s ease-out forwards; /* Animación de la aparición del texto */
    }

    @keyframes blood-fall {
      0% {
        transform: translateY(-100vh);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
   
.rectangulo {
  width: 800px; /* Ancho fijo */
  border: 2px solid #333; /* Borde para visualizar el rectángulo */
  border-radius: 20px; /* Bordes redondeados */
  padding: 20px; /* Espacio interno dentro del rectángulo */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.9); /* Sombra */
  margin: 50px auto 0 auto; /* Centrar automáticamente y agregar espacio arriba */
  background-color: #fff; /* Color de fondo */
}

 .cuadrado {
      position: absolute;
      top: 20px; /* Posición desde la parte superior */
      left: 20px; /* Posición desde la izquierda */
      width: 100px; /* Ancho del cuadrado */
      height: 100px; /* Altura del cuadrado */
      border-radius: 50%; /* Bordes redondeados para hacer un círculo */
      overflow: hidden; /* Oculta el contenido que excede el cuadrado */
    }

    .cuadrado img {
      display: block;
      width: 100%; /* Para que la imagen ocupe todo el espacio disponible */
      height: auto; /* Altura automática para mantener la proporción */
      object-fit: cover; /* Ajusta la imagen dentro del cuadrado */
    }

    .cuadrado a {
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none;
    }

    /* Cambio de estilo al pasar el ratón por encima */
    .cuadrado:hover {
      opacity: 0.8;
      transition: opacity 0.3s ease-in-out;
    }

#resultados {
  max-height: 300px; /* Altura máxima del contenedor */
  overflow-y: auto; /* Activar desplazamiento vertical */
  display: block; /* Convertir el tbody en un bloque para aplicar estilos */
}