style.css

@import url('https://fonts.googleapis.com/css2?family=Work+Sans');
:root {                                     /* Colores basicos para usar a lo largo del proyecto */
    --azul: #0277bd;
    --gris: #646769;
    --fondo: rgb(226, 226, 226);
  }
body {
    font-family: 'Work Sans', sans-serif;
    background-color: var(--fondo);
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;                 /* Cada ancho o alto de los elementos incluye el margin y el padding en la medida final */
}
h2, h3, h4, label{
    padding: 0 10px;                        /* Espaciado a los costados */
}
h4, h5{
    color: var(--gris);
    margin: 10px 0;                         /* Espaciado arriba y abajo */
}
hr{
    margin: 10px;                           /* Divisor tiene una separacion por todos lados */
}
.navbar{
  position: fixed;                          /* posicion fija en la pantalla */
  z-index: 1;                               /* Va a estar arriba de los demas elementos */
  display: block;                           /* El unico elemento en la linea */
  width: 100%;
  background-color: var(--azul);
  padding: 0 20px;
  box-shadow: 0 0 8px var(--gris);          /* sombra leve bajo la barra azul */
  color: white;                           /* color que afecta al texto y los iconos */
}
.titulo{
  font-weight: 500;                         /* se afina la letra para contrarestar el estilo de h2 */
  float: left;
}
.activarMenu{
  display: none;                            /* el icono de menu no se va a mostrar */
}
.col {
  background-color: white;
}
.colTabladecontenido{
  position: fixed;
  overflow-y: scroll;                       /* permite que, aun siendo un div fijo, se pueda hacer scroll vertical*/
  top: 70px;                                /* la position fija comienza 70px alejada del borde superior */
  bottom: 0px;                              /* la position fija comienza pegada al borde inferior */
  padding-bottom: 50px;                     /* espacio en blanco para que al hacer scroll el contenido quede mas arriba */
  max-width: 220px;                         /* se limita el ancho para que no crezca con el texto interior */
}
.colContenido{
  margin-left: 230px;                       /* espacio a la izquierda para no superponerse con .colTabladeContenido */
  margin-right: 10px;
  padding-bottom: 50px;
}
.enlace {
  padding: 0 10px 5px;
  display: block;
  text-decoration: none;                    /* le quita el subrayado a los links */
  color: var(--gris);
  word-wrap: break-word;                    /* si el texto es mas ancho que el div, continua abajo */
}
.enlace:hover{                              /* al pasar sobre un enlace cambia el color de la letra, el fondo y el peso */
  color: var(--azul);                       
  background-color: #bad7e5b2;
  font-weight: 700;
}
.anclajeLink{
  position:relative;
  top:-100px
}
.articulo{
  padding: 10px;
}
.row{
  margin-top: 90px;                         /* se hace espacio arriba para el navbar */
  position: absolute;                       /* toma su posicion dentro del div padre */
  display: flex;                            /* permite que colTabladeContenido tome un ancho y colContenido ocupe el resto */
}
.imagenes{
  text-align: center;                       /* Las imagenes comienzan a acomodarse desde el centro */
}
img{
  max-height: 200px;                        /* Las imagenes tendran un alto max de 200px, y se separan de las demas imagenes 10px hacia la derecha y abajo */
  margin-bottom: 10px;
  margin-right: 10px;
}
.bot{
  position: fixed;
  bottom: 90px;
  right: 90px;
  height: 50px;
  width: 50px;
  transition: all 0.3s;
  /* padding: 20px; */
}
.bot:hover{
  transform: scale(1.3) rotate(-5deg);
}

/* ↓↓↓↓ COLAPSAR ARTICULOS DE AYUDA ↓↓↓↓*/
/* codigo copiado de https://codepen.io/jason-knight/pen/ZEWPPVZ */

.toggle_collapse {
  display:block; 
}

.toggle_collapse, /* hide off screen */
.toggle_collapse + *  .collapseAfter ~ * {
	position:absolute;
	top:-999em;
	left:-999em;
}

.toggle_collapse:checked + *  .collapseAfter ~ * {
  position:static;
}

.toggle_collapse + * + label {
  display:inline-block; /* make visible for screen media */
  color:var(--azul);
}

.toggle_collapse + * + label:before {
	content:"Mostrar más";
}

.toggle_collapse:checked + * + label:before {
	content:"Mostrar menos";
}

.toggle_collapse + * + label:after {
	content:"\25BC";
	display:inline-block;
	padding:0.4em 0 0 0.3em;
	vertical-align:top;
	font-size:0.625em;
}

.toggle_collapse:checked + * + label:after {
	content:"\25B2";
}

/* ↑↑↑↑↑↑ COLAPSAR ARTICULOS DE AYUDA ↑↑↑↑↑↑*/

/* Estos cambios toman efecto cuando la pantalla tiene un ancho menor a 600px */
@media only screen and (max-width: 600px) {
  .colTabladecontenido{
      display: none;                        /* Desaparece la tabla de contenido */
  }
  .activarMenu{
      padding: 10px 0;
      font-size: 30px;
      float: right;                         /* Muestra el icono de menu desplegable a la derecha*/
      display: block;                       /* unico elemento de la linea pero no compite coon el .titulo ya que ambos tienen float */
  }
  .colContenido{
      width: 95%;
      margin-left: 10px;                    /* La columna con el contenido principal ocupa casi todo el ancho al desaparecer la tabla de contenido */
  }
}