div#lobby {

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

  & div#form {
    position: relative;
    background: #f0f0f0;
    padding: 1.25rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    border: 4px solid #000;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    transform: rotateX(10deg) rotateY(-10deg);
    perspective: 1000px;
    box-shadow: 10px 10px 0 #000;
    width: 16rem;

    &:hover {
      transform: rotateX(5deg) rotateY(1 deg) scale(1.05);
      box-shadow: 1.5rem 1.5rem 0 -5px burlywood, 1.5rem 1.5rem 0 0 #000;
    }

    & h3 {
      position: sticky;
      top: 0;
      font-size: 2rem;
      font-family: "Roboto", Arial, sans-serif;
      text-shadow: 1px 1px 1px #000;
      color: burlywood;
      font-size: 1rem;
      margin: 0;
    }

    span.lobby-min-players {
      font-size: 2rem;
      font-family: "Roboto", Arial, sans-serif;
      text-shadow: 1px 1px 1px #000;
      color: burlywood;
      font-size: 1rem;
      margin: 0;
      text-align: center;
    }

    table td {
      text-align: center;
      padding: 0.25rem 1.5rem;
      
      & button.ready-btn {
        padding: 0.25rem;
        font-size: 1.5rem;
        background: #fff;
        color: #000;
        transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
        &:hover {
          box-shadow: 5px 5px 0 0 #000;
          background: #f0f0f0;
          cursor: pointer;
        }
      }

      .ready-btn {
        font-family: "Font Awesome 5 Free";
        font-size: 1.5rem;
        &.ready {
          color: green;
          &::after {
            content: "\f058";
          }
        }
        &.unready {
          color: red;
          &::after {
            content: "\f057";
          }
        }
      }

    }
    & > button,
    & .button-wrapper{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90%;
      outline: none;
      border: 3px solid #000;
      padding: 0.5rem;
      font-size: 1rem;
      background: #fff;
      color: #000;
      transform: translateZ(0.65rem);
      transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
      position: relative;
      z-index: 3;
      font-family: "Roboto", Arial, sans-serif;
      &:nth-of-type(3) {
        margin-top: 1rem;
      }

    }


    & .button-wrapper button,
    & .button-wrapper a {
      letter-spacing: -0.5px;
      background-color: none;
      border: none;
      cursor: pointer;
      background: #fff;

    }
    & > button:hover,
    & > button:focus,
    & .button-wrapper:hover,
    & .button-wrapper:focus {
      background: #f0f0f0;
      transform: translateZ(1.5rem) translateX(-5px) translateY(-5px);
      box-shadow: 5px 5px 0 0 #000;
    }

  }

  & div#public {
    font-family: "Roboto", Arial, sans-serif;
    position: relative;
    background: #f0f0f0;
    padding: 1rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    border: 0.25rem solid #000;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    transform: rotateX(10deg) rotateY(-10deg);
    perspective: 1000px;
    box-shadow: 0.65rem 0.65rem 0 #000;
    width: 16rem;
    margin-top: 3rem;
    max-height: 15rem;
    overflow-y: auto;
    scrollbar-width: thin;

    &:hover {
      transform: rotateX(5deg) rotateY(1 deg) scale(1.05);
      box-shadow: 1.5rem 1.5rem 0 -5px burlywood, 1.5rem 1.5rem 0 0 #000;
    }

    & h3 {
      position: sticky;
      top: 0;
      font-size: 2rem;
      font-family: "Roboto", Arial, sans-serif;
      text-shadow: 1px 1px 1px #000;
      color: burlywood;
      font-size: 1rem;
      margin: 0; 
      & i {
        margin-left: 0.5rem;
      }
    }


    & .lobby-container {
      width: 100%;
      border-bottom: 2px solid black;

      & button:hover,
      & button:focus {
        background: #f0f0f0;
        transform: translateZ(1.5rem) translateX(-5px) translateY(-5px);
        box-shadow: 5px 5px 0 0 #000;
      }

      & div.members {
        margin-top: 0.5rem;
      }

    }

    & button {
      width: 100%;
      outline: none;
      border: 3px solid #000;
      padding: 0.5rem;
      font-size: 1rem;
      background: #fff;
      color: #000;
      transform: translateZ(0.65rem);
      transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
      position: relative;
      z-index: 3;
    }
  }

}

@media screen and (width < 400px) {

  #lobby {

    & * {
      font-size: 13px;
    }

  }

}


/* teams */

div#lobby {

  div#teams {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow-y: scroll;
    max-height: 25rem;
    div.lobby-menber-list.team {
      border-top: 1px solid #000;
      padding: 0.5rem;
      margin: 0.5rem;
      width: 100%;
    }
  }

  div.team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    p.join-leave-icon {
      border: 1px solid #000;;
      padding: 0.25rem;
      cursor: pointer;
    }
  }
}