@font-face {
  font-family: 'bricolage-grotesque-condensed';
  src: url('/fonts/BricolageGrotesque_24pt_Condensed-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'bricolage-grotesque-condensed-light';
  src: url('/fonts/BricolageGrotesque_Condensed-ExtraLight.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'bricolage-grotesque';
  src: url('/fonts/BricolageGrotesque-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'semi-condensed-bricolage-grotesque';
  src: url('/fonts/BricolageGrotesque_SemiCondensed-ExtraLight.woff2') format('woff2');
  font-style: normal;
  font-weight: 200;
}

@font-face {
  font-family: 'KGSecondChances';
  src: url('/fonts/KGSecondChancesSketch.woff2') format('woff2');
  font-style: normal;
  font-weight: lighter;
}

:root {
  --bg: #111111;
  --blue: #0080ff;
  --pink: #ff6fff;
  --green: #59f19a;
  --red: #dc3434;
  --bricolage--font: 'bricolage-grotesque';
  --bricolage-condensed--font: 'bricolage-grotesque-condensed';
  --bricolage-condensed-light--font: 'bricolage-grotesque-condensed-light';
  --bricolage-semi-condensed-light--font: 'semi-condensed-bricolage-grotesque';
  --kg-font: 'KGSecondChances';
}

html,
body {
  max-width: 100vw;
  max-height: 100svh;
  font-family: var(--bricolage--font);
  background-color: var(--bg);
  color: white;
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

button {
  background-color: inherit;
  border: inherit;
  font-family: var(--bricolage--font);
  cursor: pointer;
}
image {
  object-fit: cover;
  max-height: 100%;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}

button {
  padding: 0.5em 1em;
  color: white;
  border-radius: 50px;
  font-size: 1em;
  cursor: pointer;
  border: 3px solid var(--green);
  transition: background-color 0.15s ease;
  width: fit-content;
}
button:hover,
button:focus-visible {
  background-color: var(--green);
}

em {
  font-style: normal;
}

ul {
  list-style-type: none;
}

p {
  font-size: clamp(1.1em, 0.9svw, 5em);
}

h1 {
  font-size: clamp(3em, 2.5vw, 10em);
}