#tooltip{
    color: var(--gold);
    margin-top: 25px;
    margin-bottom: 50px;
}

:root {
    --pixel-size: 1;
 }
 
 .Character {
    width: calc(48px * var(--pixel-size));
    height: calc(96px * var(--pixel-size));
    overflow: hidden;
    position:relative;
    visibility: hidden;
    display: flex;
}

.character-dialog{
    font-size: 10px;
    color: var(--gold);
    text-shadow: 1px 1px 0px var(--black);
    text-align: center;
    width: 100%;
    margin-bottom: 5px;
    visibility: hidden;
}
 
 .Character_spritesheet {
    animation: moveSpritesheet 1.2s steps(12) infinite;
    width: calc(576px * var(--pixel-size));
    position: absolute;
 }

 .pixelart {
    image-rendering: pixelated;
 }

 .face-down {
    top: calc(-96px * var(--pixel-size)) !important;
 }

 .face-left {
    top: calc(-192px * var(--pixel-size));
 }
 
 .face-right {
    top: calc(-288px * var(--pixel-size));
 }

 .face-up {
    top: calc(-384px * var(--pixel-size)) !important;
 }
 
 @keyframes moveSpritesheet {
    from {
       transform: translate3d(0px,0,0)
    }
    to {
       transform: translate3d(-100%,0,0)
    }
 }
 
 .keyboard {
   position: relative;
   width: 200px;
   height: 120px;
   display: none;
}

 .keyboard button {
   color : white;
   text-decoration: none;
   border: 3px solid white;
   border-radius: 5px;
   box-shadow: -2px 2px;
   flex-grow: 1;
   font-family: monospace;
   background: black;
   font-size: 20px;
   position: absolute;
   width: 50px;
   height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
}

.left {
   left: 0;
}

.right {
   right: 0;
   box-shadow: 2px -2px !important;
}

.top, .bottom {
   left: 50%;
   transform: translateX(-50%);
}

.bottom, .left, .right {
   bottom: 0px;
}

.lit{
   background: 3px solid var(--gold) !important;
   color: var(--gold) !important;
   border: 3px solid var(--gold) !important;
}