/* Adapted from https://codepen.io/fyildiz1974/pen/VYjLvrX by Fatih YILDIZ (fthylda.com) */
.notebook {
  --f: 0.5;
  /* Fraction of line the hole occupies */
  --b: 2lh;
  /* Margin width (sidebar) */
  --l: 2px;
  /* Line thickness */

  --bs: 1lh;
  /*Extra space on left */
  position: relative;
  font-size: 20px;
  max-width: 18em;
  min-width: 12em;
  min-height: 20lh;
  margin: 0 auto;
  padding: 0.1lh 3ch 2lh calc(var(--bs) + var(--b) + 3ch);
  border-radius: 0 8px 8px 0;
  background-image:
    /* Vertical red line */
    linear-gradient(
      90deg,
      transparent calc(var(--bs) + var(--b)),
      #f00 calc(var(--bs) + var(--b)),
      #f00 calc(calc(var(--bs) + var(--b)) + 2px),
      transparent 0
    ),
    /* Lines */
    repeating-linear-gradient(
        transparent 0,
        transparent calc(1lh - 1px),
        #c5d1dc calc(1lh - 1px),
        #c5d1dc 1lh
      ),
    /* Binding */ linear-gradient(90deg, transparent var(--bs), #ffffff 0);
  background-position: left, right, left;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size:
    100% 100%,
    calc(100% - var(--bs)) 100%,
    100% 100%;
  /* Holes */
  mask: radial-gradient(
      calc(0.6 * 0.5 * 1lh) at calc(0.5 * (var(--b)) + var(--bs)),
      #0000 calc(100% - 1px),
      #000f
    )
    0 0.5lh/ 100% 2lh;

  transform: rotate(-9deg);
  font-family: "Pangolin", cursive;
  font-weight: 400;
  font-size: 12pt;
}

.notebook::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  right: calc(100% - var(--b) - var(--bs));
  height: 100%;
  background: 
    /* Rings */ repeating-linear-gradient(
      #f7f7f7 0lh,
      #d9d9d9 0.1lh,
      #616161 0.2lh,
      transparent 0.2lh,
      transparent 0.3lh,
      #f7f7f7 0.3lh,
      #d9d9d9 0.4lh,
      #616161 0.5lh,
      transparent 0.5lh,
      transparent 2lh
    )
    0 1.2lh / calc(var(--bs) + var(--b) * 0.5) 100% no-repeat;
}

.notebook p {
  margin-top: 3px;
  margin-bottom: -3px;
}

.notebook ul {
  margin-left: 0px;
  padding-left: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
}

.notebook h1 {
  margin-bottom: 0px;
  margin-top: 0.5lh;
  height: 1lh;
}

.notebook .IconInline {
  height: 0.8lh;
  display: inline;
}