body {
  /* set veriable */
  --block-text-color: #221240;

  --block-background-color: #f7d4c9;
}

@font-face {
  font-family: "grotesk";
  src: url("/fonts/Basel-Grotesk-Regular.woff") format("woff");
}

@font-face {
  font-family: "grotesk-bold";
  src: url("/fonts/Basel-Grotesk-Black.woff") format("woff");
}

@font-face {
  font-family: "classic";
  src: url("/fonts/Basel-Classic-Bold.woff") format("woff");
}

main {
  font-family: "grotesk";
}

h2 {
  font-family: "classic";
}

html {
  height: 100%;
  width: 100%;
}

.underline {
  text-decoration: underline;
}

.replyTime {
  vertical-align: text-top;
  font-size: 0.7em;
}

button {
  font-family: "grotesk-bold";
  font-size: 1.25em;
}

.cta {
  text-decoration: none;
}

.cta:hover {
  border: none;
}

.ps {
  font-size: 0.6em;
}

header {
  margin-bottom: 1.75em;
}

.comic {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1em;
}

.comic div p {
  font-size: 0.8em;
  text-align: center;
  color: #6a230d;
}

.comic div img {
  margin-bottom: 0;
  border: 3px solid #221240;
}