:root {

  --color-black: #222222;
  --color-dark: #b0b0b0;
  --color-light: #e9e9e9;
  --color-white: #e1e1e1;

  --space-large: 60pt;
  --space-medium: 40pt;
  --space-small: 20pt;
  --space-tiny: 8pt;

}

@font-face {
  font-family: "Myriad Pro";
  src: url("/assets/fonts/regular.otf") format("opentype");
  font-weight: 400;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("/assets/fonts/bold.otf") format("opentype");
  font-weight: 700;
}

@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;
}

@font-face {
  font-family: "Material Symbols";
  src: url("/assets/fonts/icon.otf") format("opentype");
  font-weight: 400;
}

@keyframes beacon {
    0% { box-shadow: 0 0 0 0 #ffffffcc; }
  100% { box-shadow: 0 0 0 0.5rem #ffffff00; }
}

@keyframes fade {
    0% { opacity: 0.0; }
  100% { opacity: 1.0; }
}