@font-face {
  font-family: EnvyCodeR;
  src: url("./fonts/envy/EnvyCodeR.ttf");
}

@font-face {
  font-family: EnvyCodeR;
  src: url("./fonts/envy/EnvyCodeRBold.ttf");
  font-weight: bold
}

@font-face {
  font-family: EnvyCodeR;
  src: url("./fonts/envy/EnvyCodeRItalic.ttf");
  font-style: italic
}

body {
  background: #111;
  font-family: EnvyCodeR;
  color: #fff;
  height: 100%;
  overflow-x: hidden;
}

@media only screen and (max-width: 500px) {
  .upperThird {
    font-size: 2em !important;
  }
  .menu {
    transform: scale(0.6);
    top: calc(2em + 16px * 2) !important;
  }
  #about {
    transform: scale(0.3);
    margin-top: 0 !important;
  }
  #about.hidden {
    transform: scale(0.1);
    margin-top: 0 !important;
  }
  footer {
    font-size: 0.6em !important;
  }
}

::-webkit-scrollbar {
  display: none;
}

html {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.ns {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#menus {
  opacity: 1;
  transition: .5s opacity, .5s visibility;
}

#menus.hidden {
  opacity: 0;
  visibility: hidden;
}

#menus.practice-game {
  transition: 2s opacity, 2s visibility, 2s transform;
}

#menus.practice-game.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.1);
}

.upperThird {
  font-size: 3em;
  color: #fff;
  text-align: center;
  height: 2em;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  margin-left: 50%;
  margin-right: 50%;
  transform: translate(-50%, 0);
  object-fit: contain
}

.preloader {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;

  transition: 0.2s transform, 0.2s visibility;

  .header {
    height: 7em;
    width: 100%;
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    background-color: #151515;

    display: flex;
    flex-direction: row;
    align-items: center;

    .header-logo {
      margin: 1em;
      margin-right: 3.5em;
    }

    img {
      color: #fff;
      text-align: center;
      height: 4.5em;
    }

    a {
      color: inherit;
      text-decoration: inherit;
    }

    .header-button {
      width: 6em;
      text-align: center;
      font-weight: 700;
      font-size: 1.1rem;
      height: 100% !important;

      display: flex;

      p {
        width: 100%;
        align-self: center;
      }

      &[id="preloader-play"]:hover {
        background-color: #a5a5a58f;
      }
      
      &[id="preloader-about"]:hover {
        background-color: #57ff158f;
      }

      &:hover {
        cursor: pointer;
      }
    }
  }
}

.preloader.hidden {
  transform: translate(0, -7em);
  visibility: hidden !important;
}

.menu {
  position: absolute;
  top: calc(3em + 32.160 * 2);
  left: 50vw;
  translate: -50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: .5s opacity, .5s filter, .5s visibility, .5s transform;
}

.menu.hidden {
  filter: blur(10px);
  opacity: 0;
  transform: scale(0.1);
  visibility: hidden;
}

.main-menu-item {
  background-color: rgb(43, 43, 43);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  margin: 0;
  justify-content: center;
  align-items: center;
  width: 15em;
  height: 15em;
  border-top: 5px solid rgb(54, 54, 54);
  border-left: 5px solid rgb(61, 61, 61);
  border-bottom: 5px solid rgb(37, 37, 37);
  border-right: 5px solid rgb(29, 29, 29);
  transition:
    width 0.4s ease,
    height 0.4s ease,
    top 0.4s ease,
    left 0.4s ease,
    transform 0.4s ease,
    filter 0.1s ease;

  &.large {
    width: calc(45em + (10px * 2) + (5px * 2));
  }
}

.main-menu-group {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 5px;
}

.main-menu-item:hover {
  transform: scale(1.025);
  filter: brightness(1.15);
  cursor: pointer;

  &.disabled {
    transform: scale(1);
    filter: brightness(1);
    cursor: default;
  }
}

