@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v12/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjPQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6u-w4BMUTPHjxsIPy-v.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6u_w4BMUTPHjxsI9w2PHA.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6u8w4BMUTPHjxswWw.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6u_w4BMUTPHjxsI5wqPHA.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6u_w4BMUTPHjxsI3wiPHA.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6u8w4BMUTPHh30wWw.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh7USew8.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHvxk.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh6UVew8.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh50Xew8.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DMyQhM4.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DCuXhM4.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DGWXhM4.ttf) format('truetype');
}
.tribo {
  background: #dedede;
  color: black;
}
.tribo.sol {
  background-color: #f2b100 !important;
  color: black !important;
}
.tribo.lua {
  background-color: #431cdf !important;
  color: white !important;
}
.tribo.str {
  background-color: #52307c !important;
  color: white !important;
}
.tribo.mod {
  background-color: #999999 !important;
  color: black !important;
}
body {
  margin: 0;
  padding: 20px 0;
  border: none;
  background: #191919;
  text-align: center;
  font-variant-ligatures: none;
  color: #fff !important;
  overflow: auto;
  font-family: "Lato", "Trebuchet MS", Arial, Helvetica, sans-serif;
}
a {
  text-decoration: none;
}
a:hover h3,
a:hover p {
  color: #ccc;
}
input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  font-size: 1em;
  text-align: center;
}
input[type=text] {
  padding: 10px 20px;
  border: none;
  background: white;
}
button {
  padding: 10px 20px;
  background: #000;
  color: white;
  text-transform: uppercase;
  border: 0;
}
h1,
h2 {
  font-weight: 900;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Lato', 'Verdana', sans-serif;
}
body > h1,
body > h2,
body > h3,
body > h4,
body > h5,
body > h6 {
  width: calc(100vw - 20px);
  margin: 0 auto;
}
h1 {
  font-size: 5em;
  color: #fff;
  line-height: 1em;
}
h1 em {
  font-weight: 400;
}
@media screen and (max-width: 600px) {
  h1 {
    font-size: 3em;
  }
}
h3 {
  font-size: 1.5em;
  color: #fff;
}
h5 {
  font-size: 1.5em;
  color: #fff;
}
table.score {
  margin: 20px auto;
  border-collapse: collapse;
}
table.score th {
  background: #222;
}
table.score th,
table.score td {
  padding: 5px 10px;
  border: solid 1px #999;
}
table.score td.pic {
  padding: 0;
}
table.score td img {
  width: 80px;
}
table.score tr:nth-child(even) td {
  background: #555;
}
table.score tr:nth-child(even) td {
  background: #666;
}
header {
  background-color: darkgray;
  color: #fff;
  margin: 0;
  padding: 20px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header p {
  color: white !important;
}
@media screen and (max-width: 1023px) {
  header {
    flex-direction: column-reverse;
  }
  header > p:last-of-type {
    margin: 10px 0;
  }
}
header nav {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
@media screen and (max-width: 1023px) {
  header nav:first-of-type {
    flex-direction: column;
  }
  header nav:first-of-type h2 {
    font-size: 2.5em;
  }
  header nav:first-of-type div {
    font-size: 0.95em;
  }
  header nav:first-of-type + p {
    font-size: 0.8em;
  }
}
header nav h2,
header nav figure {
  display: inline-block;
  margin: 0 5px;
  text-transform: uppercase;
  padding-right: 5px  !important;
  border-right: solid 6px #fff !important;
}
@media screen and (max-width: 1023px) {
  header nav h2,
  header nav figure {
    border-right: none !important;
  }
}
header nav figure {
  width: 150px;
}
header nav figure img {
  width: 100%;
}
header nav > div {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
}
header nav > div > * {
  margin: 10px 5px;
}
header nav p {
  font-size: 1.3em;
  margin: 0 20px;
}
header p {
  margin: 0 5px;
  color: #fff;
}
.err-bar {
  margin: -20px 0 0;
  padding: 30px 20px;
  color: #000;
  background: #ccc;
}
.err-bar h2,
.err-bar h4 {
  color: black;
  margin: 0;
}
.err-bar h4 {
  margin: 10px 0;
}
.err-bar h2 {
  margin: -10px 0 0;
}
.box:not(.fr-fullscreen) {
  width: calc(100vw - 20px);
  margin: 0 auto;
  max-width: 1200px;
}
#oks {
  display: grid;
  max-width: 500px;
  margin: 20px auto;
  width: calc(100vw - 20px);
  grid-template-columns: minmax(20px, auto) 80px repeat(2, minmax(20px, auto));
  grid-gap: 3px;
}
#oks div {
  background: #555;
  color: black;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
#oks div p {
  display: inline;
  margin: 0;
  align-self: center;
}
#oks img {
  width: 100%;
  align-self: center;
}
#oks .header {
  align-self: end;
  text-transform: uppercase;
  font-weight: 900;
  background: none;
  color: white;
}
div.score {
  display: grid;
  margin: 20px auto;
  width: calc(100vw - 20px);
  grid-gap: 3px;
  max-width: 1200px;
  grid-template-columns: 1fr 1fr 1fr 1fr 6fr;
}
div.score.god {
  grid-template-columns: 1fr 1.5fr 1fr 1fr 6fr 5fr;
}
@media screen and (max-width: 649px) {
  div.score {
    grid-template-columns: 0.5fr minmax(auto, 120px) 1fr 1fr;
  }
  div.score.god {
    grid-template-columns: 0.5fr minmax(auto, 120px) 1fr 1fr;
  }
  div.score .header {
    display: none;
  }
  div.score .tempos,
  div.score .resp {
    grid-column: span 4;
  }
  div.score .pos p:before {
    content: '#';
  }
  div.score .placar p:before {
    content: 'Status: ';
  }
  div.score .placar p {
    word-break: break-all;
  }
}
div.score .header {
  background: none;
  color: white;
  align-self: end;
  text-transform: uppercase;
  font-weight: 900;
}
div.score .header.c2 {
  grid-column: span 2;
}
div.score div {
  background: #555;
  color: black;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
div.score div p {
  display: inline;
  margin: 0;
  align-self: center;
}
div.score img {
  width: 100%;
  align-self: center;
}
div.score .tempos {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(auto, 4fr);
}
div.score .tempos .label {
  text-align: right;
  justify-content: flex-end;
  background: black;
  color: white;
  padding: 0 10px;
  word-break: keep-all;
}
div.score .tempos .tempo {
  text-align: left;
  justify-content: flex-start;
  padding: 0 10px;
}
div.score .tempos div:nth-child(n+3) {
  border-top: solid 1px #111;
}
div.score .resp {
  white-space: pre-wrap;
  font-family: Monospace;
  line-height: 1rem;
  text-align: left;
}