/* Typography */
@font-face {
  font-family: HK Grotesk;
  color: var(--fg-0);
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}

@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-0);
}

p {
  margin: 0 0 1rem 0;
  line-height: 1.5 !important;
  font-size: 1rem;
  color: var(--fg-0);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 2rem 0 0.8rem;
  font-family: var(--font-family-header);
  font-weight: 600;
  line-height: 1.1;
  color: var(--fg-0);
}

h1 {
  margin-top: 1rem;
  margin-bottom: 1.75rem;
  font-size: 5rem;
  display: inline-flex;
  color: var(--br-blue);
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

small,
.text_small {
  font-size: 0.8rem;
}

/* Title style adjustments */
.title-lg {
  color: var(--color-text-main);
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: bold;
  line-height: 1.5;
}

.title-md {
  font-size: 56px;
}

.postTitle {
  font-size: 4rem;
  /* color: #000; */
  line-height: 1.1;
  margin-bottom: 2rem;
}

.noteTitle {
  font-size: 4rem;
  color: #000;
  line-height: 1.1;
  margin-bottom: 2rem;
}

strong {
  /* this styles bold text */
  color: #ed64f5;
}

/* Restored Styles */
.toilet-banner {
  color: var(--fg-0);
  margin-bottom: 5rem;
  font-size: max(0.75vw, 0.25rem);
}

ul > li,
ol > li {
  margin-bottom: 0.75rem;
  line-height: 1.5;
  font-size: 1rem;
  color: var(--fg-0);
}

ul {
  padding: 0 0 0 18px;
  margin: 0;
}

ul.no-bullet {
  list-style-type: none;
}

/* Link styles */
a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  text-decoration: none;
  border-bottom: 6px solid var(--blue);
  color: var(--fg-0);
  transition: background 0.2s linear;
}

a:hover {
  background: var(--blue);
  color: var(--br-blue);
}