/* Star3000 fonts are available from https://twcclassics.com/downloads.html. Unpack them into the "fonts" directory. */

@font-face {
    font-family: 'Star3HeavyRegular';
    src: url('fonts/star3000_heavy-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Star3ExtendedHeavyRegular';
    src: url('fonts/star3000_extended_heavy-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Star3ExtendedRegular';
    src: url('fonts/star3000_extended-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Star3ExtraLargeRegular';
    src: url('fonts/star3000_extra_large-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Star3TerminalRegular';
    src: url('fonts/star3000_terminal-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'Star3SmallHeavyRegular';
    src: url('fonts/star3000_small_heavy-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Star3Regular';
    src: url('fonts/star3000-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Star3SmallRegular';
    src: url('fonts/star3000_small-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Star3LargeHeavyRegular';
    src: url('fonts/star3000_large_heavy-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Star3LargeRegular';
    src: url('fonts/star3000_large-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
html,
body {
  background-color: black;
  color: white;
  font-family: Star3Regular;
  font-size: 5vh;
  margin: 0;
  padding: 0;
}
body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100vh;
  padding-top: 3.5em;
  font-family: Star3Regular;
  background-color: blue;
  color: white;
  text-shadow: -0.2em 0em 0.05em rgba(180, 180, 0, 0.125), 0.1em 0 0.05em rgba(0, 255, 255, 0.3);
}
.scroller {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  border-top: 0.25em solid transparent;
  text-transform: uppercase;
  text-align: left;
  font-family: Star3ExtendedRegular;
  background-color: green;
  color: white;
}
header {
  position: fixed;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 0.5em;
  text-transform: uppercase;
  font-family: Star3LargeRegular;
  background-color: red;
  color: white;
}
header h1 {
  background-color: transparent;
  padding: 0;
  height: 2.5em;
}
header .time {
  height: 1em;
  line-height: 1em;
  text-transform: uppercase;
  font-family: Star3SmallRegular;
  background-color: #990;
  color: black;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: normal;
  padding: 0.2em 0;
  background-color: purple;
}
h1 {
  font-family: Star3ExtraLargeRegular;
}
h2 {
  font-family: Star3LargeRegular;
}
p {
  margin: 0;
  padding: 0 0.25em;
}
main {
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 2.25em;
}
main > * {
  padding-left: 2em;
  padding-right: 2em;
}
main ul {
  list-style-type: "*";
  width: 60%;
  margin: auto;
}
main ul li {
  padding-left: 0.5em;
}
.charagen-biggest {
  font-family: Star3ExtraLargeRegular;
}
.charagen-big {
  font-family: Star3LargeRegular;
}
.charagen-bigbold {
  font-family: Star3LargeBold;
}
.charagen-normal {
  font-family: Star3Regular;
}
.charagen-normalbold {
  font-family: Star3HeavyRegular;
}
.charagen-small {
  font-family: Star3SmallRegular;
}
.charagen-smallbold {
  font-family: Star3SmallHeavyRegular;
}
.charagen-wide {
  font-family: Star3ExtendedRegular;
}
.charagen-widebold {
  font-family: Star3ExtendedHeavyRegular;
}
@keyframes charagen-blinky {
  50% {
    color: transparent;
    text-shadow: none;
  }
}
.charagen-blinky {
  animation-name: charagen-blinky;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, start);
}
.marquee-outer {
  --width-in-ch: 40;
  --message-width: 68;
  --time-per-char: 0.1s;
}
@keyframes marquee-inner {
  from {
    margin-left: 0;
  }
  to {
    margin-left: calc(-1ch * var(--message-width));
  }
}
@keyframes marquee-outer {
  from {
    margin-left: 1ch;
  }
  to {
    margin-left: 0;
  }
}
.marquee-outer {
  box-sizing: border-box;
  width: calc(1ch * var(--width-in-ch));
  overflow: hidden;
  white-space: nowrap;
  animation-name: marquee-outer;
  animation-duration: var(--time-per-char);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.marquee-inner,
.marquee-duplicate {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  height: 1em;
}
.marquee-inner {
  animation: marquee-inner calc(var(--time-per-char) * var(--message-width)) steps(var(--message-width), end) infinite;
}
.marquee-duplicate {
  display: inline-block;
}
.marquee-test {
  width: 100%;
}
a,
a:visited {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}