/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


:root {
        --titlebar-gradient: linear-gradient(90deg, #6a1535, #b23965, #f9a5b9);
        --dialog-blue: #6a1535;
        --dialog-accent: white; /* color of text on diaglog blue */
        --titlebar-color: white; /* reccomended to change so its easy to read on titlebar color */
        --player-image: url(https://supermassiveodhorse.nekoweb.org/ico.png);

    /*** 98 css styling ***/
    /* while some of these may specify a single element, theyre used across mulitple */
        --surface: #c0c0c0;
        --button-highlight: #ffffff;
        --button-face: #dfdfdf;
        --button-shadow: #808080;
        --light-button-shadow: #a9a9a9;
        --window-frame: #0a0a0a;
        --border-field: inset -1px -1px var(--button-highlight),
            inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
            inset 2px 2px var(--window-frame);
    }

    @font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://files.catbox.moe/qgjjre.woff") format("woff");
  src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Pixelated MS Sans Serif";
    src: url("https://files.catbox.moe/z7csle.woff") format("woff");
    src: url("https://files.catbox.moe/moqhx6.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    }

    #musicplayer {
  font-family: "Pixelated MS Sans Serif", Arial;
  -webkit-font-smoothing: none;
  font-size: 11px;
  color:var(--window-frame);
  width: fit-content;
  border:var(--window-frame) solid 1px;
  margin:0 auto;
    box-shadow: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face), inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
  background: var(--surface);
  padding: 3px;
  width: 260px;
    }

    .title-color {  
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
    background: var(--titlebar-gradient);
    margin-bottom: 2px;
    font-weight: bold;
}

.actual-title {
    color:var(--titlebar-color);
  display: flex;
  gap: 5px;
}

.seeking {
    font-weight: normal;
    font-size: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
    gap: 5px;
    margin: 12px 0;
}

.player-flex {
    display: flex;
    gap: 3px;
}

.player-main {
    width: calc(100% - 100px);
    margin-top: 1px;
}

.player-icon-holder {
  border: 2px solid var(--surface);
  width:95px;
  height:95px;
  padding: 1px;
  background-image:linear-gradient(-45deg, var(--button-face) 50%, var(--window-frame) 50%);
  background-size:cover;
  background-repeat:no-repeat;
  border-width:1px;
  border-style:solid;
  border-color: var(--button-shadow) var(--button-highlight) var(--button-highlight) var(--button-shadow);
  
  overflow: hidden;
  position:relative;
  z-index: 2;
}

.player-icon {
    background-image:var(--player-image);
    background-size: contain;
    background-repeat: no-repeat;
  width:95px;
  height:95px;
  display: display;
}

/* BELOW IS LARGELY RIPPED FROM 98 CSS */
.track-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  border-radius:0;
  box-sizing: border-box;
  outline:0;
  
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  position: relative;
  padding: 3px 4px;
  padding-right: 32px;
  background-image: url("https://loveberry.nekoweb.org/assets/musicplayer/button-down.svg");
  background-position: top 2px right 2px;
  background-repeat: no-repeat;
  width:100%;

  box-shadow: var(--border-field);
  background-color: var(--button-highlight);
  height: 21px;

  font-family: "Pixelated MS Sans Serif", Arial;
  -webkit-font-smoothing: none;
  font-size: 11px;
  font-weight: lighter;
}

.track-select:focus {
  color: var(--dialog-accent);
  background-color: var(--dialog-blue);

}
.track-select:focus option {
  color: var(--window-frame);
  background-color: var(--button-highlight);  
  outline: 1px;
  border: none;
}

.track-select:active {
  background-image: url("https://loveberry.nekoweb.org/assets/musicplayer/button-down-active.svg");
}

/* input */
#musicplayer input[type="range"] {  
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

#musicplayer input[type="range"]:focus {
  outline: none;
}

#musicplayer input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  height: 21px;
  width: 11px;
  background: url("https://loveberry.nekoweb.org/assets/musicplayer/indicator-horizontal.svg");
  transform: translateY(-8px);
  box-shadow: none;
  border: none;
}

#musicplayer input[type="range"].has-box-indicator::-webkit-slider-thumb {
  background: url("https://loveberry.nekoweb.org/assets/musicplayer/indicator-rectangle-horizontal.svg");
  transform: translateY(-10px);
}

