:root {
  --gray:#37464c;
  --car:url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=31ca7c26-f60a-5af4-a660-df1b081ed34a&637418252297279612');
  --car-up:url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=cf4ccdf0-58c2-5144-aecb-193947240b00&637418252026768676');
  --bg:url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=f29a8f67-f85e-5084-b5b5-545c1536a709&637419115280525282');
  --bg2:url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=d1e72170-699a-58cb-bd16-cffd694ba8b5&637419119749543223');
}

body {
  margin:0;
  padding:0;  
  font-family:'Press Start 2P', sans-serif;
  text-align:center;
  color:lightgray;
  background:white;
}

#gj_console {
  width:100%;
  max-width:640px;
  height:100px;
  box-sizing:border-box;
/*   border:1px solid gray; */
  border-radius:5px;
  position:relative;
  margin:50px auto; 
  background:var(--bg2), linear-gradient(to bottom, transparent 55px, #efefef 55px, #efefef 56px, transparent 56px);
  background-size:auto auto, 100% 100%;
  background-repeat:repeat-x, repeat;
  background-blend-mode:multiply;
  overflow:hidden;
  animation:bg 30s linear infinite;
}
@keyframes bg {
  0% { background-position:0 0; }
  100% { background-position:-640px 0; }
}

.dead {
  animation-play-state:paused !important;
}

#press_box {
  min-height:100vh;
  min-width:100vw;
  position:fixed;
  left:0;
  top:0;
}

.dead #press_box {
  pointer-events:none;
}

#gj_car {
  width:54px;
  height:50px;
  background:var(--car);
  position:absolute;
  left:25px;
  top:11px;
}

#car_hitbox {
  width:85%;
  height:15px;
/*   background:red; */
  position:absolute;
  left:10%;
  bottom:0;
  opacity:.5;
}

.rock {
  width:15px;
  height:15px;
  position:absolute;
  top:46px;
  left:640px;
  font-size:12px;
}

.dead_rock:after {
  content:'';
  width:100%;
  height:100%;
  background:red;
  clip-path: polygon(50% 0%, 84% 6%, 98% 35%, 72% 60%, 79% 91%, 49% 82%, 21% 91%, 15% 48%, 2% 35%, 42% 24%);
  position:absolute;
  left:0;
  top:0;
}

#gameover {
  background:rgba(255,255,255,.75);
  color:var(--gray);
  letter-spacing:10px;
  width:100%;
  height:100%;
  box-sizing:border-box;
/*   border:1px solid var(--gray); */
  padding-top:25px;
  transition:.5s;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  cursor:pointer;
}
#gameover span {
  display:block;
  background:var(--gray);
  color:lightgray;
  width:30px;
  height:30px;
  letter-spacing:0;
  text-align:center;
  margin:5px auto;
  font-size:24px;
  transform:translateX(-5px);
  clip-path:polygon(0% 0%, 100% 50%, 0% 100%);
}

.not_gameover {
  pointer-events:none;
  opacity:0;
}

#score {
  position:absolute;
  right:5px;
  top:5px;
  font-size:14px;
  z-index:3;
}
#hi-score {
  color:lightgray;
}
#new_score {
  color:var(--gray);
  margin-left:15px;
}