@import url(http://fonts.googleapis.com/css?family=Bangers);

body {
    margin:0px;
    padding:0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    font-family: "arial";
    font-size: 17px;
    background-color: rgb(127, 127, 127);
}

body:before {
    content:'HEIST';
    font-size: 18vh;
    width: 0;
    word-wrap: break-word;
    font-family:"bangers","Times New Roman";
    position:absolute;
    left:1vw;
    transform: scale(2,1);
    color:rgb(100,100,100);
}

#game {
    width:1260px;
    height:768px;
    margin: 20px auto;
    overflow-x:auto;
    overflow-y: hidden;
    border: double 10px rgba(0, 0, 0,0.8);
    position:relative;
    background-color: rgb(255, 255, 255);
}

#score {
  width: 100px;
  height: calc(100% + 1px);
  box-sizing: border-box;
  border-right: double 10px rgba(0, 0, 0, 0.8);
  position: absolute;
  top: -1px;
  left: 0px;
  padding: 0px;
  margin: 0px;
  padding-bottom:1px;
  text-align:center;
}

div#info {
  margin-top: 10px;
  border-bottom: double 10px rgba(0, 0, 0, 0.8);
}

#scoreBlock {
    position:absolute;
    top:0px;
    left:0px;
    width: 90px;
}

#map {
    background-image: url(img/map.png);
    height:1630px;
    width:1160px;
    position:absolute;
    top:0px;
    left:100px; 
    z-index:5;
}  

.hokje {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  z-index:14;
  opacity: 0.2;
}

.hokje:hover {
    opacity: 0.9;
}

#dicehead {
    margin-top:10px;
}

.die {
  margin: 10px 18px;
  border: solid 1px rgba(0, 0, 0, 0.2);
  position: relative;
  padding: 2px;
  background-color: rgb(231, 231, 231);
  width: 52px;
  height: 52px;
  -o-object-fit: contain;
  object-fit: contain;
  box-shadow: inset 0 3px rgb(255, 255, 255), inset 0 -3px rgb(187, 187, 187), inset 3px 0 rgb(215, 215, 215), inset -3px 0 rgb(215, 215, 215);
  border-radius: 10%;
}

.dieSelect {
    cursor:pointer;
}

body.nonMobile .dieSelect:hover {
    background-color: rgba(255, 50, 50,0.8);
    box-shadow: inset 0 3px rgb(255, 200, 200), inset 0 -3px rgb(187, 130, 130), inset 3px 0 rgb(215, 160, 160), inset -3px 0 rgb(215, 160, 160);
}

.die.selected {
    background-color: rgba(255, 50, 50,0.8);
    box-shadow: inset 0 3px rgb(255, 200, 200), inset 0 -3px rgb(187, 130, 130), inset 3px 0 rgb(215, 160, 160), inset -3px 0 rgb(215, 160, 160);
}

.die:after {
  content: '';
  width: 10px;
  height: 10px;
  top: 0px;
  left: 0px;
  border-radius: 50%;
  position: absolute;
  display: block;
}

.die1:after {
    box-shadow: 
        23px 23px 0 1px rgba(0, 0, 0, 0.8);
}

.die2:after {
    box-shadow: 
        9px 9px 0 1px rgba(0, 0, 0, 0.8),        
        37px 37px 0 1px rgba(0, 0, 0, 0.8);
}

.die3:after {
    box-shadow: 
        23px 23px 0 1px rgba(0, 0, 0, 0.8), 
        9px 9px 0 1px rgba(0, 0, 0, 0.8), 
        37px 37px 0 1px rgba(0, 0, 0, 0.8);
}

.die4:after {
    box-shadow: 
        9px 9px 0 1px rgba(0, 0, 0, 0.8), 
        9px 37px 0 1px rgba(0, 0, 0, 0.8),
        37px 9px 0 1px rgba(0, 0, 0, 0.8),
        37px 37px 0 1px rgba(0, 0, 0, 0.8);
}

.die5:after {
    box-shadow: 
        9px 9px 0 1px rgba(0, 0, 0, 0.8), 
        9px 37px 0 1px rgba(0, 0, 0, 0.8),
        37px 9px 0 1px rgba(0, 0, 0, 0.8),
        37px 37px 0 1px rgba(0, 0, 0, 0.8),
        23px 23px 0 1px rgba(0, 0, 0, 0.8);
}

.die6:after {
    box-shadow: 
        9px 7px 0 1px rgba(0, 0, 0, 0.8), 
        9px 39px 0 1px rgba(0, 0, 0, 0.8),
        37px 7px 0 1px rgba(0, 0, 0, 0.8),
        37px 39px 0 1px rgba(0, 0, 0, 0.8),
        9px 23px 0 1px rgba(0, 0, 0, 0.8), 
        37px 23px 0 1px rgba(0, 0, 0, 0.8);
}

