body {
  background-color: #204;
  padding: 64px;
  -webkit-font-smoothing: antialiased;
}

@font-face {
  font-family: 'FFX';
  src: url('FairfaxHD.ttf') format('truetype'); /* Specify the .ttf file */
}
@font-face {
  font-family: 'FFXPON';
  src: url('FairfaxPonaHD.ttf') format('truetype'); /* Specify the .ttf file */
}
@font-face {
  font-family: 'FFXPUL';
  src: url('FairfaxPulaHD.ttf') format('truetype'); /* Specify the .ttf file */
}

@font-face {
  font-family: 'GARN';
  src: url('400xoj.ttf') format('truetype'); /* Specify the .ttf file */
}

h1 {
  color: #ff4;
  font-family: 'GARN', Courier New, sans-serif;
  text-align: left;
  text-shadow: 0 0 7px #ff0;
  transition: text-shadow 0.25s ease-in-out;
}
h1:hover {
  color: #ff4;
  font-family: 'GARN', Courier New, sans-serif;
  text-align: left;
  text-shadow: 0 0 10px #ff8;
}

h2 {
  color: #cc4;
  font-family: 'GARN', Courier New, sans-serif;
  text-align: left;
  text-shadow: 0 0 7px #ff0;
  transition: text-shadow 0.25s ease-in-out;
}
h2:hover {
  color: #cc4;
  font-family: 'GARN', Courier New, sans-serif;
  text-align: left;
  text-shadow: 0 0 10px #ff8;
}

.red {
  color: #f00;
}
.grn {
  color: #0f0;
}
.blu {
  color: #00f;
}
.pon {
  font-family: 'FFXPON', Courier New, sans-serif;
}
.pul {
  font-family: 'FFXPUL', Courier New, sans-serif;
}

p {
  font-family: 'FFX', Courier New, sans-serif;
  color: #fff;
  font-size: 20px;
}

txt {
  font-family: 'FFX', Courier New, sans-serif;
  color: #fff;
  font-size: 20px;
}

garn {
  font-family: 'GARN', Courier New, sans-serif;
  color: #fff;
  font-size: 20px;
}

a:link {
  font-family: 'FFX', Courier New, sans-serif;
  color: #00f;
  font-size: 20px;
  text-decoration: none;
  text-shadow: 0 0 7px #00f;
  transition: text-shadow 0.125s ease-in-out;
}
a:visited {
  font-family: 'FFX', Courier New, sans-serif;
  color: #80f;
  font-size: 20px;
  text-decoration: none;
  text-shadow: 0 0 7px #f0f;
  transition: text-shadow 0.125s ease-in-out;
}
a:hover {
  font-family: 'FFX', Courier New, sans-serif;
  color: #08f;
  font-size: 20px;
  text-decoration: none;
  text-shadow: 0 0 7px #0ff;
}
a:active {
  font-family: 'FFX', Courier New, sans-serif;
  color: #88f;
  font-size: 20px;
  text-shadow: 0 0 7px #ff0;
  text-decoration: none;
}

button {
  background-color: #80f;
  font-family: 'FFX', Courier New, sans-serif;
  transition: background-color 0.125s cubic-bezier(0.65, 0, 0.35, 1)
}
button:hover {
  background-color: #84f;
}
button:active {
  background-color: #ff0;
}

input[type="text"] {
  background-color: #84f;
  font-family: 'FFX', Courier New, sans-serif;
  transition: background-color 0.125s cubic-bezier(0.65, 0, 0.35, 1)
}
input[type="text"]:hover {
  background-color: #88f;
}

input.big[type="text"] {
  background-color: #84f;
  font-family: 'FFX', Courier New, sans-serif;
  transition: background-color 0.125s cubic-bezier(0.65, 0, 0.35, 1)
}
input.big[type="text"]:hover {
  background-color: #88f;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100px
  height: 16px;
  background: #204;
  border-radius: 5px;
  outline: 1px solid #80f;
  transition: background 0.25s cubic-bezier(0.65, 0, 0.35, 1), width 0.25s cubic-bezier(0.65, 0, 0.35, 1)
}
input[type="range"]:hover {
  -webkit-appearance: none;
  width: 400px
  height: 16px;
  background: #408;
  border-radius: 5px;
  border-radius: 5px;
  outline: 1px solid #80f;
}
input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #80f;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.125s cubic-bezier(0.65, 0, 0.35, 1), width 0.125s cubic-bezier(0.65, 0, 0.35, 1), height 0.125s cubic-bezier(0.65, 0, 0.35, 1)
}
input[type="range"]::-webkit-slider-thumb:hover {
   -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #ff0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

canvas {
  background-color: #408;
  border:1px solid #80f;
}