.main-menu-item.opened {
  width: 80vw;
  height: 80vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#play-practice {
  background-color: #282;
  border-top: 5px solid rgb(38, 153, 38);
  border-left: 5px solid rgb(48, 175, 48);
  border-bottom: 5px solid rgb(30, 119, 30);
  border-right: 5px solid rgb(32, 129, 32);
}

.menu-block {
  position: absolute;
  top: calc(3em + 32.160 * 2);
  left: 50vw;
  translate: -50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  transition: .5s opacity, .5s filter, .5s visibility, .5s transform;
}

.menu-block.hidden {
  filter: blur(10px);
  opacity: 0;
  transform: scale(0.1);
  visibility: hidden;
}

.menu-block[id="practice"] {
  .main-menu-block {
    /*width: 50vw;*/
    padding: 1em;

    background-color: #282;
    border-top: 5px solid rgb(38, 153, 38);
    border-left: 5px solid rgb(48, 175, 48);
    border-bottom: 5px solid rgb(30, 119, 30);
    border-right: 5px solid rgb(32, 129, 32);
    
    margin-bottom: 1em;

    .main-menu-text {
      margin: 0;
      margin-bottom: .25em;
    }

    .main-menu-text:last-child {
      margin-bottom: 0;
    }
  }

  .main-menu-block-starter {
    background-color: #282;
    border-top: 5px solid rgb(38, 153, 38);
    border-left: 5px solid rgb(48, 175, 48);
    border-bottom: 5px solid rgb(30, 119, 30);
    border-right: 5px solid rgb(32, 129, 32);
    color: rgb(89, 189, 89);

    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    transition: .5s filter, .5s color;

    h1 {
      font-size: 3em;
      line-height: 100%;
      height: max-content;
      text-align: center;
    }
  }

  .main-menu-block-starter:hover {
    cursor: pointer;
    filter: brightness(1.1);
  }

  .main-menu-block-edit {
    width: auto;

    background-color: #282;
    border-top: 5px solid rgb(38, 153, 38);
    border-left: 5px solid rgb(48, 175, 48);
    border-bottom: 5px solid rgb(30, 119, 30);
    border-right: 5px solid rgb(32, 129, 32);
    
    margin-bottom: 1em;

    display: flex;


    .main-menu-block-edit.edit-button {
      background-color: rgb(40, 158, 40);
      color: rgb(89, 189, 89);
      border: none;

      margin: 0;
      flex-grow: 0.5;

      transition: .5s filter, .5s color;

      h1 {
        font-size: 3em;
        line-height: 100%;
        height: max-content;
        text-align: center;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .main-menu-block-edit.edit-button:hover {
      filter: brightness(1.15);
      color: rgb(77, 180, 77);
      cursor: pointer;
    }
    
    .main-menu-block-edit.edit-info {
      border: none;

      margin-top: 1em;
      margin-bottom: 1em;
      margin-left: 1em;
      flex-direction: column;
      flex-grow: 2;
      height: 100%;
    }

    .main-menu-text {
      margin: 0;
      margin-bottom: .25em;
    }

    .main-menu-text:last-child {
      margin-bottom: 0;
    }
  }

  .main-menu-block:last-child {
    margin-bottom: 0;
  }

  .main-menu-block-edit {
    width: auto;

    background-color: #282;
    border-top: 5px solid rgb(38, 153, 38);
    border-left: 5px solid rgb(48, 175, 48);
    border-bottom: 5px solid rgb(30, 119, 30);
    border-right: 5px solid rgb(32, 129, 32);
    
    margin-bottom: 1em;

    display: flex;
  }
}

.menu-block[id="blitz"] {
  .main-menu-block {
    /*width: 50vw;*/
    padding: 1em;

    background-color: #c14538;
    border-top: 5px solid #eb5545;
    border-left: 5px solid #c95042;
    border-bottom: 5px solid #92342a;
    border-right: 5px solid #bb3b2c;
    
    margin-bottom: 1em;

    .main-menu-text {
      margin: 0;
      margin-bottom: .25em;
    }

    .main-menu-text:last-child {
      margin-bottom: 0;
    }
  }

  .main-menu-block-starter {
    background-color: #c14538;
    border-top: 5px solid #eb5545;
    border-left: 5px solid #c95042;
    border-bottom: 5px solid #92342a;
    border-right: 5px solid #bb3b2c;
    color: #f98578;

    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    transition: .5s filter, .5s color;

    h1 {
      font-size: 3em;
      line-height: 100%;
      height: max-content;
      text-align: center;
    }
  }

  .main-menu-block-starter:hover {
    cursor: pointer;
    filter: brightness(1.1);
  }

  .main-menu-block-edit {
    width: auto;

    background-color: #c14538;
    border-top: 5px solid #eb5545;
    border-left: 5px solid #c95042;
    border-bottom: 5px solid #92342a;
    border-right: 5px solid #bb3b2c;
    
    margin-bottom: 1em;

    display: flex;


    .main-menu-block-edit.edit-button {
      background-color: #e75f50;
      color: #f98578;
      border: none;

      margin: 0;
      flex-grow: 0.5;

      transition: .5s filter, .5s color;

      h1 {
        font-size: 3em;
        line-height: 100%;
        height: max-content;
        text-align: center;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .main-menu-block-edit.edit-button:hover {
      filter: brightness(1.15);
      color: #fd6757;
      cursor: pointer;
    }
    
    .main-menu-block-edit.edit-info {
      border: none;

      margin-top: 1em;
      margin-bottom: 1em;
      margin-left: 1em;
      flex-direction: column;
      flex-grow: 2;
      height: 100%;
    }

    .main-menu-text {
      margin: 0;
      margin-bottom: .25em;
    }

    .main-menu-text:last-child {
      margin-bottom: 0;
    }
  }

  .main-menu-block:last-child {
    margin-bottom: 0;
  }

  .main-menu-block-edit {
    width: auto;

    background-color: #c14538;
    border-top: 5px solid #eb5545;
    border-left: 5px solid #c95042;
    border-bottom: 5px solid #92342a;
    border-right: 5px solid #bb3b2c;
    
    margin-bottom: 1em;

    display: flex;
  }
}

.menu-block[id="blitz-game-summary"] {
  .main-menu-block {
    width: 50vw;
    padding: 1em;

    background-color: #c14538;
    border-top: 5px solid #eb5545;
    border-left: 5px solid #c95042;
    border-bottom: 5px solid #92342a;
    border-right: 5px solid #bb3b2c;
    
    margin-bottom: 1em;

    .main-menu-text {
      margin: 0;
      margin-bottom: .25em;
    }

    .main-menu-text.score {
      padding: 1rem;
      font-size: 3em;
      font-weight: 700;
      text-align: center;
      margin: 0;
      margin-bottom: .25em;
    }

    .main-menu-text:last-child {
      margin-bottom: 0;
    }
  }

  .score-background {
    background-color: #581d1d;
    width: 100%;
    border-radius: 3px;
  }

  .main-menu-block-starter {
    background-color: #c14538;
    border-top: 5px solid #eb5545;
    border-left: 5px solid #c95042;
    border-bottom: 5px solid #92342a;
    border-right: 5px solid #bb3b2c;
    color: #f98578;

    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    transition: .5s filter, .5s color;

    h1 {
      font-size: 3em;
      line-height: 100%;
      height: max-content;
      text-align: center;
    }
  }

  .main-menu-block-starter:hover {
    cursor: pointer;
    filter: brightness(1.1);
  }

  .main-menu-block-edit {
    width: auto;

    background-color: #c14538;
    border-top: 5px solid #eb5545;
    border-left: 5px solid #c95042;
    border-bottom: 5px solid #92342a;
    border-right: 5px solid #bb3b2c;
    
    margin-bottom: 1em;

    display: flex;


    .main-menu-block-edit.edit-button {
      background-color: #e75f50;
      color: #f98578;
      border: none;

      margin: 0;
      flex-grow: 0.5;

      transition: .5s filter, .5s color;

      h1 {
        font-size: 3em;
        line-height: 100%;
        height: max-content;
        text-align: center;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .main-menu-block-edit.edit-button:hover {
      filter: brightness(1.15);
      color: #fd6757;
      cursor: pointer;
    }
    
    .main-menu-block-edit.edit-info {
      border: none;

      margin-top: 1em;
      margin-bottom: 1em;
      margin-left: 1em;
      flex-direction: column;
      flex-grow: 2;
      height: 100%;
    }

    .main-menu-text {
      margin: 0;
      margin-bottom: .25em;
    }

    .main-menu-text:last-child {
      margin-bottom: 0;
    }
  }

  .main-menu-block:last-child {
    margin-bottom: 0;
  }

  .main-menu-block-edit {
    width: auto;

    background-color: #c14538;
    border-top: 5px solid #eb5545;
    border-left: 5px solid #c95042;
    border-bottom: 5px solid #92342a;
    border-right: 5px solid #bb3b2c;
    
    margin-bottom: 1em;

    display: flex;
  }
}

.menu-block-riser.hidden {
  transform: translate(-50%, 150%) !important;
}

.menu-block-riser.practice#practice-disallow {
  transform: translate(-50%, 0);
  z-index: 2;
  position: fixed;
  left: 50%;
  width: max-content;
  
  transition: .5s transform;

  .main-menu-block {
    height: 100vh;
    width: 50vw;
    padding: 1em;

    background-color: #282;
    border-top: 5px solid rgb(38, 153, 38);
    border-left: 5px solid rgb(48, 175, 48);
    border-bottom: 5px solid rgb(30, 119, 30);
    border-right: 5px solid rgb(32, 129, 32);
    

    .main-menu-text {
      margin: 0;
      margin-bottom: .25em;
    }
  }
}

.menu-block-riser.blitz#practice-disallow {
  transform: translate(-50%, 0);
  z-index: 2;
  position: fixed;
  left: 50%;
  width: max-content;
  
  transition: .5s transform;

  .main-menu-block {
    height: 100vh;
    width: 50vw;
    padding: 1em;

    background-color: #c14538;
    border-top: 5px solid #eb5545;
    border-left: 5px solid #c95042;
    border-bottom: 5px solid #92342a;
    border-right: 5px solid #bb3b2c;
    

    .main-menu-text {
      margin: 0;
      margin-bottom: .25em;
    }
  }
}

#open-about {
  background-color: rgb(43, 43, 43);
  border-top: 5px solid rgb(54, 54, 54);
  border-left: 5px solid rgb(61, 61, 61);
  border-bottom: 5px solid rgb(37, 37, 37);
  border-right: 5px solid rgb(29, 29, 29);
}

#play-blitz {
  background-color: #c14538;
  border-top: 5px solid #eb5545;
  border-left: 5px solid #c95042;
  border-bottom: 5px solid #92342a;
  border-right: 5px solid #bb3b2c;
}

#open-multiplayer-annc {
  background-image: linear-gradient(180deg,rgba(163, 126, 82, 1) 0%, rgba(163, 89, 42, 1) 50%, rgba(92, 2, 51, 1) 100%);
  border-top: 5px solid rgb(197, 153, 99);
  border-left: 5px solid rgba(163, 89, 42, 1);
  border-bottom: 5px solid rgb(68, 1, 38);
  border-right: 5px solid rgba(163, 89, 42, 1);

  height: 7em;

  h1 {
    margin: 0;
    text-shadow: 0 2px 0px#000;
  }

  h3 {
    margin: 0;
    text-shadow: 0 2px 0px#000;
  }
}

#about {
  margin-top: 3em;
  display: flex;
  flex-direction: column;
  padding-bottom: 5rem;
  
  .credit-group-name {
    font-size: 1.5em;
    font-weight: 400;
    margin-top: 3em;
    text-align: center;
  }
  .credit-group {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 2em
  }
}

