@font-face {
  font-family: 'xkcd-Regular';
  src: url('../../fonts/xkcd-Regular.eot?') format('eot'),
       url('../../fonts/xkcd-Regular.otf') format('opentype'),
       url('../../fonts/xkcd-Regular.woff') format('woff');
}

@font-face {
  font-family: 'xkcd-Mono';
  src: url('../../fonts/xkcd-Mono.woff') format('woff');
}

body {
  font-family: xkcd-Mono;
  font-variant: small-caps;
  font-size: 1.6em;
  margin: 0em;
  background: #fff;
  color: #000;
  text-align: center;
}

button {
  font-family: xkcd-Mono;
  font-variant: small-caps;
  transition-duration: 0.3s;
  background: #fff;
  border: 2px solid #000;
  border-radius: 3px;
  color: #000;
  font-size: 0.8em;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.tabBtn {
  font-size: 1.0em;
}

.num {
  font-size: 1.5em;
}

.upg {
  font-size: 1.2em;
}

#title {
  font-size: 1.3em;
}

#credits {
  font-size: 0.9em;
}

#links {
  font-size: 0.8em;
}

/* Sliders, based on example from %%% */

.slidecontainer {
  width: 100%;
  height: 2px;
  margin-top: -10px;
  margin-bottom: 20px;
}

.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 2px;
  background: #000;
  /* outline: none; */
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px;
  height: 12px;
  background: #000;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #000;
  cursor: pointer;
}

/* CSS animated Starfield, from codepen.io/keithclark/pen/DQdKbg */

#space, .stars {
  overflow: hidden; position: relative; top: 50%;
  /* top: 0; bottom: 0; left: 0; right: 0; position: absolute; */
  height: 400px;
  width: 100%;
  background: #000;
  color: #fff;
}

.stars {
  position: absolute; top: 0%;
  background-image: 
    radial-gradient(4px 4px at 20px 30px, #fff, rgba(0,0,0,0)),
    radial-gradient(4px 4px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(4px 4px at 50px 160px, #fff, rgba(0,0,0,0)),
    radial-gradient(4px 4px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(4px 4px at 130px 80px, #fff, rgba(0,0,0,0)),
    radial-gradient(4px 4px at 160px 120px, #fff, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: zoom 5s infinite;
  opacity: 0;
}

.stars1 { background-position:  50%  50%; animation-delay: 0s; }
.stars2 { background-position:  20%  60%; animation-delay: 1s; }
.stars3 { background-position: -20% -30%; animation-delay: 2s; }
.stars4 { background-position:  40% -80%; animation-delay: 3s; }
.stars5 { background-position: -20%  30%; animation-delay: 4s; }

/* The animation goes from 0.00 to 1.00 and repeats.
   From 0.00 to 0.85 it zooms in and fades in. From 0.85 to 1.00
   it keeps zooming in and fades out. */
@keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(0.2);
    animation-timing-function: ease-in;
  } 
  /* 20% {opacity: 1; transform: scale(0.75);
     animation-timing-function: linear;} */
  85% {
    opacity: 1;
    transform: scale(1.12);
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

h1 {
  position: relative; top: 40%; z-index: 1; width: 100%; color: #228;
  font-size: 1em; text-align: center; text-shadow: 0 0 3px #6cf;
}
h1:first-line { font-size: 1.5em; }