/*
 * Color Palette (Darker -> Lighter)
 *
 * #353636
 * #c66a49
 * #f6a63c
 * #e8b277
 * #f1d4a4
 */

/* Fonts */

body, h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Helvetica, Arial, sans-serif;
}

p {
  font-size: 150%;
}

/* Page Layout */

body {
  margin: 2em;
}

/* Title Layout */

h1 {
  text-align: center;
  padding: 0.25em;
  margin-inline-start: 32%;
  margin-inline-end: 32%;
  transform: skew(-15deg);
}

/* Dark Mode */

@media (prefers-color-scheme: dark) {
  body {
    background-color: #353636;
  }
  h1 {
    color: #c66a49;
    background-color: #e8b277;
    opacity: 0.9;
    box-shadow: 2px 2px 6px 2px #f1d4a4;
  }
  h2 {
    color: #e8b277;
  }
  p {
    color: #f1d4a4;
  }
}