@font-face {
  font-family: "Diatype";
  src: url("/assets/fonts/Cargo-DiatypePlusVariable.woff2") format("woff2");
  font-weight: 100 900; /* Assuming a wide range for variable font */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Diatype";
  src: url("/assets/fonts/Cargo-DiatypePlusVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "InterVariable";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterVariable";
  src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Kalice";
  src: url("/assets/fonts/Kalice-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kalice";
  src: url("/assets/fonts/Kalice-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kalice";
  src: url("/assets/fonts/Kalice-ExtraBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kalice";
  src: url("/assets/fonts/Kalice-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kalice";
  src: url("/assets/fonts/Kalice-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Kalice";
  src: url("/assets/fonts/Kalice-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-text: var(--font-serif);
  --font-header: Kalice;
  --font-interface: Diatype;
  --font-header-weight: 400;
  --font-header-letter-spacing: 0.05em;
  --font-header-line-height: 1em;
  --color-light-background: #f0f0f0;
  --color-light-foreground: #191919;
  --color-background-secondaryss: #f7f1ef;
  --color-light-accent: #bb927d;
  --color-light-green: #8ea58c;
  --color-light-cyan: #344c3d;
  --color-light-blue: #4a90a4;
  --color-light-purple: #bfcfbb;
  --color-dark-background: #222;
  --color-dark-foreground: #dbdbdb;
  --color-dark-accent: #bb927d;
}

header,
footer,
.box,
.box-inset,
table {
  font-family: var(--font-interface);
}

h1 {
  margin-block-start: calc(var(--space) * 7);
  margin-block-end: calc(var(--space) * 5);
  font-size: calc(var(--font-size) * pow(var(--font-ratio), 5.5));
  text-align: center;
  color: #bb927d;
}

.hero h1 {
  margin-block-start: calc(var(--space) * 10);
  margin-block-end: calc(var(--space) * 10);
  color: var(--color-light-background);
}

h2,
h3 {
  text-align: center;
}

.hero {
  background-image: url("/assets/Ice-2.jpg");
  height: 75vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-light-background);
  margin-block: 0;
}

header {
  padding-block-start: var(--space);
}
header h1 {
  font-size: var(--scale-xs);
  margin: 0;
  display: inline;
  text-align: center;
  color: var(--color-foreground);
}
header ul {
  list-style: none;
  padding: 0;
  font-size: var(--scale-xs);
  line-height: normal;
  margin: 0;
  display: flex;
  justify-content: space-between;
  justify-content: left;
  align-items: center;
  color: var(--color-muted);
  border-bottom: var(--border);
  border-bottom: none;
}
header ul li {
  margin: 0;
  margin-right: var(--space);
}
header ul li a {
  text-decoration: none;
}
header ul li a:hover {
  color: var(--color-accent);
}
header ul li::before {
  display: none;
}

footer {
  margin-top: calc(var(--space) * 5);
  padding-block: calc(var(--space) * 1);
  padding-block-start: calc(var(--space) * 3);
  background: var(--color-foreground);
  color: var(--color-background);
  font-size: var(--scale-xs);
}
footer h3 {
  margin: 0;
  text-align: left;
  color: var(--color-background);
}
footer ul {
  list-style: none;
  padding: 0;
}
footer ul li a {
  text-decoration: none;
}
footer ul li a:hover {
  color: var(--color-accent);
}
footer ul li::before {
  display: none;
}