.credit {
  h1 {
    margin: 0;
  }
  p {
    margin: 0;
    color: #c5c5c5;
  }
  
  padding-bottom: 1.5em;
  text-align: center;
  width: 100%;
}

.credit.giant-credit {
  h1 {
    margin: 0;
    font-size: 3em;
  }
  p {
    margin: 0;
    color: #c5c5c5;
    font-size: 2em;
  }
}

.leftside-overlay {
  width: 5em;
  height: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(43, 43, 43);
  border-top: 5px solid rgb(54, 54, 54);
  border-left: 5px solid rgb(61, 61, 61);
  border-bottom: 5px solid rgb(37, 37, 37);
  border-right: 5px solid rgb(29, 29, 29);
  z-index: 99;

  transition: .5s transform;

  h1 {
    font-size: 1.5em;
  }
}

.leftside-overlay.hidden {
  transform: translate(-150%);
}

footer {
  background-color: rgb(43, 43, 43);
  border-top: 2px solid rgb(61, 61, 61);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999999;
  width: calc(100vw - 1em);
  height: max-content;
  padding: 0.5em;
  display: flex;
  justify-content: space-between;
  transition: .5s transform;
}

footer.hidden {
  transform: translate(0,200%);
}

.menu-description {
  margin: 0;
  text-align: right;
  font-weight: 400;
}

