:root {
  --deepblue: #1701f3;
  --burnt-orange: #ff4f21;
  --bright-orange: #ec9551;
  --starlight: #e2e3e5;
  --noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.50' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
}

html {
  font-size: clamp(0.5625rem, 0.7vw, 1rem);
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  background-color: var(--starlight);
}

main {
  flex-grow: 1;
}

@font-face {
  font-family: "Sen";
  src: url("../fonts/sen/sen-extra-bold.ttf");
  font-display: swap;
}

@font-face {
  font-family: "Catamaran";
  src: url("../fonts/catamaran/catamaran-regular.ttf");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Catamaran";
  src: url("../fonts/catamaran/catamaran-bold.ttf");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Catamaran";
  src: url("../fonts/catamaran/catamaran-extra-bold.ttf");
  font-weight: 800;
  font-display: swap;
}