/* latin */
@font-face {
  font-family: 'Eater';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/eater.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Fugaz One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/Fugaz\ One.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@keyframes bg {
  0% {
    background-color: #311;
  }
  29% {
    background-color: #221;
  }
  29.01% {
    background-color: #ffd;
    filter:invert(0%);
  }
  29.41% {
    background-color: #221;
    filter:invert(100%);
  }
  29.81% {
    background-color: #ffd;
    filter:invert(0%);
  }
  30% {
    background-color: #221;
  }
  68%,
  72% {
    background-color: #230;
  }
  100% {
    background-color: #212;
  }
}

@keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

body {
  box-sizing: border-box;
  background-color: #311;
  font-size: 22px;
  color: rgb(198, 0, 0);
  animation: 10s alternate bg infinite;
  background-image: url('/static/splash.png');
  padding-bottom: 5em;
}

h1 {
  text-align: center;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  font-size: 3em;
  max-width: 100vw;
}

section {
  box-sizing: border-box;
  background-color: rgba(255,255,255,0.7);
  width: 800px;
  max-width: 98%;
  margin: 1em calc(max(50% - 400px, 1%));
  padding: 1em 2em;
  border-radius: .5em;
  border: 1px solid #a8ff66;
  overflow: hidden;
}
section.slim {
  width: 800px;
  max-width: 99%;
  margin: 1em calc(max(50% - 400px, 0.5%));
  padding: 1em 0.5em;
}

fieldset {
  border-radius: 0.5em;
  padding: 1em;
}

select {
  text-align: center;
  font-size: 1.2em;
}

button {
  font-size: 1em;
  float: right;
  background-color: rgb(255, 255, 255);
  padding: 0.25em 1em;
  border: 3px solid red;
  border-color: red brown brown red;
  border-radius: 1em;
  box-shadow: -4px -4px 4px red, 4px 4px 4px darkred;
}

table {
  display: table;
  border-collapse: collapse;
  border: 2px solid transparent;
  width:100%;
  table-layout: fixed;
  font-size: calc(min(1.1em, calc(0.2em + 2vw)));
  overflow-x: auto;
}
th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 2px 10px;
}

table#matrix tr th:first-child,
table#matrix tr td:first-child {
  width: 4em;
  min-width: 4em;
  max-width: 4em;
}

table#matrix thead tr:nth-child(2) {
  height: 4em;
  text-align: left;
}


#matrixviz, #scoreviz {
  display: block;
}

#greeting {
  display: inline-block;
  width: 200 max-content;

  position: relative;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}

.scary-font {
  font-family: Eater;
}

.action-font {
  font-family: 'Fugaz One';
}

details > *:not(summary) {
  color: black;
}