:root {
  --main-bg-color: #FFFCF5;
}
* {
    box-sizing: border-box;
}
body {
    font-family: "EB Garamond", serif;
    font-size: 20px;
    background-color: var(--main-bg-color);
    max-width: 840px;
    margin: 0 auto;
    padding: 0 10px;
}
pre, form {
    font-family: "Atkinson Hyperlegible Mono", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 0.8em;
}
pre {
    white-space: break-spaces;
}
form {
    border: 1px solid black;
    padding: 10px;
}

/* Paper effect from https://codepen.io/martinwolf/pen/GRaWPy */
.box {
  position: relative;
  margin: 40px auto;
  max-width: 640px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 5px 14px rgba(0,0,0,.1);
  display: block;
}
div.box {
    padding: 10px 20px;
}

.box::before,
.box::after {
  content: '';
  position: absolute;
  bottom: 13px;
  width: 40%;
  height: 10px;
  box-shadow: 0 5px 14px rgba(0,0,0,.7);
  z-index: -1;
  transition: all .3s ease-in-out;
}

.box::before {
  left: 15px;
  transform: skew(-5deg) rotate(-5deg);
}

.box::after {
  right: 15px;
  transform: skew(5deg) rotate(5deg);
}

.box:hover::before,
.box:hover::after {
  box-shadow: 0 2px 14px rgba(0,0,0,.4);
}

.box:hover::before {
  left: 5px;
}

.box:hover::after {
  right: 5px;
}

/* Glyph, by Harry Roberts */
hr {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr:after {
    content: "✙";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: var(--main-bg-color);
}

.drop:first-letter {
    font-family: "Manufacturing Consent", system-ui;
    font-weight: 400;
    font-style: normal;
    initial-letter: 3 1;
}