html {
  overflow-x: hidden;
}
html, body {
  min-width: 800px;
  margin: 0;
  height: 100%;
}
body {
  background-color: #222;
  background-image: url("/assets/asphalt.jpg");
  background-position-x: center;
  font-family: Arial;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-smooth: never;
  overflow-x: hidden !important;
}
body::selection {
  background-color: cyan;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: #66008a;
  color: #66008a;
}
button {
  cursor: pointer;
  color: lime;
  font-size: 1.25em;
  font-weight: bold;
  padding-inline: 12px;
  padding-bottom: 4px;
  border-style: solid;
  border-width: 4px;
  background-color: #bbb;
  border-color: #fff #444 #444 #fff;
}
button:active {
  border-color: #444 #fff #fff #444;
}
button[data-active="false"] {
  cursor: not-allowed;
}
@media (pointer:coarse) {
  button[data-active="false"] {
    opacity: 0.5;
  }
}
button[data-active="false"] {
  cursor: url('/assets/kirpitch.png') 10 10, not-allowed;
}
table {
  border-collapse: collapse;
}

/* ----------------- HEADER ----------------- */
header {
  text-align: center;
}
header table {
  width: 100%;
}
header td {
  width: 33.3%;
}
h1 a {
  text-decoration: none;
}
h1 a:hover {
  text-decoration: underline;
}
h1 a i {
  color: yellow;
}
h1 a span {
  color: #222;
  font-weight: normal;
  font-size: 12px;
}
header p:first-of-type {
  text-decoration: underline;
  font-size: 1.2em;
}
header p:last-of-type {
  font-size: 0.8em;
}

/* ----------------- NAV ----------------- */
@keyframes drive {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes terror {
  from {
    transform: translateX(30px);
  }
  to {
    transform: translateX(10px);
  }
}
nav {
  text-align: center;
  margin-left: 80px;
  font-weight: bold;
}
nav tr {
  animation: 18s linear 0s infinite both running drive;
}
nav tr:last-child {
  animation-duration: 10s;
}
.autobahn {
  position: relative;
  height: 60px;
  border-block: solid 4px #fff;
  white-space: nowrap;
}
.autobahn::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  background-image: repeating-linear-gradient(
    to right,
    #fff 0,
    #fff 20px,
    transparent 20px,
    transparent 50px
  );;
  left: 0;
  right: 0;
}
.autobahn .autobahn {
  position: absolute;
  left: 0;
  width: 80px;
  transform: translate(-100%, -120%);
}
.construction {
  text-transform: uppercase;
  display: inline-block;
  color: red;
  font-size: 1.2rem;
  font-weight: bold;
}
blink {
  display: inline;
  animation: blink 0.5s step-end infinite;
  color: orange;
  font-weight: bold;
  font-family: "Arial Black";
}
.impatient {
  animation: terror 1.5s infinite alternate;
  display: inline-block;
}
nav div {
  margin: 0 auto;
}
nav table {
  width: 100%;
}
nav td {
  padding: 4px 0 6px;
  width: 25%;
}

/* ----------------- CONNECT ----------------- */
#connect button {
  color: magenta;
}

/* ----------------- COUNTER ----------------- */
#counter {
  color: #fff;
}
#counter pre {
  display: inline-block;
  font-weight: bold;
  letter-spacing: 0.4em;
  border-radius: 2px;
  background-image: linear-gradient(to right, #51821f 70%, #1f2220);
  box-shadow: inset 0px -3px 12px 0px #000;
}
#counter code {
  display: inline-block;
  padding: 2px 0px 2px 4px;
  border-right: solid 1px #000;
}
#counter code:last-child {
  border-right: none;
}

/* ----------------- MAIN ----------------- */
main {
  width: 800px;
  margin: 40px auto;
}
main table {
  width: 100%;
  box-shadow: 0px -0.5px 0px 0px #fff, 0px 1px 0px 0px #444;
}
main td {
  padding: 10px;
  border: solid 4px #bbb;
  box-shadow: inset 0px -1px 0px 0px #fff, inset 0px 1px 0px 0px #444;
}
table.no-border {
  box-shadow: none;
}
table.no-border td {
  box-shadow: none;
  border: none;
  box-shadow: none;
  vertical-align: top;
}

/* ----------------- PAGINATION ----------------- */
.pagination {
  text-align: center;
  margin: 10px 0;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
.pagination select {
  margin: 0 10px;
}

/* ----------------- FOOTER ----------------- */
footer {
  width: 800px;
  margin: 0 auto;
  padding-bottom: 20px;
}
footer table {
  width: 100%;
}
footer td {
  width: 50%;
}
footer td:last-child {
  text-align: right;
}
footer table table {
  text-align: right;
  width: auto;
  margin-left: auto;
}
footer td td {
  width: 80px;
}

/* ----------------- COUNTDOWN ----------------- */
.countdown {
  color: yellow;
  line-height: 1.7;
}
.countdown tr {
  animation: 10s linear 0s reverse infinite both running drive;
}
.countdown tr:last-child {
  animation: 18s linear 0s reverse infinite both running drive;
}
.sale-clock, .stream-clock {
  background-color: black;
  color: lime;
  font-family: monospace;
}

/* ----------------- EFFECTS ----------------- */
.glow {
  filter: drop-shadow(0px 0px 2px yellow);
}
.glow2 {
  filter: drop-shadow(0px 0px 2px magenta);
}

/* ----------------- COPY ----------------- */
.copy :is(h1, h2, h3) {
  font-style: italic;
  color: yellow;
}
.copy h1 {
  text-align: center;
  font-size: 3em;
}
.copy section {
  overflow: hidden;
  margin: 80px 0;
}
.float-left {
  float: left;
  margin: 0 16px 16px 0;
}
.float-right {
  float: right;
  margin: 0 0 16px 16px;
}
.text-center {
  text-align: center;
}


/* ----------------- STREAM ----------------- */
iframe {
  width: 100%;
  aspect-ratio: 16/9;
}