::-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('../fonts/Quadrit.ttf');
}

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

html, body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
}
html  {
    background-color: #000;
}
body {
    position: relative;
}


#score, #highscore  {
    position: absolute;
    display: inline;
    top: 70px;
    margin: 0px;
    padding: 0px;
    width: 160px;
}
#highscore {
    left: 180px;
}
#score h2, #score span, #highscore h2, #highscore span {
    display: block;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 2px;
    font-size: 16px;
    height: 21px;
    margin: 0px;
    padding: 0px;
    text-align: right;
    padding-right: 15px;
}
#score span, #highscore span {
    padding-right: 0px;
}
#highscore span {
    padding-right: 40px;
}
#message {
    position: absolute;
    display: inline;
    top: 413px;
    left: 180px;
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 30px;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 2px;
    font-size: 20px;
    color: #fff200;
    text-align: center;
}
#message.red {
    color: red;
}

span.combo, span.fruits {
    position: absolute;
    letter-spacing: 1.5px;
    font-size: 14px;
    color: #89dfff;
    font-weight: normal;
}

#panel, #home {
    width: 550px;
    height: 690px;
    margin: auto;
    margin-top: 10px;
    left: 0px;
    right: 0px;
    position: absolute;
    padding: 5px 10px 10px 10px;
    background-color: #000;
}
#board, #canvas-board, #canvas-paths, #canvas-fruits, #canvas-pacman, #canvas-bubbles, #canvas-ghost-blinky, #canvas-ghost-pinky, #canvas-ghost-inky, #canvas-ghost-clyde {
    width: 550px;
    height: 550px;
    position: absolute;
}
#canvas-paths {
    display: none;
}
#board {
    position: relative;
}

#canvas-lives, #canvas-level-fruits {
    height: 30px;
    top: 670px;
    position: absolute;
    z-index: 111111;
}
#canvas-lives {
    width: 120px;
    left: 50px;
}
#canvas-level-fruits {
    width: 265px;
    right: 50px;
}

#control {
    position: absolute;
    margin: auto;
    left: 0px;
    right: 0px;
    bottom: -145px;
    width: 550px;
    height: 140px;
    background-color: #666;
    opacity: 0.7;
    display: none;
}
#control-up, #control-down, #control-up-second, #control-down-second, #control-left, #control-right, #control-up-big, #control-down-big, #control-left-big, #control-right-big {
    position: absolute;
    margin: auto;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 64px;
    cursor: pointer;
    width: 64px;
    height: 64px;
    padding: 5px;
}
#control-up {
    top: 0px;
    left: 70px;
    background-image: url('../img/move-up.png');
}
#control-down {
    bottom: 0px;
    right: 70px;
    background-image: url('../img/move-down.png');
}
#control-up-second {
    top: 0px;
    right: 70px;
    background-image: url('../img/move-up.png');
}
#control-down-second{
    bottom: 0px;
    left: 70px;
    background-image: url('../img/move-down.png');
}
#control-left {
    bottom: 0px;
    top: 0px;
    left: 0px;
    background-image: url('../img/move-left.png');
}
#control-right {
    bottom: 0px;
    top: 0px;
    right: 0px;
    background-image: url('../img/move-right.png');
}

#control-up-big, #control-down-big, #control-left-big, #control-right-big {
    position: absolute;
    opacity: 0.2;
    margin: auto;
    padding: 0px;
    display: none;
    background-size: 98px;
    z-index: 999999;
}
#control-up-big {
    bottom: 10px;
    left: 0px;
    right: 0px;
    width: 125px;
    height: 125px;
    background-image: url('../img/move-up-big.png');
}
#control-down-big {
    bottom: -120px;
    left: 0px;
    right: 0px;
    width: 125px;
    height: 125px;
    background-image: url('../img/move-down-big.png');
}
#control-left-big {
    left: 80px;
    bottom: -90px;
    width: 125px;
    height: 175px;
    background-image: url('../img/move-left-big.png');
}
#control-right-big {
    right: 80px;
    bottom: -90px;
    width: 125px;
    height: 175px;
    background-image: url('../img/move-right-big.png');
}



h1 {
    margin: 0px 0px 74px 0px;
    padding: 0px;
    font-size: 24px;
    letter-spacing: 3px;
    color: #fff;
    text-transform: uppercase;
    font-style: normal;
}
h3 {
    margin: 0px;
    padding: 0px;
    font-size: 20px;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
    font-style: normal;
}

.sound {
    position: absolute;
}
.sound img {
    height: 28px;
}
#home .sound {
    bottom: 0px;
    right: 5px;
}
#panel .sound {
    top: 77px;
    right: 5px;
}

.github {
    position: absolute;
    bottom: 0px;
    left: 5px;
}

.help-button {
    position: absolute;
    text-align: center;
    bottom: 8px;
    right: 55px;
    margin: auto;
    font-size: 14px;
    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;
}

#help h2 {
    margin: 0px 0px 10px 0px;
    color: #d43b3b;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 26px;
}
#help {
    position: absolute;
    width: 420px;
    height: 265px;
    top: 290px;
    left: 0px;
    right: 0px;
    margin: auto;
    padding-top: 15px;
    text-align: center;
    z-index: 999999;
    background-color: #222;
    border: solid 1px #193fff;
    text-transform: uppercase;
    opacity: 0.9;
    display: none;
    cursor: pointer;
}
#help  table  tr  td {
    font-size: 16px;
    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;
}

#sound {
    position: absolute;
}

.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);
}



@media screen and (min-height:1200px), screen and (min-device-height : 1200px) {
    #panel, #home {
        zoom: 135%;
    }
}

@media screen and (max-width:1024px), screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    #home .help-button, #panel .help-button, #home .github, #sound, .sound {
        display: none;
    }
    #panel, #home {
        zoom: 105%;
    }
    #control-up-big, #control-down-big, #control-left-big, #control-right-big {
        display: inline;
    }

}
@media screen and (max-height:640px), screen and (min-device-height : 480px) and (max-device-height : 640px) and (-webkit-device-pixel-ratio: 3) {
    #panel, #home {
        zoom: 60%;
    }
    #control-up-big, #control-down-big, #control-left-big, #control-right-big {
        display: inline;
    }
    #home .help-button, #panel .help-button, #home .github, #sound, .sound {
        display: none;
    }
    h1, #canvas-panel-title-pacman {
        visibility: hidden;
    }
}
@media screen and (max-height:480px), screen and (min-device-height : 320px) and (max-device-height : 480px) {
    #panel, #home {
        zoom: 55%;
    }
    #control-up-big, #control-down-big, #control-left-big, #control-right-big {
        display: inline;
    }
    h1, #canvas-panel-title-pacman, #control-up-second, #control-down-second, #home .help-button, #panel .help-button, #home .github, #sound, .sound {
        display: none;
    }
    #score, #highscore {
        top: 0px;
    }
    #panel {
        padding-top: 50px;
    }
    #canvas-lives, #canvas-level-fruits {
        top: 607px;
    }
    #control {
        bottom: 50px;
        width: 550px;
        height: 55px;
    }
    #control-up, #control-down, #control-left, #control-right {
        top: 0px;
        bottom: 0px;
        background-size: 48px;
        width: 48px;
        height: 48px;
        padding: 5px;
    }
    #message {
        top: 347px;
    }
}