#musicplayer input[type="range"]::-moz-range-thumb {
  height: 21px;
  width: 11px;
  border: 0;
  border-radius: 0;
  background: url("https://loveberry.nekoweb.org/assets/musicplayer/indicator-horizontal.svg");
  transform: translateY(2px);
}

#musicplayer input[type="range"].has-box-indicator::-moz-range-thumb {
  background: url("https://loveberry.nekoweb.org/assets/musicplayer/indicator-rectangle-horizontal.svg");
  transform: translateY(0px);
}

#musicplayer input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: var(--window-frame);
  border-right: 1px solid var(--button-shadow);
  border-bottom: 1px solid var(--button-shadow);
  box-shadow: 1px 0 0 var(--button-highlight), 1px 1px 0 var(--button-highlight), 0 1px 0 var(--button-highlight), -1px 0 0 var(--light-button-shadow),
    -1px -1px 0 var(--light-button-shadow), 0 -1px 0 var(--light-button-shadow), -1px 1px 0 var(--button-highlight), 1px -1px var(--light-button-shadow);
}

#musicplayer input[type="range"]::-moz-range-track {
    width: 100%;
    height: 2px;
    box-sizing: border-box;
    background: var(--window-frame);
    border-right: 1px solid var(--button-shadow);
    border-bottom: 1px solid var(--button-shadow);
    box-shadow: 1px 0 0 var(--button-highlight), 1px 1px 0 var(--button-highlight), 0 1px 0 var(--button-highlight), -1px 0 0 var(--light-button-shadow),
    -1px -1px 0 var(--light-button-shadow), 0 -1px 0 var(--light-button-shadow), -1px 1px 0 var(--button-highlight), 1px -1px var(--light-button-shadow);
}

.window-button {
    background: var(--surface);
    border: none;
    border-radius: 0;
    box-shadow: inset -1px -1px var(--window-frame),inset 1px 1px var(--button-highlight),inset -2px -2px var(--button-shadow),inset 2px 2px var(--button-face);
    box-sizing: border-box;
    color: inherit;
    text-shadow: 0 0 var(--window-frame);
}

.window-button:active {
  box-shadow: inset -1px -1px var(--button-highlight), inset 1px 1px var(--window-frame), inset -2px -2px var(--button-face), inset 2px 2px var(--button-shadow);
  text-shadow: 1px 1px var(--window-frame);
}

.window-button:focus  {
  outline: 1px dotted #000;
  outline-offset: -4px;
}
.player-buttons {
    display: flex;
    gap: 10px;
    margin: 5px 5px 0 5px;
}
.player-buttons .window-button  {
    width: 33%;
    font-size: 10px;
    padding: 5px 10px;
}
.player-buttons .window-button svg {
   width: 15px;
   height: 15px;
}

.title-bar-controls {
    display: flex;
}
.close {
    margin-left: 2px;
    background-image: url("https://loveberry.nekoweb.org/assets/musicplayer/close.svg");
    background-repeat: no-repeat;
    background-position: top 3px left 4px;

    padding: 0;
    display: block;
    min-width: 16px;
    min-height: 14px;
}

.minimize {
  background-image: url("https://loveberry.nekoweb.org/assets/musicplayer/minimize.svg");
  background-repeat: no-repeat;
  background-position: bottom 3px left 4px;
    padding: 0;
    display: block;
    min-width: 16px;
    min-height: 14px;
}

