:root {
  --black: #273540;
  --gray: #60717D;
  --light-gray: #B7C5D2;
  --white: #F6F6EE;
  --yellow: #EBEAA0;

  --pink-safe: #A92B55;
  --pink: #CD4472;
  --light-pink: #F2CBDA;

  --green-safe: #29611E;
  --green: #4C9136;
  --light-green: #B2DCA0;

  --blue-safe: #0E3B8A;
  --blue: #1B7AB4;
  --light-blue: #83CEDE;
}

@font-face {
  font-family: papermono; /* set name */
  src: url("/public/css/PaperMono-Regular.ttf"); /* url of the font */
}
@font-face {
  font-family: geist; /* set name */
  src: url("/public/css/Geist-VariableFont_wght.ttf"); /* url of the font */
}
@font-face {
  font-family: geist; /* set name */
  src: url("/public/css/Geist-Italic-VariableFont_wght.ttf"); /* url of the font */
  font-style: italic;
}
@font-face {
  font-family: relief; /* set name */
  src: url("/public/css/ComicRelief-Regular.ttf"); /* url of the font */
}
@font-face {
  font-family: relief; /* set name */
  src: url("/public/css/ComicRelief-Bold.ttf"); /* url of the font */
  font-weight: bold;
}

img { width: 100%; height: auto; }
a { color: var(--blue-safe); }
a:hover { text-decoration-style: wavy; }
p { margin: 0; padding: 0.5rem 0;}
p:first-of-type { padding-top: 0;}
p:last-of-type { padding-bottom: 0;}
h1 { margin: 0; }
/* h1,h2,h3,h4,h5,h6 { font-family: relief, geist, Arial, sans-serif;} */
code { font-family: papermono, Arial, sans-serif; }
html {
  font-family: geist, Arial, sans-serif;
  margin: 0; padding: 0;
  background-color: var(--white); color: var(--black);
  background-image: url("/public/img/paper.png"); background-blend-mode: overlay;
}
body {
  margin: 0; padding: 0; height: 100%;
}

footer {
  background-color: var(--black); color: var(--white);
  background-image: url("/public/img/paper-soft.png"); background-blend-mode: overlay;
  padding: 2rem;
  a { color: var(--light-blue);}
}

/* Big mobile */
@media screen and (min-width: 25rem) {
}
/* Tablet */
@media screen and (min-width: 40rem) {
}
/* Desktop */
@media screen and (min-width: 67rem) {
}