:root {
  --main-color-dark: #b3352b;
  --main-color: #ea4c40;
}

@font-face {
  font-family: "CustomHeaderFont";
  src:
    url("./fonts/ScreatureRegular.woff2") format("woff2"),
    url("./fonts/ScreatureRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "CustomBodyFont";
  src:
    url("./fonts/TOOM-Regular.woff2") format("woff2"),
    url("./fonts/TOOM-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "CustomBodyFont";
  src:
    url("./fonts/TOOM-Bold-Italic.woff2") format("woff2"),
    url("./fonts/TOOM-Bold-Italic.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "CustomBodyFont";
  src:
    url("./fonts/TOOM-Italic.woff2") format("woff2"),
    url("./fonts/TOOM-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}

body {
  --fg-1: white;
  --fg-2: white;
  --bg-2: black;
  --fg-3: var(--main-color);
  --fg-3-focus: var(--main-color);
  --fg-1-focus: var(--main-color);
  --bg-acc: var(--main-color);
  --fg-acc: white;
  --bg-1-overlay: rgba(0, 0, 0, 0.5);
  --mg-acc: rgba(234, 76, 64, 0.5);
  background-color: black;
  /* color: white; */
}

body,
button,
input {
  font-family: "CustomBodyFont", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "CustomHeaderFont", sans-serif;
}

h1 {
  font-size: 4rem;
  letter-spacing: 0.06em; /* Start with 0.06em kerning for h1 */
}

h2 {
  font-size: 3.5rem;
  letter-spacing: 0.055em; /* Slightly less kerning for h2 */
}

h3 {
  font-size: 3rem;
  letter-spacing: 0.05em; /* Moderate kerning for h3 */
}

h4 {
  font-size: 2.5rem;
  letter-spacing: 0.045em; /* Standard kerning for h4 */
}

h5 {
  font-size: 2rem;
  letter-spacing: 0.04em; /* Slightly tighter kerning for h5 */
}

h6 {
  font-size: 1.5rem;
  letter-spacing: 0.035em; /* Tightest kerning for h6 */
}

strong,
b {
  font-family: "CustomBodyFont", sans-serif;
  font-weight: bold;
}

em,
i {
  font-family: "CustomBodyFont", sans-serif;
  font-style: italic;
}

a {
  color: var(--main-color);
  text-decoration: none !important;
  position: relative;
}

a::after {
  content: ""; /* Required for the pseudo-element to display */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Set the thickness of the underline */
  background-color: var(--main-color); /* Set the color of the underline */
  transform: scaleX(0);
  transition: transform 0.3s;
}

a:hover::after {
  transform: scaleX(1);
}

button.emphasized {
  /* color: white; */
  font-family: "CustomBodyFont", sans-serif;
}

.actions.primary a,
.actions.primary button,
a.button,
button.button,
form button {
  border: 1px solid white;
}

ol.coming-soon li::marker {
  color: var(--main-color);
}

ol.coming-soon li {
  margin: 1rem 0;
}