.menu-description[id="main"] {
  color: rgba(255, 255, 255, 0.4);
}

.menu-description[id="practice"] {
  color: rgba(43, 255, 0, 0.4);
}

#ownership {
  margin: 0;
  color:rgba(255, 255, 255, 0.4);
  text-align: right;
}

#ownership a {
  color:rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: .5s color;
}

#ownership a:hover {
  color:rgba(255, 255, 255, 1);
  text-decoration: none;
}

.popup-window {
  min-width: 35vw;
  max-width: 50vw;
  height: max-content;
  
  background-color: #eeeeee;
  color: #000;
  box-shadow: 0 0 8px #000;
  
  padding: 1rem;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border-radius: 5px;
  overflow: hidden;

  transition: .5s opacity, .5s filter, .5s visibility, .5s transform;
}

.popup-blind {
  z-index: 9999997;
  background-color: #000;
  opacity: 0.5;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;

  transition: .5s opacity, .5s filter, .5s visibility;
}

.popup-blind.hidden {
  filter: blur(10px);
  opacity: 0;
  visibility: hidden;
}


.popup-window.whats-new {
  height: 60vh;
  width: 75vw;
  z-index: 9999998;
  overflow-y: scroll;

  background-color: #9052a8;
  color: #fff;
  header {
    background-color: #78388e;
    border-bottom: #652b79 solid 2px;
    font-family: "MarioSolid";
    h1 {
      font-size: 2.5em;
      color: #fff;
    }
  }

  .form-button-holder {
    padding: 1em;
    background-color: #78388e;
    border-top: #652b79 solid 2px;
    width: calc(100% + 2rem - 2em);

    position: relative;
    bottom: -1rem;
    left: -1rem;
    
    #whats-new-close {
      z-index: 9999999;
    }
  }

  .form-button {
    color: #000;
    background-color: #D9B6DE;
  }

  img {
    width: 35%;
    height: 35%;
  }
}

