@font-face {
    font-family: 'JustAnotherHand-Regular';
    src: url('font/JustAnotherHand-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
body {
  font-family: 'JustAnotherHand-Regular', 'Times New Roman', serif;
  letter-spacing: 2px;
  max-width: 880px;
  margin: 30px auto;
  padding: 80px 40px 60px;
  flex-direction: column;
  line-height: 2;
  color: #303030;
  background: #e9e6db;

  position: relative;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 0px,
      rgba(255, 255, 255, 1) 1px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.03) 1px,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 0px,
      transparent 0px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.015) 0px,
      rgba(0, 0, 0, 0.015) 1px,
      transparent 1px,
      transparent 5px
    );

  background-blend-mode: multiply;
}

body::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 18px;

  background: radial-gradient(circle, #000 40%, transparent 50%) 0 50% / 32px 18px repeat-x;
  opacity: 0.45;
}

body::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 51.1%;
                             
  transform: translateX(-50%);
  width: 100%;
  height: 6px;

  background: repeating-linear-gradient(
    to right,
    #d0d0d0 0px,
    #f8f8f8 4px,
    #a8a8a8 8px,
    #6e6e6e 12px,
    transparent 12px,
    transparent 32px
  );
  border-radius: 3px;
  opacity: 0.7;
}


article {
  padding: 15px 0;
  border: none;
  background: transparent;
}

time {
  color: #666;
  font-size: 2.5rem;
  font-weight: 600;
}

p {
  font-size: 1.5rem;
  margin-top: 5px;
}