@font-face {
  font-family: "WizardsManse";
  src: url('WIZARDSMANSE.OTF') format("opentype");
}
@font-face {
  font-family: "Guffy";
  src: url("GUFFY'S PIXELS.TTF") format("truetype");
}

body {
  background: #121212;
  font-family: "WizardsManse", Courier, monospace;
  color: #ffffff;
  font-size: 32px;
  text-align: center;
}

h1 {
  font-family: "WizardsManse", Courier, monospace;
  font-size: 128px;
  text-align: center;
}

h1 {
  z-index:0;
  position: relative;
  color:#ffffff;
  margin-bottom: 50px;
}
h1:before {
  content:attr(data-text);
  background: #ffffff;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position:relative;
  z-index:1;
}
h1:after {content:attr(data-text);
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  text-shadow: 2px 0px #000000,
               2px 2px #000000,
               0px 2px #000000,
               0px -2px #000000,
              -2px -2px #000000,
              -2px 0px #000000,
              -3px 3px #60f7f2,
              -4px 4px #94f9c9,
              -5px 5px #cbf6ac,
              -6px 6px #fcefa5;
  z-index:-1;
}

.button {
  font-family: "WizardsManse", Courier, monospace;
  font-size: 64px;
  text-align: center;
  color: #ffffff;
  margin: 0 auto;
  text-decoration: underline;
  text-decoration-color: #e09ff9;
  line-height: 1.5;
}

a {color: inherit; text-decoration: inherit;}
a:hover {color:#fcefa5}

.main {font-family: "Guffy", Courier, Monospace;
  font-size: 48px;
  line-height: 1;
}