html {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #c54245;
  background-size: 100%;
  --tile_size: 32px;
  image-rendering: pixelated;
}

#start_btn {
  color:#000000;
  font-weight: bolder;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: system-ui;
  padding: 2rem;
  border-radius: 1rem;
  background: #599C5D;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 20px rgb(0, 0, 0);
}
#start_btn span {
  padding: .5rem 1rem;
  border-radius: 3rem;
  color:#000000;
  font-weight: bolder;
  margin: 1rem auto 0 auto;
  display: block;
}

#game_box {
  height: calc(var(--tile_size) * 18);
  aspect-ratio: 16/9;
  box-shadow: 0 0 40px rgb(0, 0, 0);
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
#game_box:after {
  position:absolute;
  inset: 0;
  pointer-events: none;
  background:url('1078079_cf64b.gif');
  background-size: 450px auto;
  mix-blend-mode: overlay;
  opacity: .5;
}

#timer {
  font-family: system-ui;
  font-size: 2rem;
  position: absolute;
  top: .7px;
  left: 1rem;
  line-height: 100%;
  color: rgb(0, 0, 0);
  text-shadow: 1px 1px rgba(0, 0, 0, 0.25);
}

#level_box {
  width: calc(32px * 96);
  aspect-ratio: 96/18;
  position: absolute;
  top: 0;
  left: 0;
  background-image:linear-gradient(to bottom, #59a6e9, #326ab4);
  background-size: 100% 100%;
  background-blend-mode: hard-light;
}

*:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

#player {
  position: absolute;
  width: 32px;
  aspect-ratio: 1/1;
  pointer-events: none;
}
#player:after {
  width: 32px;
  height: 40px;
  top: auto !important;
  bottom: 0;
  left: 0;
  background: 
    var(--sprite);
  background-size: 128px 40px;
  background-position: -32px 0;
}

.moving_left:after, 
.moving_right:after {
  animation: run .3s steps(3) alternate infinite;
}
@keyframes run {
  0% { background-position: 0 0; }
  100% { background-position: -96px 0px; }
}
.jumping:after {
  background-position: -96px 0px !important;
}
.jumping.moving_left:after,
.jumping.moving_right:after {
  animation: none;  
}

#player[dir="looking_left"] {
  background-position: -32px 0;
  transform: scaleX(-1);
}
#player[dir="looking_right"] {
  background-position: -32px 0;
  transform: scaleX(1);
}

.tile {
  width: 32px;
  aspect-ratio: 1/1;
  float: left;
  position: relative;
}

.solid {
  background: #A5F2F3;
  box-shadow: inset 0 0 8px white;
  background-size: 32px 32px;
  border-radius: 4px 4px;
}

.collect:after {
  background: var(--coins);
  background-size: 96px 32px;
  background-position: 0 0;
  pointer-events: none;
  animation: coins .5s steps(3) alternate infinite;
}
@keyframes coins {
  100% {
    background-position: -96px 0;
  }
}

:root {
  --sprite: url('download.gif');
  --coins: url('download.png');
  --floor-tile: url('download\ \(1\).png');
  --floor-tile-wht: url('download\ \(2\).png');
}