@font-face {
  font-family: "Swiza";
  src: url("/fonts/Swiza-Roman-webfontkit/swiza-thin-webfont.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Swiza";
  src: url("/fonts/Swiza-Roman-webfontkit/swiza-extralight-webfont.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Swiza";
  src: url("/fonts/Swiza-Roman-webfontkit/swiza-light-webfont.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Swiza";
  src: url("/fonts/Swiza-Roman-webfontkit/swiza-regular-webfont.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Swiza";
  src: url("/fonts/Swiza-Roman-webfontkit/swiza-medium-webfont.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Swiza";
  src: url("/fonts/Swiza-Roman-webfontkit/swiza-semibold-webfont.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Swiza";
  src: url("/fonts/Swiza-Roman-webfontkit/swiza-bold-webfont.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Swiza";
  src: url("/fonts/Swiza-Italic-webfontkit/swiza-thinitalic-webfont.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Swiza";
  src: url("/fonts/Swiza-Italic-webfontkit/swiza-extralightitalic-webfont.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Swiza";
  src: url("/fonts/Swiza-Italic-webfontkit/swiza-lightitalic-webfont.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Swiza";
  src: url("/fonts/Swiza-Italic-webfontkit/swiza-regularitalic-webfont.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Swiza";
  src: url("/fonts/Swiza-Italic-webfontkit/swiza-mediumitalic-webfont.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Swiza";
  src: url("/fonts/Swiza-Italic-webfontkit/swiza-bolditalic-webfont.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --logo-width: 220px;
  /* 2. Put your font first, e.g. "Brand", */
  --font:Swiza, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  text-align: center;
  font-family: "Swiza", sans-serif;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.logo {
  display: block;
  width: min(var(--logo-width), 60vw);
  height: auto;
}

h1 {
  margin: 0;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 400;
}

.social {
  display: inline-flex;
  color: inherit;
  transition: opacity 0.2s;
}

.social:hover,
.social:focus-visible {
  opacity: 0.6;
}

.social svg {
  width: 32px;
  height: 32px;
}