.maximize {
  background-image: url("https://loveberry.nekoweb.org/assets/musicplayer/maximize.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
    padding: 0;
    display: block;
    min-width: 16px;
    min-height: 14px;
}

.titleweb {
    display: flex;
    justify-content: center; /* Lo centra horizontalmente */
    height: 90px;           /* Dale una altura si quieres centrarlo verticalmente en un bloque */
}

h1 {
  /* ... tus propiedades anteriores ... */
  font-family: 'Orbitron', sans-serif;
  font-size: 4rem;
  text-transform: uppercase;
  justify-content: center;
  
  /* Degradado Animado */
  background: repeating-linear-gradient(
    -45deg, 
    #035096 0%, 
    #7df9ff 25%, 
    #035096 50%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: slide 15s infinite linear;

  /* EL BORDE SE AGREGA AQUÍ */
  -webkit-text-stroke: 1px 
#103754; /* Grosor de 1px y color cian eléctrico */
  
  /* Brillo opcional para que el borde resalte */
  filter: drop-shadow(0 0 5px rgba(125, 249, 255, 0.8));
}

@keyframes slide {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.contenedor-center {
    display: flex;
    justify-content: center; /* Lo centra horizontalmente */
    align-items: center;     /* Lo centra verticalmente */
    height: 50px;           /* Dale una altura si quieres centrarlo verticalmente en un bloque */
}

/* Estilo para que el libro combine con el fondo espacial */
.contenedor-atabook {
    margin-top: 20px;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo ahumado para ver las estrellas detrás */
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #7df9ff; /* Borde cian eléctrico */
    box-shadow: 0 0 20px rgba(125, 249, 255, 0.2);
    overflow: hidden;
}

.contenedor-atabook iframe {
    width: 100%;
    height: 900px; /* Altura suficiente para leer los mensajes */
    border-radius: 10px;
    /* Esto ayuda a que el blanco del libro no brille demasiado */
    opacity: 0.9; 
}

/* BOTÓN DEL MENÚ (Solo se ve en móvil) */
.menu-toggle {
  display: none; /* Escondido en PC */
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 2000;
  background: #000;
  color: #7df9ff;
  border: 1px solid #7df9ff;
  padding: 10px 15px;
  font-family: 'Orbitron', sans-serif;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(125, 249, 255, 0.5);
}

/* CONFIGURACIÓN PARA MÓVILES */
@media (max-width: 768px) {
  .menu-toggle { display: block; } /* Aparece el botón */

  .sidebar {
    left: -200px; /* La mandamos fuera de la pantalla a la izquierda */
    transition: 0.4s; /* Animación suave al salir */
  }

  /* Clase que activaremos con JS para mostrarla */
  .sidebar.active {
    left: 0; 
  }

  .contenido {
    
    margin-left: 0 !important; /* El contenido ocupa toda la pantalla en móvil */
    padding: 70px 20px 20px 20px; /* Espacio arriba para que el botón no tape el título */
  }
}

body {
  background-color: #0b0e14; /* Color de respaldo por si la imagen tarda en cargar */
  color: #e0e0e0; /* Color de la letra */
  font-family: Verdana; /* Familia de Fuentes */
  background-image:url("2000sbackground.jpg"); /* Buscar la imagen y que el nombre coincida exactamente */
  background-repeat: no-repeat; /* Evita que la imagen se repita como mosaico */
  background-attachment: fixed;/* Fijamos el fondo (muy pro) */
  background-size:cover; /* Hace que la imagen cubra todo el espacio */
  background-position: center; /* Centrar la imagen*/
  cursor: url('https://file.garden/aa1pSHgnEzCVnhPq/Others/Skeletcursor.png'), auto;
}

/* Opcional: Cambia el cursor cuando pasas sobre links o botones */
a, button, .window-button {
    cursor: url('https://file.garden/aa1pSHgnEzCVnhPq/Others/Skeletpointer.png'), pointer;
}

p {
  
  color: #e0e0e0;
  padding: 10px; /* Espacio para el texto no quede pegado */
  font-family: "Rationale", sans-serif;
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.6;          /* Más espacio entre líneas para que sea fácil de leer */
  max-width: 800px;          /* Que el texto no sea eterno de ancho */
  margin: 10px auto;         /* Centra el bloque de texto */
}

.horse-center {
    display: flex;
    justify-content: center; /* Lo centra horizontalmente */
    height: 300px;           /* Dale una altura si quieres centrarlo verticalmente en un bloque */
}

.neocity-center {
    display: flex;
    justify-content: center; /* Lo centra horizontalmente */
    height: 50px;           /* Dale una altura si quieres centrarlo verticalmente en un bloque */
}


/* El contenedor PADRE que obliga a ponerse de lado */
.layout-principal {
  display: flex !important; /* El !important obliga a que se cumpla */
  min-height: 100vh;
}

/* La BARRA LATERAL */
.sidebar {
  width: 140px;
  background-color: rgba(10, 10, 20, 0.95);
  height: 100vh;
  position: fixed; /* Se queda fija a la izquierda */
  padding: 20px;
  border-right: 2px solid #7df9ff; /* Una línea neón para separar */
  z-index: 1000; /* Para que esté por encima de todo */
}

/* El CONTENIDO (donde está el texto y los efectos) */
.contenido {
  flex: 1; /* Ocupa el resto del espacio */
  margin-left: 180px; /* IMPORTANTE: Debe ser igual al ancho de la sidebar */
  padding: 50px;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.7); /* Para que se vea tu imagen de fondo */
}

/* Estilo para los enlaces del menú */
.sidebar nav a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 15px 10px;
  font-family: 'Rationale', sans-serif;
  font-size: 20px;
  border-bottom: 2px solid #244241;
}

.sidebar nav a:hover {
  color: #00d4ff;
  background-color: rgba(0,0,0,0.7);
}

.webring-container {
    /* 1. Centrado del bloque */
    display: block;
    margin: 17px auto; /* 'auto' a los lados centra el cuadro */
    width: fit-content; /* El cuadro se ajusta al tamaño del texto */
    min-width: 210px;
    
    /* 2. Estética Espacial */
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.6); 
    border: 1px solid #7df9ff;
    border-radius: 8px;
    text-align: center; /* Centra el texto y links dentro del cuadro */
    box-shadow: 0 0 15px rgba(125, 249, 255, 0.3);
    justify-content: center;
}

