.container {
  display: grid;
  position: relative;
  grid-template-columns: 49% 49%;
  grid-column-gap: 2%;
  padding: 20px;

  .card {
    border-bottom: 1px solid var(--color);
    padding: 20px;
    height: 70vh;
    background: var(--dark);
    overflow: auto;
  }

  #toggle-lang {
    position: absolute;
    color: #ddf;
    padding: 5px 10px;
    right: 20px;
    top: 20px;
    z-index: 100;
    cursor: pointer;
  }

  #attempt {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 100;

    #try,
    #submit,
    #input {
      display: inline-block;
      background: transparent;
      color: #ddf;
      margin: 2px;
      cursor: pointer;
      transition: 0.25s all;
      user-select: none;

      &:hover {
        background: var(--color);
        color: var(--bgcolor);
      }

      &:hover {
        background: var(--color);
        color: var(--bgcolor);
      }

      &.disabled:hover {
        cursor: default;
        background: transparent;
        color: #ddf;
      }
    }
  }
}

label {
  display: none;
}

@media screen and (max-width: 1000px) {
  .container {
    padding: 20px 0;
  }

  #attempt, #toggle-lang {
    right: 4px !important;
  }
}

@media screen and (max-width: 900px) {
  .container {
    display: initial;
    position: relative;

    .card {
      margin: 20px 0;
      height: auto;
      max-height: 50vh;
    }

    #attempt {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background: linear-gradient(45deg, #004, #040) fixed no-repeat;
    }
  }
}
