@font-face {
  font-family: 'KerakNeraka';
  src: url('./KerakNeraka-8Oaoz.otf');
  font-weight: normal;
  font-style: normal;
}

:root {
  --color-bg: rgba(103, 157, 157, 0.587);
  --color-fg: #fff;

  --font-body: sans-serif;
  --font-header: 'KerakNeraka', sans-serif;

  --step--2: clamp(0.6331rem, 0.6141rem + 0.0949vw, 0.6877rem);
  --step--1: clamp(0.844rem, 0.7993rem + 0.2234vw, 0.9724rem);
  --step-0: clamp(1.125rem, 1.038rem + 0.4348vw, 1.375rem);
  --step-1: clamp(1.4996rem, 1.345rem + 0.7733vw, 1.9443rem);
  --step-2: clamp(1.999rem, 1.7381rem + 1.3046vw, 2.7492rem);
  --step-3: clamp(2.6647rem, 2.2394rem + 2.1264vw, 3.8873rem);
  --step-4: clamp(3.552rem, 2.8756rem + 3.382vw, 5.4967rem);
  --step-5: clamp(4.7348rem, 3.6783rem + 5.2826vw, 7.7723rem);
}

html, body {
    height: 100vh;
}

body {
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    background-color: var(--color-bg);
    z-index: -1;
}

main {
    text-align: center;
    padding: var(--step-1);
    z-index: 1;
}

h1 {
    font-size: var(--step-5);
    line-height: 1;
    color: var(--color-fg);
    font-family: var(--font-header);
    letter-spacing: .1em;
}

p {
    font-size: var(--step-2);
    color: var(--color-fg);
    font-family: var(--font-body);
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}