:root {

  --color-black: #000000;
  --color-gray: #222222;
  --color-white: #ffffff;

  --size-large: calc(min(100vw, 100vh) * (96.00 / 1280.00));
  --size-medium: calc(min(100vw, 100vh) * (48.00 / 1280.00));
  --size-small: calc(min(100vw, 100vh) * (36.00 / 1280.00));
  --size-tiny: calc(min(100vw, 100vh) * (24.00 / 1280.00));

  --size-title: calc(min(100vw, 100vh) * (308.00 / 1280.00));
  --size-video: calc(min(100vw, 100vh) * (876.00 / 1280.00));
  --size-media: calc(min(100vw, 100vh) * (480.00 / 1280.00));

}

@font-face {
  font-family: "San Francisco";
  src: url("/assets/fonts/regular.otf") format("opentype");
  font-weight: 100;
}

@font-face {
  font-family: "San Francisco";
  src: url("/assets/fonts/bold.otf") format("opentype");
  font-weight: 400;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/title.otf") format("opentype");
  font-weight: 700;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/subtitle.otf") format("opentype");
  font-weight: 300;
}

@keyframes static {
  0%, 100% {
    box-shadow: 
      inset 0 0 2rem rgba(128, 128, 255, 0.2),
      0 0 1rem rgba(128, 128, 255, 0.4);
  }
  50% {
    box-shadow: 
      inset 0 0 1rem rgba(128, 128, 255, 0.4),
      0 0 2rem rgba(128, 128, 255, 0.2);
  }
}