.marker {
    display:none;
    position:absolute;
    width:36px;
    height:36px;
    border-radius:50%;
    background-color:rgba(200,0,0,0.7);
    border:solid 2px yellow; 
    cursor:pointer;
    text-align:center;
    line-height:36px;
    color: rgb(255, 255, 0);
    font-weight: bold;
    font-size: 26px;
    z-index:15;
}

#player {
    width:50px;
    height:50px;
    background-image:url("img/player.png");
    position:absolute;
    z-index:10;
}

#car {
    width:100px;
    height:100px;
    background-image:url("img/police.png");
    position:absolute;
    z-index:16;
    left:-300px;
    top:1500px;    
}

#message {
    font-family:"bangers","Times New Roman";
    display:none;
    z-index: 25;
    width: 410px;
    height: 440px;
    padding: 10px;
    border: solid 1px rgb(200, 200, 0);
    box-shadow: 0px 0px 20px 3px rgba(200, 200, 0, 0.9);
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: calc(50% - 220px);
    left: calc(50% - 210px);
    font-size: 20px;
    cursor:pointer;
}

#message:after {
  content: 'x';
  position: absolute;
  top: 0px;
  right: 0px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 20px;
  background-color: rgb(240, 240, 240);
  padding: 0px 5px;
  border-left: solid 1px rgba(0, 0, 0, 0.8);
  border-bottom: solid 1px rgba(0, 0, 0, 0.8);
  color:#000;
}

#message:hover:after {
    color:#fff;
    background-color: rgb(150, 150, 150);
}

#message .imgTxt {
    text-align:center;
}

#message .notice {
  margin-top: 200px;
  text-align: center;
}

#overlay {
    width:100%;
    height:100%;
    z-index:20;
    position:absolute;
    top:0px;
    left:0px;
    background-color: rgba(0, 0, 0, 0.5);
}

#highscore {
    font-family:"bangers","Times New Roman";
    z-index: 25;
    width: 410px;
    height: 80vh;
    padding: 10px;
    border: solid 1px rgb(200, 200, 0);
    box-shadow: 0px 0px 20px 3px rgba(200, 200, 0, 0.9);
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: calc(50% - 40vh);
    left: calc(50% - 210px);
    font-size: 20px;
    cursor:pointer;
    overflow-y:auto;
}

#highscore h1 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

#highscore table {
    width:100%;
    border-spacing: 0;
    border-collapse: collapse;
}

#highscore table tr.yourscore {
  color: rgb(170, 0, 0);
  font-size: 150%;
}

#highscore table td.rank {
  width: 85%;
}

#highscore table tr:hover {
    background-color: rgb(224, 224, 224);
}

#inputscore {
  font-family: "bangers","Times New Roman";
  display: none;
  z-index: 25;
  width: 320px;
  height: 120px;
  padding: 10px;
  border: solid 1px rgb(200, 200, 0);
  box-shadow: 0px 0px 20px 3px rgba(200, 200, 0, 0.9);
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 150px);
  font-size: 20px;
  cursor: pointer;
}

input#yourname {
  font-family: "bangers","Times New Roman";
  height: 30px;
  width: 290px;
  margin-top: 8px;
  margin-bottom: 8px;
  line-height: 30px;
  font-size: 30px;
  padding-left: 5px;
  outline-color: rgb(250, 250, 250);
}

button#okbutton {
  width: 299px;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  font-family: "bangers","Times New Roman";
  height: 25px;
  cursor: pointer;
  font-size: 20px;
  border: solid 1px rgb(0, 0, 0);
}

button#okbutton:hover {
      background-color: rgb(60, 60, 60);
}

#clicky {
  position: absolute;
  top: 50%;
  left: 45%;
  z-index: 500;
  color: rgb(255, 255, 255);
  text-shadow: rgb(0, 0, 0) 0px 0px 10px;
  font-size: 20vh;
  font-family: bangers, 'Times New Roman';
  opacity: 0.4;
  transform: rotate(22.5deg) translate(-50%, -50%);
  text-align: center;
  cursor:pointer;
  pointer-events: none;
}

.shadowText {
    text-shadow: 0px 0px 2px rgb(0, 0, 0);
    color:#f00;
}

#other {
    position:absolute;
    top:0px;
    right:5px;
}

#other a {
    color:#fff;
    font-size:10px;
}


body.mobile {
    overflow:initial;
}

body.mobile #highscore {
    top:100px;
    left:50%;
}

body.mobile   #game {
      overflow-x: initial;
      overflow-y: initial;
        
      height:1630px;
}