div {
  border: 1px solid black;
  /* margin: 3px; */ /* shift + alt + A comenta el codigo seleccionado xd */
}

/*
machete: margin es la distancia desde la linea que delimita a un div hasta el siguiente elemento (probablemente
la linea que delimita otro div o el margin del otro elemento, buscar)
padding: distancia interna desde la linea de un div hasta su contenido (ej. su texto)
*/

/*
div {
  border-top: 5px solid red;
  border-bottom: 2px dotted green;
  border-left: 1px dashed blue;
  border-right: none;
}
*/

/*
* {
box-sizing: border-box;
*/

/* body {
  background-size: 20px 20px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px),
  background-color: black;
} */

/*
* {
  background: linear-gradient(
  to bottom,
  rgba(255,255,255,0.7),
  rgba(255,255,255,0.2)
),
linear-gradient(
  to bottom,
  #c6f061,
  #9ed62a
);
}
*/ /* esto para ver como divide el html los bloques de toda la pagina */

body {
  /* background-image: url(imagenes/multi-color-gingham.jpg); */
  background-repeat: repeat;
  
}

.main {
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 650px;
  margin: 0 auto; /* hace que todos los div tengan espacio entre si */
  padding: 10px;
  border: 1px blue solid; /* el borde de todo el bloque */
}

.cabecera {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  border: 1px green solid;
  margin-top: 0;
  margin-bottom: 10px;
  box-shadow: 0 5px 5px rgba(129, 129, 129, 0.15);

  /* gloss effect tipo wii fit plus xd */
  background: linear-gradient(
  to bottom,
  rgba(255,255,255,0.7),
  rgba(255,255,255,0.2)
),
linear-gradient(
  to bottom,
  #c6f061,
  #9ed62a
);

}

.orden {
  display: flex;
  border: none;
  gap: 6px; /* espacio entre el div de la hora y el diario */
}

.side1 {
  border: 1px solid red;
  width: 210px; /* ancho determinado por mi */
  padding: 10px; /* delimita la distancia entre el borde del bloque izq y el borde interior encerrado de la hora */
  /* puse padding sin -top -bottom etc porque es el mismo valor para los 4 bordes (top, bottom, left, right) */
  /* text-align: center; */
}

.hora {
  padding: 5px;
  line-height: 7px;
  border: 1px solid pink;
  display: flex;
  white-space: nowrap;
}

.hora marquee {
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.filler {
  padding: 5px;
  margin-top: 10px;
}

.diario {
  flex: 1; /* rellena lo que sobra entre side1 y el resto */
}

.diarioheader {
  padding-left: 5px;
}

.notas {
  padding-left: 5px;
  padding-top: 5px;
}

.footer {
  padding-left: 5px;
  margin-top: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/*  scrollbar  */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #e6f9b5;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#b8e35c, #9ed62a);
  border-radius: 10px;
}
/* scrollbar */