.webring-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    color: #7df9ff;
    letter-spacing: 4px;
    margin-bottom: 10px;
    justify-content: center;
}

.webring-links a {
    color: #ffaa00;
    text-decoration: none;
    font-family: 'Rationale', sans-serif;
    font-size: 2rem;
    margin: 0 10px;
    transition: 0.3s;
    justify-content: center;
}

.webring-links a:hover {
    color: #4000ff;
    text-shadow: 0 0 10px #4000ff;
    justify-content: center;
}

main{
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.6); 
    border: 2px solid #7df9ff;
    border-radius: 8px;
    text-align: center; /* Centra el texto y links dentro del cuadro */
    box-shadow: 0 0 15px rgba(125, 249, 255, 0.3);
    justify-content: center;
}

.rightsreserved {
    display: flex;
    font-family: 'Rationale', sans-serif;
    justify-content: center;
    height: 10px; 
}

.aboutmeinterests {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    padding: 40px;
    flex-wrap: wrap;
}

.side-box {
    position: relative;
    width: 280px;
    border: 1.5px solid #7df9ff;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 20px 10px 10px 10px; /* Ajustamos el padding para el scroll */
    box-shadow: 0 0 15px rgba(125, 249, 255, 0.2);
}

/* --- AQUÍ ESTÁ EL TRUCO DEL DESPLAZAMIENTO --- */
.list {
    max-height: 150px; /* Altura máxima para mostrar solo unos cuantos */
    overflow-y: scroll; /* Obliga a que aparezca la barra de desplazamiento */
    padding-right: 5px; /* Espacio para que la barra no tape el texto */
}

/* Personalización de la barra de desplazamiento (estilo neón) */
.list::-webkit-scrollbar {
    width: 6px;
}

.list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.list::-webkit-scrollbar-thumb {
    background: #7df9ff; /* Tu cian eléctrico */
    border-radius: 10px;
}

.about-box-title {
    position: absolute;
    top: -10px;
    background-color: #000;
    color: #7df9ff;
    padding: 0 10px;
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
}

.list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list li {
    font-family: 'Rationale', sans-serif;
    color: #fff;
    
}

/* Contenedor principal alineado a la izquierda */
.recursos-container-izq {
    display: flex;
    
    flex-direction: column; /* Lista vertical */
    align-items: flex-start; /* Todo pegado a la izquierda */
    gap: 14px;
    
    
}

/* Lista principal (el link) */
.recurso-principal {
    list-style: none;
    display: flex;
    flex-direction: column; /* Lista vertical */
    align-items: flex-start; /* Todo pegado a la izquierda */
    gap: 10px;
    
}



/* El link principal */
.recurso-principal a {
    font-family: 'Orbitron', sans-serif;
    color: #ffaa00; /*Anaranjado*/
    text-decoration: none;
    font-size: 1rem;
    transition: 0.3s;
}

.recurso-principal a:hover {
    color: #4000ff; /* Cambio de color a violeta oscuro */
    text-shadow: 0 0 10px #4000ff;
}

.recurso-desc li {
    position: relative;
    padding-left: 2px;
    color: #ffffff;
    font-family: 'Rationale', sans-serif;
    font-size: 1rem;
    opacity: 0.9;
}