:root {
  --strong-color: orange;
  --em-color: purple;
  --dark-orange: #8B4000;
  --dark-grey: #222222;
}

html {
 background: rgb(10, 10, 10);
 color: white;
 font-family: regular;
}

h1 {
 color: orange;
 font-size: 3em;
 font-family: ovarian;
 background: black url('/img/textures/marbleblack.gif') repeat;
}

strong {
  color: var(--strong-color);
  font-size: 1.5em;
  background: var(--dark-orange);
}

.special1 {
  font-family: ovarian;
  color: white;
}

.special2 {
  font-family: unorthodox;
  color: cyan;
}

.special3 {
  font-family: crystal;
  color: blue;
}

a:link {
  color: magenta;
}

a:hover {
  color: pink; 
}

a:visited {
  color: purple;
}

@font-face {
  font-family: 'regular';
  src: url('/fonts/regular.woff2') format('woff2'), url('/fonts/regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  }
  
  @font-face {
  font-family: 'unorthodox';
  src: url('/fonts/unorth.woff2') format('woff2'), url('/fonts/unorth.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  }

@font-face {
  font-family: 'crystal';
  src: url('/fonts/tivan.woff2') format('woff2'), url('/fonts/tivan.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  }
  
@font-face {
  font-family: 'ovarian';
  src: url('/fonts/mara.woff2') format('woff2'), url('/fonts/mara.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  }