#container {
    position: fixed;
    top: 0;
    
    color: white;
    pointer-events: none;

    display: grid;
    z-index: 100;
    height: 100vh;
    width: 100vw;
    grid-template-columns: 0.5fr 3fr 0.5fr;
    grid-template-rows: 0.5fr 3fr 0.5fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    ". . ."
    ". . ."
    ". . .";

    background-color: #010a10;
    background-image: radial-gradient(#101c4c, #010a10);
    background-repeat: no-repeat;
    color: #5bf2fe;
    font-family: 'EurostileExt';
}

#container.hidden {
    opacity: 0;
    transition: opacity 3s;
}

.debug {
    /* Using visibility: hidden / visible seems to affect sizes */
    opacity: 0;
    color: white;
}
#character-stack {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 110;
  height: 260px;
  width: 60px;
}

.character {
  width: 50%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}