:root {
  --h1_font_size: 1.73vw;
  --h1_height: 10vw;
  --h1_width: 91vw;
  --vertical_space: 3.2vw;
  --font_size: 2vw;
  --books-size: 3vw;
  --books-width: 68.4vw;

  /* --h1_font_size_w: 1.73vw;
  --h1_height_w: 10vw;
  --h1_width_w: 91vw;
  --vertical_space_w: 2.2vw;
  --font_size_w: 40vw;
  --books-size_w: 1.5vw;
  --books-width_w: 34.3vw; */

  --font_monospace: 'Courier New', Courier, monospace;
}

/* ***************** */
/* General site-wide */
/* ***************** */

/* custom styles here */

body, h1, h2, h3, h4, h5, h6 {
  font-family: monospace;
}

h2 {
  color: var(--pico-color-yellow-100);
}

.large {
  font-size: var(--font_size);
}

/* ************* */
/* Cookblub logo */
/* ************* */

code {
  background-color: inherit;
}

.cb-word-container {
  display: flex;
  gap: 2em;
}

.cb-word {
  display: flex;
  flex-basis: 50%;
}

.cb-word-cook {
  justify-content: right;
}

@media (max-width: 860px) {
  .cb-word-container {
    flex-wrap: wrap;
    font-size: .7em;
  }
  .cb-word {
    flex-basis: 100%;
  }
  .cb-word-cook, .cb-word-blub {
    justify-content: center;
  }
  :root {
    --font_size: 3.5vw;
  }
}

/* ***** */
/* Table */
/* ***** */

table {
  border: white 1px dashed;
}

th, td {
  border-bottom: var(--pico-border-width) dashed var(--pico-color);
}


/* *******/
/* Banner */
/* ****** */

aside {
  margin-top: var(--vertical_space);
  text-align: center;
}

@media screen and (min-width: 500px) {
  :root {
    --font_size: 2vw;
  }
  aside {
    margin-bottom: var(--vertical_space);
  }

  /* cook blub home page left */

  aside:nth-of-type(1)::before {
    content: "--";
    color: var(--pico-color-green-150);
  }

  aside:nth-of-type(1) p::before {
    content: "==== ";
    color: var(--pico-color-yellow-100);
  }

  /* cook blub home page right */

  aside:nth-of-type(1)::after {
    content: "--";
    color: var(--pico-color-green-150);
  }

  aside:nth-of-type(1) p::after {
    content: " ====";
    color: var(--pico-color-yellow-100);
  }

  aside:nth-of-type(2) p {
    color: var(--pico-color-fuchsia-450);
    font-weight: 800;
  }

  aside:nth-of-type(1)::before {
    content: "-------------";
  }

  aside:nth-of-type(1)::after {
    content: "-------------";
  }

  aside p {display: inline;}
}

/* ********** */
/* Link lists */
/* ********** */

.home ul {
  margin-top: var(--vertical_space);
  margin-bottom: var(--vertical_space);
  text-align: center;
}

.home ul, .home li {
  list-style: none;

  padding: 0;
}

.home li {
  font-size: var(--font_size);
}

nav li {
  display: block;
  clear: both;
  width: 100%;
}

li:before {
  content: "<<< ";
  color: var(--pico-color-cyan-100);
}

li:after {
  content: " >>>";
  color: var(--pico-color-cyan-100);
}

a {
  color: white;
}

/* *************** */
/* Books Ascii Art */
/* *************** */

figure.books {
  white-space: pre;
  font-family: var(--font_monospace);
  font-size: var(--books-size);
  font-weight:400;
  line-height: 1em;
  width: var(--books-width);
  margin: 0 auto;
}

span.ascii-letter-line {
  display: block;
}

/* ************ */
/* Related page */
/* ************ */

article > header {
  color: var(--pico-color-fuchsia-450);
  font-weight: 700;
  font-size: 1.8vw;
}

article {
  a {
    color: var(--pico-color-green-150);
  }
  ul {
    text-align: center;
  }
  li {
    list-style: none;
  }
}