.popup-window.hidden {
  filter: blur(10px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.1);
  visibility: hidden;
}

.popup-window header {
  text-align: center;
  width: calc(100% + 2rem);

  position: relative;
  top: -1rem;
  left: -1rem;
}

.popup-window #severity-error {
  background: linear-gradient(to top,#c14538 0,#9a1a0d 100%);
  filter: brightness(2.2);
  border-bottom: 2px solid #ff1800;
  color: #ffbbb4;
}

.popup-window #severity-warning {
  background: linear-gradient(to top,#c1b838 0,#9a980d 100%);
  filter: brightness(1.5);
  border-bottom: 2px solid #ff9900;
  color: #000000;
}

.popup-window header h1{
  font-weight: bold;
  margin: 0;
}

.popup-window h1{
  font-size: 2rem;
  margin: 0;
  font-weight: bold;
  margin-bottom: 1rem;
}

.popup-window p{
  font-size: 1rem;
  margin: 0;
}

.popup-window .text-also{
  font-size: 1rem;
  margin: 0;
  margin-top: 1rem;
  color: #858585;
}

.form-button-holder {
  display: flex;
  flex-wrap: wrap;
  /*margin: -1em;
  margin-top: .4em;
  padding: .5em .5em;
  text-align: center;
  background-color: #ccc;
  border-radius: 0 0 3px 3px;*/
}

