html {
    background-color: rgb(24, 26, 27);
  }

  body {
    font-family: 'Outfit', sans-serif;
    background-color: rgb(24, 26, 27);
    color: white;
    margin: 0;
  }

  a {
    color: white;
  }

  .body-ios {
    height: -moz-calc(100% - 25px) !important;
    height: -webkit-calc(100% - 25px) !important;
    height: calc(100% - 25px) !important;
    bottom: 25px;
  }

  .button {
    width: var(--boxsize);
    height: var(--boxsize);
  }

  :root {
    --boxsize: 50px;
    --spacing: 0px;
    --collapse: ;
  }

  .box {
    border: white 1px solid;

    padding: 0px;
    text-align: center;
    background-color: rgb(24, 26, 27);
    overflow: hidden;
    border-spacing: var(--spacing);
    color: white;

    user-select: none;

    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard */
  }

  .navright {
    font-size: 50%;
    border-left: 0px solid #FFFFFF;
  }

  .navleft {
    font-size: 50%;
    border-right: 0px solid #FFFFFF;
  }

  .key {
    cursor: pointer;
    touch-action: manipulation;
  }

  .bg-quad {
    color: black;
    background-size: 50% 50%;
    background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
    background-repeat: no-repeat;
  }

  .bg11 {
    background-image: linear-gradient(45deg, #919191, #919191 100%), linear-gradient(135deg, #ffcc00, #ffcc00), linear-gradient(225deg, #00cc88, #00cc88), linear-gradient(225deg, #ffcc00, #ffcc00);
  }

  .bg22 {
    background-image: linear-gradient(45deg, #919191, #919191 100%), linear-gradient(135deg, #919191, #919191), linear-gradient(225deg, #00cc88, #00cc88), linear-gradient(225deg, #00cc88, #00cc88);
  }

  .bg33 {
    background-image: linear-gradient(45deg, #00cc88, #00cc88 100%), linear-gradient(135deg, #919191, #919191), linear-gradient(225deg, #ffcc00, #ffcc00), linear-gradient(225deg, #00cc88, #00cc88);
  }

  .bg44 {
    background-image: linear-gradient(45deg, #919191, #919191 100%), linear-gradient(135deg, #ffcc00, #ffcc00), linear-gradient(225deg, #ffcc00, #ffcc00), linear-gradient(225deg, #919191, #919191);
  }

  .bg55 {
    background-image: linear-gradient(45deg, #919191, #919191 100%), linear-gradient(135deg, #00cc88, #00cc88), linear-gradient(225deg, #919191, #919191), linear-gradient(225deg, #919191, #919191);
  }

  .bg66 {
    background-image: linear-gradient(45deg, #919191, #919191 100%), linear-gradient(135deg, #919191, #919191), linear-gradient(225deg, #919191, #919191), linear-gradient(225deg, #ffcc00, #ffcc00);
  }

  .bg1 {
    background-image: linear-gradient(to right, rgb(24, 26, 27), rgb(24, 26, 27) 50%, #00cc88 50%, #00cc88);
  }

  .bg2 {
    background-image: linear-gradient(to right, rgb(24, 26, 27), rgb(24, 26, 27) 50%, #ffcc00 50%, #ffcc00);
  }

  .bg3 {
    background-image: linear-gradient(to right, #ffcc00, #ffcc00 50%, #00cc88 50%, #00cc88);
  }

  .bg4 {
    background-image: linear-gradient(to right, #00cc88, #00cc88 50%, #ffcc00 50%, #ffcc00);
  }

  .bg5 {
    background-image: linear-gradient(to right, #ffcc00, #ffcc00 50%, rgb(24, 26, 27) 50%, rgb(24, 26, 27));
  }

  .bg6 {
    background-image: linear-gradient(to right, #00cc88, #00cc88 50%, rgb(24, 26, 27) 50%, rgb(24, 26, 27));
  }

  table {
    font-size: inherit;
  }

  .table_guesses {
    border-collapse: var(--collapse);
    border-spacing: var(--spacing);
  }

  #custom {
    text-align:center;
    color:yellow;
  }