:root {
  font-family: "Helvetica", 'Courier New', Courier, monospace;
}

#post-wrapper {
  width: 70%;
  background-color: #f2f2f7;
  margin: 0 auto;
  border: 3px solid black;
  border-radius: 1rem;
  padding: 20px;
  margin-top: 25vh;
}

#post-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

h1 {
  font-size: 3em;
}

p {
  white-space: pre-wrap;
  font-size: 1.2em;
}

#comments {
  h2 {
    font-size: 30px;
  }
}

hr {
  color: black;
}

html {
  --s: 257px;
  /* control the size */
  --c1: #38476b;
  --c2: #bda3b6;

  --_c: var(--c1) calc(100% - var(--s)/2) 99%, #0000;
  --_g: var(--s), #0000 calc(99% - var(--s)/2), var(--_c);
  background:
    radial-gradient(var(--s) at 100% var(--_g)),
    radial-gradient(calc(var(--s)/4) at 50% calc(100%/3), var(--_c)) var(--s) 0,
    radial-gradient(var(--s) at 0% var(--_g)) 0 calc(3*var(--s)) var(--c2);
  background-size:
    calc(2*var(--s)) calc(9*var(--s)/4),
    calc(2*var(--s)) calc(3*var(--s)/4);
}