.form-button {
  height: max-content;
  background-color: #c5c5c5;
  border-radius: 3px;
  flex-grow: 1;
  margin-right: .25em;
  cursor: pointer;

  p {
    font-size: 1.45em;
    padding: 3px;
    text-align: center;
  }
}

.form-button:last-child {
  margin-right: 0;
}

.form-button.primary {
  transition: background-color .5s;
  background-color: #0020B3;
  
  p {
    color: #cbd5ff;
  }
}

.form-button.primary:hover {
  transition: background-color .5s;
  background-color: #4669ff;
}

.form-button.disabled {
  transition: filter .5s;
  filter: brightness(0.5);
  cursor: not-allowed;
}

.form-button.disabled:hover {
  transition: filter .5s;
  filter: hue-rotate(120deg) brightness(0.5);
}

input {
  font: inherit;
}

/* ===== TABLE ===== */

.I-A { grid-area: IA; }
.II-A { grid-area: IIA; }
.III-B { grid-area: IIIB; }
.IV-B { grid-area: IVB; }
.V-B { grid-area: VB; }
.VI-B { grid-area: VIB; }
.VII-B { grid-area: VIIB; }
.VIII-B { grid-area: VIIIB; width: calc((3em * 3) + (0.5em * 4)) !important; }
.I-B { grid-area: IB; }
.II-B { grid-area: IIB; }
.III-A { grid-area: IIIA; }
.IV-A { grid-area: IVA; }
.V-A { grid-area: VA; }
.VI-A { grid-area: VIA; }
.VII-A { grid-area: VIIA; }
.VIII-A { grid-area: VIIIA; }
.LANTHANIDES { grid-area: LAN; width: calc((3em * 2) + (0.5em * 2)) !important; height: 3em !important;}
.ACTINIDES { grid-area: ACT; width: calc((3em * 2) + (0.5em * 2)) !important; height: 3em !important;}
.H { grid-area: H; }
.Li { grid-area: Li; }
.Na { grid-area: Na; }
.K { grid-area: K; }
.Rb { grid-area: Rb; }
.Cs { grid-area: Cs; }
.Fr { grid-area: Fr; }
.Be { grid-area: Be; }
.Mg { grid-area: Mg; }
.Ca { grid-area: Ca; }
.Sr { grid-area: Sr; }
.Ba { grid-area: Ba; }
.Ra { grid-area: Ra; }
.Sc { grid-area: Sc; }
.Y { grid-area: Y; }
.Ti { grid-area: Ti; }
.Zr { grid-area: Zr; }
.Hf { grid-area: Hf; }
.Rf { grid-area: Rf; }
.V { grid-area: V; }
.Nb { grid-area: Nb; }
.Ta { grid-area: Ta; }
.Db { grid-area: Db; }
.Cr { grid-area: Cr; }
.Mo { grid-area: Mo; }
.W { grid-area: W; }
.Sg { grid-area: Sg; }
.Mn { grid-area: Mn; }
.Tc { grid-area: Tc; }
.Re { grid-area: Re; }
.Bh { grid-area: Bh; }
.Fe { grid-area: Fe; }
.Ru { grid-area: Ru; }
.Os { grid-area: Os; }
.Hs { grid-area: Hs; }
.Co { grid-area: Co; }
.Rh { grid-area: Rh; }
.Ir { grid-area: Ir; }
.Mt { grid-area: Mt; }
.Ni { grid-area: Ni; }
.Pd { grid-area: Pd; }
.Pt { grid-area: Pt; }
.Ds { grid-area: Ds; }
.Cu { grid-area: Cu; }
.Ag { grid-area: Ag; }
.Au { grid-area: Au; }
.Rg { grid-area: Rg; }
.Zn { grid-area: Zn; }
.Cd { grid-area: Cd; }
.Hg { grid-area: Hg; }
.Cn { grid-area: Cn; }
.B { grid-area: B; }
.Al { grid-area: Al; }
.Ga { grid-area: Ga; }
.In { grid-area: In; }
.Tl { grid-area: Tl; }
.Nh { grid-area: Nh; }
.C { grid-area: C; }
.Si { grid-area: Si; }
.Ge { grid-area: Ge; }
.Sn { grid-area: Sn; }
.Pb { grid-area: Pb; }
.Fl { grid-area: Fl; }
.N { grid-area: N; }
.P { grid-area: P; }
.As { grid-area: As; }
.Sb { grid-area: Sb; }
.Bi { grid-area: Bi; }
.Mc { grid-area: Mc; }
.O { grid-area: O; }
.S { grid-area: S; }
.Se { grid-area: Se; }
.Te { grid-area: Te; }
.Po { grid-area: Po; }
.Lv { grid-area: Lv; }
.F { grid-area: F; }
.Cl { grid-area: Cl; }
.Br { grid-area: Br; }
.I { grid-area: I; }
.At { grid-area: At; }
.Ts { grid-area: Ts; }
.He { grid-area: He; }
.Ne { grid-area: Ne; }
.Ar { grid-area: Ar; }
.Kr { grid-area: Kr; }
.Xe { grid-area: Xe; }
.Rn { grid-area: Rn; }
.Og { grid-area: Og; }
.La { grid-area: La; }
.Ce { grid-area: Ce; }
.Pr { grid-area: Pr; }
.Nd { grid-area: Nd; }
.Pm { grid-area: Pm; }
.Sm { grid-area: Sm; }
.Eu { grid-area: Eu; }
.Gd { grid-area: Gd; }
.Tb { grid-area: Tb; }
.Dy { grid-area: Dy; }
.Ho { grid-area: Ho; }
.Er { grid-area: Er; }
.Tm { grid-area: Tm; }
.Yb { grid-area: Yb; }
.Lu { grid-area: Lu; }
.Ac { grid-area: Ac; }
.Th { grid-area: Th; }
.Pa { grid-area: Pa; }
.U { grid-area: U; }
.Np { grid-area: Np; }
.Pu { grid-area: Pu; }
.Am { grid-area: Am; }
.Cm { grid-area: Cm; }
.Bk { grid-area: Bk; }
.Cf { grid-area: Cf; }
.Es { grid-area: Es; }
.Fm { grid-area: Fm; }
.Md { grid-area: Md; }
.No { grid-area: No; }
.Lr { grid-area: Lr; }

