@font-face {
  font-family: 'Roboto';
  src: url("font/Roboto/Roboto-Bold.ttf") format("truetype"); }
@font-face {
  font-family: 'RobotoLight';
  src: url("font/Roboto/Roboto-Regular.ttf") format("truetype"); }
@font-face {
  font-family: 'Luckiest_Guy';
  src: url("font/Luckiest_Guy/LuckiestGuy-Regular.ttf") format("truetype"); }
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

/* Firefox */
input[type=number] {
  -moz-appearance: textfield; }

.slide {
  width: 100vw;
  height: 100vh; }

.keypad {
  display: flex;
  flex-direction: column;
  min-width: 220px; }
  .keypad .keyHeader {
    font-size: 1.5em;
    text-align: center;
    font-family: 'Roboto';
    display: flex;
    background-color: black;
    color: white; }
    .keypad .keyHeader .keyBack {
      flex-grow: 1;
      text-align: left; }
    .keypad .keyHeader .keyText {
      flex-grow: 1;
      padding: 12px 20px 0 20px; }
      .keypad .keyHeader .keyText .keyName {
        max-height: 25px;
        overflow: hidden; }
      .keypad .keyHeader .keyText .keySubText {
        font-size: 0.6em; }
    .keypad .keyHeader .keyNum {
      flex-grow: 1;
      text-align: right;
      padding-top: 8px; }
      .keypad .keyHeader .keyNum .keyScore {
        font-size: 0.8em; }
  .keypad .keyStart {
    text-align: center;
    font-size: 2em;
    background-color: red;
    height: 2em; }
    .keypad .keyStart .hand {
      height: 2em; }
  .keypad .keyButtons {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    align-items: stretch;
    font-family: 'Luckiest_Guy';
    color: white;
    align-content: flex-start; }
    .keypad .keyButtons .keyButton {
      font-size: 3em;
      min-width: 55px;
      text-align: center;
      flex-grow: 1;
      height: 35vh;
      line-height: 35vh; }
      .keypad .keyButtons .keyButton.keyA {
        background-color: #149fed; }
      .keypad .keyButtons .keyButton.keyB {
        background-color: #f06416; }
      .keypad .keyButtons .keyButton.keyC {
        background-color: #6dbc31; }
      .keypad .keyButtons .keyButton.keyD {
        background-color: #f3ee0f; }
      .keypad .keyButtons .keyButton.keyE {
        background-color: #b72a89; }
      .keypad .keyButtons .keyButton.keyF {
        background-color: #e10021; }
      .keypad .keyButtons .keyButton .keyButtonSelected {
        height: 18px;
        background-color: rgba(255, 255, 255, 0.3);
        display: none; }
    .keypad .keyButtons .break {
      flex-basis: 100%;
      height: 0px; }

.login {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 20px 20% 22% 16% 16% 16%;
  min-width: 220px; }
  .login .grid-item-login {
    text-align: center;
    align-self: center; }
  .login .top-bar {
    background-color: black;
    height: 20px; }
  .login .app-title {
    font-family: 'Roboto';
    color: gray; }
  .login .reg {
    font-size: 20px;
    margin: 0 10% 0 10%; }
  .login .subreg {
    font-size: 12px;
    margin: 0 10% 0 10%;
    font-family: 'RobotoLight'; }
  .login .pin-code-field {
    height: 40px;
    background-color: #e6e6e6;
    color: black;
    font-size: 15px;
    border: none;
    border-radius: 5px;
    text-align: center;
    width: 80%; }
  .login .nickname-field {
    height: 40px;
    background-color: #e6e6e6;
    color: gray;
    font-size: 15px;
    border: none;
    border-radius: 5px;
    text-align: center;
    width: 80%;
    margin-top: 10px; }
  .login .button-go {
    height: 40px;
    background-color: black;
    color: white;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    text-align: center;
    width: 80%;
    margin-top: 10px;
    padding: 10px; }

.final {
  display: grid;
  grid-template-columns: 30px auto 60px;
  grid-row-gap: 5px;
  min-width: 220px;
  font-family: 'Roboto';
  font-size: 20px;
  background-color: black;
  align-items: stretch;
  justify-items: stretch; }
  .final .one {
    background-color: #303030;
    color: white;
    text-align: center; }
  .final .grid-final-item {
    display: flex;
    justify-content: center;
    align-items: center; }
  .final .two {
    background-color: #303030;
    color: white;
    text-align: center;
    grid-column: 2 / 4; }
  .final .fullline {
    grid-column: 1 / 4; }
  .final .whitetitle {
    width: 100%;
    background-color: transparent;
    color: white;
    font-family: 'Roboto';
    border-collapse: collapse;
    text-align: center; }
  .final .orange-bar {
    width: 100%;
    background-color: #b1621e;
    color: white;
    font-family: 'RobotoLight';
    border-collapse: collapse;
    text-align: center; }
  .final .pri-img {
    height: 30px; }
  .final .firstpoint {
    color: white;
    background-color: #b09502; }
  .final .secondpoint {
    color: white;
    background-color: #858585; }
  .final .thirdpoint {
    color: white;
    background-color: #8e5722; }
  .final .prize {
    color: #303030; }
  .final .first {
    background-color: #fed600; }
  .final .second {
    background-color: #bfbfbf; }
  .final .third {
    background-color: #cc7e23; }

  .divvideo {
    width: 100%;
    height: auto;
  }
/*# sourceMappingURL=style.css.map */