:root {
  --post-text-color: #1f1e1d;
  --post-text-size: 1.3em;

  --paper-color: #ece9e5;
  --paper-dot-color: #80808081;
  --paper-dot-size: 0.08em;
  --paper-shadow-color: #0000003d;
  --paper-outline-color: #daa26b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --post-text-color: #f5e7de;
    --paper-color: #3b3834;
    --dot-color: #80808081;
    --paper-outline-color: #966833;
  }
}


.grid-paper {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin: auto;
  max-width: 80rem;
  padding: 4rem 2rem;
  color: var(--post-text-color);
  font-size: var(--post-text-size);
  font-family: FuzzyBubbles, Georgia;
  filter: drop-shadow(0 5px 5px var(--paper-shadow-color));
}

.grid-paper::before {
  content: "";
  position: absolute;
  inset: 0;

  background-color: var(--paper-color);
  background-image: radial-gradient(
    circle,
    #8885 0 var(--paper-dot-size),
    transparent var(--paper-dot-size)
  );

  background-size: var(--post-text-size) var(--post-text-size);

  -webkit-mask-image: url("/assets/resources/blog/paper-mask.svg");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-type: luminance;

  mask-image: url("/assets/resources/blog/paper-mask.svg");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-type: luminance;

  z-index: -1;
}

.paper-content {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.paper-content p {
  line-height: var(--post-text-size);
  width: 100%;
}

.paper-content img {
    max-width: 400px;
}