/* GENERAL STYLE */

* {
  box-sizing: border-box;
}

body {
  background-color: #34495e;
  color: snow;
  margin: 0;
  font-family: Verdana;
}

/* CONTENT */

/* Style the content */
.content {
  margin-left: 200px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: justify;
}

/*Style the text in content*/

.content p {
  font-family: Verdana;
  text-align: justify;
  color: snow;
}
.content p.text {
  font-family: Verdana;
  text-align: justify;
  color: snow;
}
.content p.cour {
  font-family: Courier;
  color: LightSalmon;
}

.content strong {
    color: #f1c40f
}

.content ul li {
  list-style-type: square; /* Cambia el punto por un cuadrado */
}


/* 1. Limpiamos el OL nativo y activamos el contador */
.content ol {
  list-style: none;          /* Quitamos el número feo nativo con el punto */
  counter-reset: mi-contador; /* Le decimos a CSS: "Empieza a contar desde 1" */
  padding-left: 0;
}

/* 2. Preparamos el hueco para el recuadro */
.content ol li {
  counter-increment: mi-contador; /* Suma +1 en cada fila */
  position: relative;
  margin-bottom: 12px;
  padding-left: 40px;  /* Espacio libre a la izquierda para meter el recuadro */
  line-height: 26px;   /* Centra el texto de la lista verticalmente */
}

/* 3. Dibujamos el recuadro azul perfecto */
.content ol li::before {
  content: counter(mi-contador); /* Pinta el número del contador automáticamente */
  position: absolute;
  left: 0;
  top: 0;
  
  /* Dimensiones del recuadro */
  width: 26px;
  height: 26px;
  
  /* Colores y bordes */
  background-color: #34495e; /* Tu azul brillante */
  border: 2px solid white;
  color: white;              /* Número en blanco */
  font-weight: bold;
  font-size: 13px;
  border-radius: 4px;        /* Bordes suavemente redondeados */
  
  /* Centrado perfecto del número dentro de su recuadro */
  display: flex;
  align-items: center;
  justify-content: center;
}

.content hr {
	border: 0; 
	height: 2px; 
	background-image: linear-gradient(to right, rgba(218, 165, 32, 0), rgba(218, 165, 32, 0.75), rgba(218, 165, 32, 0));
	margin: 5px 0;
}

/*Style images in content*/

.content img {
  border-radius: 4px;
}

/* Style links in content */

.content a:link {
  color: #f1c40f;
  text-decoration: none;
}

.content a:visited {
  color: lightblue;
  text-decoration: none;
}

.content a:hover {
  color: hotpink;
  text-decoration: underline;
}

/* Style the list */

.list {
  margin-left: 200px;
  padding-left: 60px;
  padding-right: 10px;
}

.list a:link {
  color: #f1c40f;
  text-decoration: none;
  }

.list a:visited {
  color: lightblue;
  }

.list a:hover {
  color: hotpink;
  text-decoration: underline hotpink;
}

/*---------------------------------*/

	.terminal-container {
            display: block;
            margin: 50px auto;         /* 50px de separación arriba/abajo y AUTO a los lados para centrar */
            width: fit-content;        /* Se ajusta al ancho del contenido */
            background-color: black;
            color: #00FF00;
            font-family: 'Courier', monospace;
		    font-size: 18px;
            padding: 20px;
            border: 1px solid #00FF00;
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
            text-align: left;          /* Mantiene el texto del menú alineado a la izquierda */
        }

        .terminal-container p { font-family: 'Courier', monospace; }
        .terminal-container ul li { list-style-type: none; /* Cambia el punto por un cuadrado */ }

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

        .terminal-container a:link,a:visited {
            color: #00FF00;
            text-decoration: none;
            line-height: 1.5;
        }
 
		.terminal-container a:visited {
  		color: #00FF00;
  		text-decoration: none;
		}
        
	.terminal-container a:hover {
            color: black;
			background-color: #00FF00;
        }
/*---------------------------------*/


/*---------------------------------*/

/* SIDE NAVIGATION */

/* Style the side navigation */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;


/* ─── AQUÍ ESTÁ LA SOLUCIÓN ─── */
  padding-top: 10px;    /* Espacio antes de la primera opción */
  padding-bottom: 30px; /* Espacio después de la última opción y el final de la pantalla */
  box-sizing: border-box; /* Crucial para que el padding no rompa el height: 100% */
}

/* Side navigation links */
.sidenav a:link,a:visited {
  color: snow;
  padding: 16px;
  text-decoration: none;
  display: block;
}

/* Change color on hover on links */
.sidenav a:hover {
  background-color: #34495e;
  color: snow;
  border: 3px solid black; /* Aquí añadimos el borde negro */
}

/*---------------------------------*/

/* OTHER STUFF ... */

/* Style the buttoms */

.buttoms {
  margin-left: 200px;
  padding-left: 10px;
  padding-right: 10px;
}

img {
  border-radius: 8px;
}

.buttoms a:hover {
  text-decoration: none;
}