.periodic-table {
  width: max-content;
  height: max-content;
  display: grid;
  grid-gap: 0.5em;
  grid-template-columns: repeat(18, 3.5em);
  grid-template-rows: repeat(11, 3.5em);
  grid-template-areas: 
    "IA IIA IIIB IVB VB VIB VIIB VIIIB VIIIB VIIIB IB IIB IIIA IVA VA VIA VIIA VIIIA" 
    "H . . . . . . . . . . . . . . . . He"
    "Li Be . . . . . . . . . . B C N O F Ne"
    "Na Mg . . . . . . . . . . Al Si P S Cl Ar"
    "K Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br Kr" 
    "Rb Sr Y Zr Nb Mo Tc Ru Rh Pd Ag Cd In Sn Sb Te I Xe" 
    "Cs Ba . Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At Rn"
    "Fr Ra . Rf Db Sg Bh Hs Mt Ds Rg Cn Nh Fl Mc Lv Ts Og"
    ". . . . . . . . . . . . . . . . . ."
    ". LAN LAN La Ce Pr Nd Pm Sm Eu Gd Tb Dy Ho Er Tm Yb Lu"
    ". ACT ACT Ac Th Pa U Np Pu Am Cm Bk Cf Es Fm Md No Lr";
  justify-items: center;
  transform-origin: top right;
  position: relative;
  top: 0;
  left: 0;
  transform: translate(0) scale(1);
}

