/* Global Styles */
body {
  background-color: #000;
  color: #8f1fcf;
  font-family: 'JetBrains Mono', Courier, monospace;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.jetbrains-mono-normal {
  font-family: "JetBrainsMono Nerd", serif;
}

@font-face {
  font-family: "JetBrainsMono Nerd";
  src: url(assets/fonts/JetBrainsMonoNF.ttf) format('truetype');
  font-optical-sizing: none;
  font-weight: 400;
  font-style: normal;
}

/* Terminal */
.terminal {
  background: #111;
  width: 85%;
  max-width: 850px;
  height: 400px;
  border: 2px solid #a63ae6;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  box-shadow: 0 0 10px #c263f9;
  border-radius: 15px;
}

#output {
  flex-grow: 1;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 18px;
  padding: 5px;
  color: #c263f9;
}

/* Input line */
.input-line {
  display: flex;
  align-items: center;
}

.prompt {
  color: #b246f2;
  margin-right: 5px;
}

#cmd-input {
  background: none;
  border: none;
  color: #b246f2;
  outline: none;
  width: 100%;
  font-size: 14px;
  min-height: 30px; /* Para asegurarnos de que el div sea visible */
}

/* Navbar */
.navbar {
  background-color: #111; /* Color de fondo oscuro */
  overflow: hidden;
  text-align: center;
  padding: 10px 0;
  position: fixed; /* Fija la barra en la parte superior */
  top: 0; /* Pegada a la parte superior */
  width: 100%; /* Asegura que ocupe todo el ancho */
  z-index: 1000; /* Para asegurarse de que esté por encima de otros elementos */
}

.nav-btn {
  background-color: #222; /* Fondo oscuro */
  border: none;
  color: white; /* Texto blanco */
  padding: 10px 15px;
  text-align: right;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 0 10px;
  border-radius: 2px;
  cursor: pointer;
}

/* Efecto al pasar el ratón sobre los botones */
.nav-btn:hover {
  background-color: #d59cfc; /* Fondo morado claro */
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
  width: 12px; /* Ancho de la barra de desplazamiento */
  height: 12px; /* Altura de la barra horizontal (si existe) */
}

::-webkit-scrollbar-thumb {
  background-color: #8f1fcf; /* Color del thumb */
  border-radius: 10px; /* Bordes redondeados */
  border: 3px solid #111; /* Espacio alrededor del thumb */
}

::-webkit-scrollbar-track {
  background: transparent; /* Fondo de la pista */
  border-radius: 10px;

}

::-webkit-scrollbar-button {
  display: none; /* Ocultar los botones */
  
}

/* Estilo para la barra de desplazamiento en Firefox */
html {
  scrollbar-width: thin; /* Puede ser 'auto', 'thin' o 'none' */
  scrollbar-color: #8f1fcf transparent  ; /* Color del thumb y color de la pista */
}

.cmd-link {
  color: #c263f9;
  cursor: pointer;
  text-decoration: underline;
}

.cmd-link:hover {
  color: #fff;
  text-decoration: none;
}

/* Botón de limpieza */
#clear-btn {
  background: none;
  border: none;
  color: #b246f2; /* Color verde para coincidir con la terminal */
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px; /* Espacio entre el input y el botón */
  transition: color 0.3s;
}

#clear-btn:hover {
  color: #d59cfc; /* Cambiar a blanco al pasar el cursor */
}