/* Default appearance settings outside of all other classes */

:root {

  font-size: 7mm;

  hyphens: auto;

  font-family: bord, Georgia, "Times New Roman", Times, serif;

  background-color: #162130;

  color: #d3d7dd;

  margin: 0;

  padding: 0;

}

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

/* Custom fonts licensed from Chequered Ink Ltd.*/

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

/* Super-heavy bold font for titles*/

@font-face {

  font-family: juice;

  src: url(fonts/gooseberry-juice.otf);

}

/* Smallcaps boldish handwriting font, also for titles and subtitles */

@font-face {

  font-family: wolf;

  src: url(fonts/wolfganger.otf);

}

/* Bold serif font for subtitles and main text */

@font-face {

  font-family: bord;

  src: url(fonts/smorgasbord.otf);

}

/* Skinny and fun handwriting font for decorations */

@font-face {

  font-family: thinly;

  src: url(fonts/thinly-handled.otf);

}

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

/* Fancy and colorful designs, makes any element of the html look cute */

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

/* Containers are like boxes with other boxes tetris'd inside */

.container {

  grid-template-columns: 20% 70% 10%;

  width: 100%;

  display: grid;

}

/* A cute blackboard, like those standees you find outside cafés */

.card {

  display: box;

  background-color: #322f36;

  border: solid 0.2rem #767676;

  border-radius: 5mm;

  padding: 0.7rem;

  margin: 1rem;

  /*width: clamp(500px, 70%, 800px);*/

}

/* Asides and parentheticals that look like hastily written notes */

.sillyNote {

  font-family: thinly, cursive, sans-serif;

  color: #b0ac99;

}

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

/* Formatting for font changes and size shifting */

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

/* Headings sizes, styles, and colors */

/* Super extra jumbo titles */

h1 {

  font-family: juice, sans-serif;

  color: #d4996c;

  text-align: center;

  font-size: 2.2rem;

  margin: 1rem auto 0;

}

/* Main titles but slightly smaller than the super extra jumbo ones */

h2 {

  font-family: juice, sans-serif;

  color: #b0d1c3;

  text-align: center;

  font-size: 2rem;

  margin: 1rem auto 0;

}

/* Handwritten titles, chunkier than the other handwriting fonts */

h3 {

  font-family: wolf, sans-serif;

  color: #b0ac99;

  text-align: center;

  font-size: 1.8rem;

  font-weight: bolder;

  margin: 1rem auto 0;

}

/* Skinny, handwritten subtitles */

h4 {

  font-family: thinly, cursive, sans-serif;

  color: #b0ac99;

  text-align: center;

  font-size: 1.6rem;

  font-weight: bold;

  margin: 0 auto 1rem;

  padding: 0;

}

/* Smaller, less visible subtitles, for gags */

h5 {

  font-family: thinly, cursive, sans-serif;

  color: #677487;

  text-align: center;

  font-size: 1.4rem;

  font-style: italic;

  margin: 0;

  padding: 0;

}

/* Barely-bigger basic serif text for extreme shouting */

h6 {

  font-family: bord, Georgia, serif;

  color: #d4996c;

  font-size: 1.2rem;

  margin: 0;

  padding: 0;

}

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

/* Text flourishes to grab attention */

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

/* Paragraphs get a leading indent */

p {

  text-indent: 2em;

}

/* Color highlight for special text */

a,

em,

strong,

sup,

sub {

  color: #d4996c;

}

/* Looks like I crossed out a handwritten note */

del {

  font-family: thinly, cursive, sans-serif;

  color: #b0ac99;

}

nav {

  display: block;

  font-family: thinly, cursive, sans-serif;

}

/* unordered lists in the nav section have no doohickeys and are stacked

on top of each other with a background color. */

nav ul {

  list-style-type: none;

}

ul li {

  text-align: left;

}

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

/* Viewport-dependant grid layouts */

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

@media (min-width: 849px) {

  header {

    grid-column: span 3;

  }

  nav {

    grid-column: 1;

    grid-row: 2;

  }

  footer {

    grid-column: span 3;

    grid-row: 3;

  }

}