::-webkit-scrollbar {
    width: 16px;
}
::-webkit-scrollbar-track {
    background-color: #333;
} 
::-webkit-scrollbar-thumb {
    background-color: #424e69;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #8295d5;
}

@font-face {
    font-family: 'Quadrit'; 
    src: url('../css/Quadrit.ttf'); 
}

* {
    font-family: Quadrit, sans-serif;
    color: #fff;
    font-size: 1rem;
}

html, body  {
    background-color: #000;
}

.score div {
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 2px;
}

#message {
    position: absolute;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 2px;
    color: #fff200;
    text-align: center;
}
#message.red {
    color: red;
}
span.combo, span.fruits {
    position: absolute;
    letter-spacing: 1.5px;
    font-size: 1rem;
    color: #89dfff;
    font-weight: normal;
}
#board {
    position: relative;
    width: 100%;
}

#canvas-board, #canvas-paths, #canvas-fruits, #canvas-pacman, #canvas-bubbles, #canvas-ghost-blinky, #canvas-ghost-pinky, #canvas-ghost-inky, #canvas-ghost-clyde {
    width: 100%;
    object-fit: contain;
    position: absolute;
    right: 0%;
}

@media (min-width: 992px) {
    #canvas-board, #canvas-paths, #canvas-fruits, #canvas-pacman, #canvas-bubbles, #canvas-ghost-blinky, #canvas-ghost-pinky, #canvas-ghost-inky, #canvas-ghost-clyde {
        width: 85%;
        right:8%;
    }
}


#canvas-paths {
    display: none;
}


#settings, #canvas-lifes, #canvas-level-fruits {
    position: absolute;
}

#control {
    position: absolute;
    left: calc(50vw - 32px);
    bottom: 64px;
    background-color: #666;
    opacity: 0.7;
}
#control-up, #control-down, #control-left, #control-right, #control-pause {
    position: absolute;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 64px;
    cursor: pointer;
    width: 64px;
    height: 64px;
    padding: 5px;
}

#control-up {
    top: -128px;
    background-image: url('../img/move-up-big.png');
}

#control-down {
    background-image: url('../img/move-down-big.png');
}

#control-left {
    top: -64px;
    left: -69px;
    background-image: url('../img/move-left-big.png');
}

#control-right {
    top: -64px;
    left: 69px;
    background-image: url('../img/move-right-big.png');
}

#control-pause {
    top: -64px;
    left: 160px;
    background-image: url('../img/pause.png');
}

.sound img {
    height: 18px;
}

.help-button {
    font-weight: bold;
    text-transform: lowercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    color: #78abf7;
    transition: color 1.5s;
}

.help-button.yo {
    color: #333;
}
#panel .help-button {
    top: -510px;
    height: 25px;
}


#background-help {
    width: 100vw;
    height: 100vh;
    z-index: 9999999;
    top: 0;
    left: 0;
    position: fixed;
  }
  
#help {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
    z-index: 1000001;
    text-align: center;
    z-index: 999999;
    background-color: #222;
    border: solid 1px #193fff;
    text-transform: uppercase;
    opacity: 0.9;
    cursor: pointer;
    padding: 15px;
 }

#help h2 {
    margin: 0px 0px 10px 0px;
    color: #d43b3b;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.2rem;
}

#help  table  tr  td {
    font-size: 1rem;
    letter-spacing: 1px;
}
#help  table  tr  td:first-child {
    color: #f4c030;
    font-weight: bold;
    text-align: right;
}
#help  table  tr  td:last-child {
    text-align: left;
}

.ui-mobile {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}


#newversion{
    cursor: pointer;
}

.cursor-pointer {
    cursor: pointer;
}