/* Centrado del .container en el viewport */
body {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  min-height: 100vh; /* Asegura que el body ocupe toda la altura del viewport */
}
/* Estilo del contenedor de botones */
.botones {
  width: 100%; /* Ocupa todo el ancho del .container */
  list-style: none;
  cursor: url(../assets/cursorWhite.png) 16 16, auto !important;
  user-select: none;
}

.botones ul {
  display: flex; /* Coloca los botones en fila */
  justify-content: space-between; /* Espacio entre los botones */
  padding: 0;
  margin: 0;
  cursor: url(../assets/cursorWhite.png) 16 16, auto !important;
  list-style: none;
}

.botones li a {
  text-decoration: none;
  color: #ffffff;
  font-size: 14px;
  padding: 5px 10px; /* Espaciado interno */
  border-radius: 4px;
  list-style: none;
  cursor: url(../assets/cursorWhite.png) 16 16, auto !important;
}

/* Hover para los elementos de la lista */
.botones li a:hover {
  color: #007bff;
}

.grupo ul {
  display: flex; /* Coloca los botones en fila */
  padding: 0;
  margin: 0;
  cursor: url(../assets/cursorWhite.png) 16 16, auto !important; /* Cursor personalizado */
  list-style: none;
  margin-bottom: 5px;
  user-select: none;
}

.grupo li a {
  text-decoration: none;
  color: #ffffff;
  font-size: 14px;
  border-radius: 4px;
  cursor: url(../assets/cursorWhite.png) 16 16, auto !important;
}
.grupo li a:hover {
  color: #007bff;
}
.container {
  display: flex;
  justify-content: center; /* Centra horizontalmente el contenido interno */
  align-items: center; /* Centra verticalmente el contenido interno */
  width: 190px; /* Ancho fijo */
  height: 230px; /* Altura fija */
  border: 4px solid #00000030;
  border-style: dotted;
  border-width: 1px;
  background: #00000088;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.32);
  z-index: 100;
  border-radius: 8px;
  transform: translatey(50px);
  flex-direction: column;
  padding: 6px;
  background-image: url(../assets/dot.png);
}

.sub-container ul {
  list-style: none;
  display: flex; /* Coloca los elementos en fila */
  flex-direction: column; /* Coloca los elementos en columna */
  margin: 0;
  padding: 0;
  align-items: center;
  user-select: none;
}

/* Estilo del sub-contenedor */
.sub-container {
  height: 180px; /* Altura fija para el área desplazable */
  overflow-y: hidden; /* Habilita el scroll vertical */
  display: flex;
  flex-direction: column; /* Coloca los elementos en columna */
  gap: 10px; /* Espacio entre los elementos */
  width: 100px;
  box-sizing: border-box; /* Incluye el padding en el cálculo del tamaño */
  padding-right: 2px;
}
.sub-container:hover {
  overflow-y: auto; /* Habilita el scroll vertical al pasar el mouse */
  margin: 0px;
  padding: 0px;
}

.sub-container li a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-size: 16px;
  transition: color 0.3s ease; /* Transición suave para el color */
  cursor: url(../assets/cursorWhite.png) 16 16, auto !important;
}

/* Hover para los elementos de la lista */
.sub-container li a:hover {
  color: #007bff;
}

/* Personalización del scrollbar */
.sub-container::-webkit-scrollbar {
  width: 2px; /* Ancho del scrollbar */
}

.sub-container::-webkit-scrollbar-track {
  background: #00000000;
  border-radius: 4px;
}

.sub-container::-webkit-scrollbar-thumb {
  background: rgb(255, 255, 255);
  border-radius: 4px;
  height: 20px;
  scrollbar-width: thin;
  transition: transform 0.3s ease;
}

.sub-container::-webkit-scrollbar-thumb:hover {
  background: rgba(170, 169, 169, 0.959); /* Color de la barra de desplazamiento al pasar el mouse */
  transform: scale(1.1);
}
.sub-container::-webkit-scrollbar-thumb {
  clip-path: inset(10px 0 10px 0); /* Recorta los bordes superior e inferior */
}

#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
}

/* Estilo del div de nevermore */
.nevermore {
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: auto; /* Altura automática basada en la proporción de la imagen */
  z-index: 11;
}

.nevermore img {
  width: 100%;
  height: auto;
}

hr {
  width: 140px;
  margin: 0px 0px 20px 0px;
}