.periodic-table-element {
    background-color: rgb(43, 43, 43);
    border-top: 5px solid rgb(54, 54, 54);
    border-left: 5px solid rgb(61, 61, 61);
    border-bottom: 5px solid rgb(37, 37, 37);
    border-right: 5px solid rgb(29, 29, 29);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3em;
    height: 3em;
    text-align: center;
    transition: .1s background-color, .1s border-top, .1s border-left, .1s border-bottom, .1s border-right, .1s transform, .1s filter;
    h2 {
        margin: 0;
    }
}

.periodic-table-element:hover {
  transform: scale(1.025);
  filter: brightness(1.15);
  cursor: pointer;
}

.periodic-table-element.deselected {
    background-color: rgb(134, 50, 50);
    border-top: 5px solid rgb(100, 37, 37);
    border-left: 5px solid rgb(97, 32, 32);
    border-bottom: 5px solid rgb(172, 65, 65);
    border-right: 5px solid rgb(170, 70, 70);
    color: rgb(53, 39, 39);
}

.periodic-table-period {
    background-color: rgb(43, 43, 43);
    border-top: 5px solid rgb(54, 54, 54);
    border-left: 5px solid rgb(61, 61, 61);
    border-bottom: 5px solid rgb(37, 37, 37);
    border-right: 5px solid rgb(29, 29, 29);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3em;
    height: 1.5em;
    text-align: center;

    transition: .1s background-color, .1s border-top, .1s border-left, .1s border-bottom, .1s border-right, .1s transform, .1s filter;

    h2 {
        margin: 0;
    }
}

.periodic-table-period:hover {
  transform: scale(1.025);
  filter: brightness(1.15);
  cursor: pointer;
}

/* ===== GAME BOARD ===== */

.practice-game {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  

  #query {
    text-align: center;
  }

  #element_query {
    width: calc(100% - (0.5em * 2) - (5px * 2));
    padding: 0.5em;
    background-color: rgb(43, 43, 43);
    border-bottom: 5px solid rgb(54, 54, 54);
    border-right: 5px solid rgb(61, 61, 61);
    border-top: 5px solid rgb(37, 37, 37);
    border-left: 5px solid rgb(29, 29, 29);
    color: #fff;

    transition: .1s box-shadow;
  }

  #element_query:focus {
    box-shadow: 0 0 8px #4669ff;
    outline: none;
  }

  div {
    display: flex;
    justify-content: space-between;
    gap: 0.5em;
  }

  #score {
    vertical-align: text-top;
  }

  #streak {
    vertical-align: top; text-align: right;
  }

  #timer {
    text-align: center;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0%);

    font-size: 5em;
    font-weight: 700;
    margin: 0;
    opacity: 0.4;
    filter: blur(2px);
  }
}
.forfeitBanner {
    background: linear-gradient(to top,#c14538 0,#9a1a0d 100%);
    filter: brightness(2.2);
    border-top: 2px solid #ff1800;
    color: #ffbbb4;

    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 5em;
    text-align: center;

    transition: .1s transform;

    h1 {
      font-weight: 400;
      span {
        font-weight: 700;
      }
    }
  }

.forfeitBanner.hidden {
  transform: translate(0, 150%);
}

.forfeitBanner.disabled {
  visibility: hidden;
}