h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Shadows Into Light", serif; /* Aplicar la fuente a todos los textos */
  font-size: 25px; /* Tamaño pequeño */
  /* line-height: 1.4;  Interlineado */
  color: black;
}

p,
span {
  font-family: "Shadows Into Light", serif; /* Aplicar la fuente a todos los textos */
  color: black;
}

#headfont {
  font-family: "Bebas Neue", serif; /* Aplicar la fuente a todos los textos */
  color: black;
  margin-right: 100px;
  font-size: 20px;
}

#footfont {
  font-family: "Shadows Into Light", serif; /* Aplicar la fuente a todos los textos */
  color: black;
  font-size: 20px;
}

body {
  zoom: 0.75; /* Ajusta el zoom */
  font-size: 9px; /* Tamaño de fuente */
  margin: 0 auto; /* Centra el contenido */
  max-width: 94vw; /* 94% del ancho de la pantalla */
  padding: 0 5px; /* Pequeño margen para evitar bordes pegados */
}

/* Para pantallas más grandes de 950px (laptops y PCs) */
@media (min-width: 950px) {
  body {
    max-width: 85vw; /* Ajusta a un ancho más amplio en laptops/PCs */
  }
}

/* Para pantallas de escritorio grandes (1920px o más) */
@media (min-width: 1920px) {
  body {
    max-width: 75vw; /* Reduce el ancho para mantener buena estética */
  }
}

/* Para tablets y móviles (hasta 1023px): ocupa todo el ancho sin márgenes */
@media (max-width: 1023px) {
  body {
    max-width: 100%; /* Usa todo el ancho disponible */
    margin: 0; /* Sin márgenes en pantallas pequeñas */
    padding: 0; /* Sin padding adicional en móviles */
  }
}

/* Aplicar la fuente elegante y tamaño pequeño a todos los elementos */
* {
  font-family: "Shadows Into Light", serif; /* Elegir una fuente legible y elegante */
  font-size: 18px; /* Tamaño pequeño */
  color: black;
}

/* Mejorar la legibilidad con un interlineado adecuado */

/* unvisited link */
a:link {
  color: blue;
}

/* visited link */
a:visited {
  color: blue;
}

/* mouse over link */
a:hover {
  color: grey;
}

/* selected link */
a:active {
  color: black;
}

.container {
  display: flex;
  justify-content: flex-start; /* Alineamos el contenido a la izquierda */
}

.github-widget {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 350px;
  display: flex;
  align-items: center;
}

.profile-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.profile-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-details {
  text-align: left;
}

.profile-details h2 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.profile-details p {
  margin: 5px 0;
}

#bio {
  font-style: italic;
  color: #666;
}

.github-logo {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  opacity: 0.7;
}

#game-container {
  width: auto;
  height: auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.game-link2 {
  display: inline-block;
  margin-top: 0px;
  padding: 5px 10px;
  background-color: #8e8f90;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 10px;
  width: 75px; /* Botones de 75px de ancho */
  text-align: center;
}

.profile-link {
  display: inline-block;
  margin-top: 5px;
  padding: 5px 10px;
  background-color: #a3a3a3;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 10px;
  width: 75px; /* Botones de 75px de ancho */
  text-align: center;
}
.profile-link:hover {
  background-color: #0056b3;
}
.game-image {
  /* 75 × 75 */
  width: 75px;
  height: 75px;
  border-radius: 4px;
  max-height: 80px;
  margin-bottom: 10px;
}

#lichess-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 65%; /* Relación de aspecto 16:9 */
  overflow: hidden;
  font-family: "Shadows Into Light", serif; /* Aplicar la fuente a todos los textos dentro del contenedor */
}

#lichess-container object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  /* No es necesario aplicar la fuente aquí ya que el contenido del object no la utilizará */
}

/* Si hay otros elementos de texto dentro de #lichess-container que deseas estilizar con la fuente */
#lichess-container a,
#lichess-container p,
#lichess-container h1 {
  font-family: "Shadows Into Light", serif;
}

/*
        .libutton {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 7px;
          text-align: center;
          outline: none;
          text-decoration: none !important;
          color: #ffffff !important;
          width: 100px;
          height: 32px;
          border-radius: 16px;
          background-color: #0A66C2;
          font-family: "SF Pro Text", Helvetica, sans-serif;
        }
*/

.linkedin-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #fff;
  border: 2px solid #0077b5;
  color: #0077b5;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.linkedin-button i {
  margin-right: 5px;
}

hr {
  border: none; /* Elimina el borde predeterminado */
  height: 1px; /* Define el grosor de la línea */
  background-color: #c2c2c2; /* Establece el color de la línea */
  width: 70%; /* Hace la línea más corta, ajusta el valor según tu preferencia */
  margin: 20px auto; /* Añade margen arriba y abajo, y centra la línea */
}