.related-links {
   position: fixed;
   bottom: 0;
   right: 0;
   background-color: #ccc;
   z-index: 2;
   padding: .1rem .2rem;
   font-family: sans-serif;
   font-size: 1.1rem;
}

.related-links div {
   display: inline-block;
   margin: 0 .1rem;
}

.related-links a {
   color: #444;
   text-decoration: none;
   transition: .2s;
}

.related-links a:focus {
   background-color: orange;
   color: #fff;
   outline: none;
}

.related-links a:hover {
   color: #222;
   text-decoration: underline;
}

/* level picker */
.level-picker * {
   overflow: hidden;
}

.level-picker {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   background-color: #e3e3e3;
   text-align: center;
   padding: 2.5rem 0;


   font-family: sans-serif;
   overflow: auto;
   padding-bottom: 3rem;
}

.level-picker img {
   image-rendering: pixelated;
}

.level-picker-element {
   display: inline-block;
   margin: 2rem;
}

.level-picker .people-container {
   display: flex;
   align-items: center;
   justify-content: center;
}

/* .level-picker .people-container img:hover {
   transform: rotate(90deg);
} */

.level-picker .image-container {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 1rem auto;
   width: 15rem;
   height: 15rem;
}

.level-picker-element * {
   margin: .4rem 0;
}

.level-picker-element button {
   padding: .25rem .5rem;
   font-size: 1.1rem;
}

/* Multiplayer menu */
.multiplayer-menu {
   position: fixed;
   right: 0;
   bottom: 0;
   left: 0;
   transition: all .2s;
}

.multiplayer-menu .inner {
   display: inline-block;
   text-align: center;
   border-radius: 1.5em;
   background-color: #e6e6e6;
   padding: 1.5rem 5rem;
   margin: .5rem auto;
   box-shadow: 0 .2rem .4rem #bbb;
}

.multiplayer-menu p {
   font-size: 1.2rem;
}

.room-modal {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   backdrop-filter: blur(.4em);
   background-color: #ffffff60;
   opacity: 0;
   pointer-events: none;
   transition: .2s;
}

.modal-content {
   position: relative;
   width: 30rem;
   min-height: 20rem;
   padding: 2em;
   background-color: #fff;
   box-shadow: 0 .2em .5em #ddd;
   transition: .3s;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;

   border: dotted .35rem #bbb;
}

.modal-content:hover {
   box-shadow: 0 .8em 1.5em #aaa;
}

.room-modal input {
   color: inherit;
   padding: .2rem .3rem;
   margin: .2rem;
   border-radius: .3rem;
   transition: .1s;
}
.room-modal input:focus {
   border: none;
   outline: solid .2rem orange;
}

.close-modal {
   position: absolute;
   top: 0;
   right: 0;
   margin: .5rem 1rem;
   padding: 0;
   font-size: 2rem;
   font-weight: 900;
   font-family: monospace, sans-serif;
   color: #aaa;
   background-color: transparent;
   border: none;
   transition: .2s all;
}

.close-modal:hover {
   color: red;
}

.multiplayer-menu button {
   padding: .4em .6em;
   border-radius: .4em;
}

/* Changelog */
.changelog {
   overflow: auto;
}

.changelog .content {
   text-align: left;
   max-width: 500px;
   margin: 0 auto;
}

.changelog .content h1 {
   text-align: center;
}

.changelog .content h2 {
   margin-top: 1rem;
}

/* Open rooms */
.open-rooms .room {
   border-radius: .5rem;
   margin: .6rem 0;
   padding: .8rem;
   background-color: #eee;
}


@media (max-width: 500px) {
   .level-picker-element {
      display: block;
   }

   .multiplayer-menu .inner {
      margin: 0;
      border-radius: 0;
      box-sizing: border-box;
      width: 100%;
   }
}

@media (prefers-color-scheme: dark) {
   .related-links {
      background-color: #111;
      color: #bbb;
   }
   .related-links a {
      color: #bbb;
   }
   .related-links a:hover {
      color: #fff;
   }

   .room-modal .modal-content {
      border: dotted .35rem #444;
   }

   .level-picker, .multiplayer-menu .inner, .room-modal div, .modal {
      background-color: #252525;
      color: #eee;
   }

   .room-modal {
      background-color: #22222260;
   }

   .modal-content {
      box-shadow: 0 .2em .5em #000;
   }
   .modal-content:hover {
      box-shadow: 0 .8em 1.5em #000;
   }

   .open-rooms .room {
      background-color: #333;
   }


   .multiplayer-menu .inner {
      box-shadow: 0 .1rem .6rem #111;
      border: dotted .35rem #444;
      border-radius: 0;
   }

   .room-modal input {
      background-color: #444;
      border: none;
   }

   .close-modal {
      color: #666;
      background-color: transparent;
   }
}