:root {
  --fg-color: #eee;
  --bg-color: #000;
  --menu-bg-color: rgba(0, 0, 0, 50%);
  --border-color: #fff;
  --button-hover-color: #555;
  --side-length: 64px;
  --game-width: calc(var(--side-length) * 12);
  --game-height: calc(var(--side-length) * 8);
}

html {
  margin: 2em;
}

body {
  color: var(--fg-color);
  background: var(--bg-color);
  font: 1.5em sans-serif;
  margin: 0 auto;
  width: calc(var(--game-width) + 2px);
}

h1 {
  margin: 0 0 0.5em;
}

#wrapper {
  border: 1px solid var(--border-color);
  width: var(--game-width);
  height: var(--game-height);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.screen {
  background: var(--bg-color);
  position: absolute;
  width: var(--game-width);
  height: var(--game-height);
  top: 0;
  left: 0;
  z-index: 99999;
}

.screen.next {
  z-index: 9999;
}

.screen.menu {
  background: var(--menu-bg-color);
  z-index: 999999;
}

.anim-show {
  animation: 0.75s linear anim-show forwards;
}

.anim-hide {
  animation: 0.75s linear anim-hide forwards;
}

@keyframes anim-show {
  from {
    clip-path: rect(0px 0px var(--game-height) 0px);
  }

  to {
    clip-path: rect(0px var(--game-width) var(--game-height) 0px);
  }
}

@keyframes anim-hide {
  from {
    clip-path: rect(0px var(--game-width) var(--game-height) 0px);
  }

  to {
    clip-path: rect(0px var(--game-width) var(--game-height) var(--game-width));
  }
}

#logo {
  background: var(--bg-color) url("images/logo.png");
  opacity: 0%;
}

.anim-logo {
  animation: 3s linear anim-logo forwards;
}

@keyframes anim-logo {
  0%,
  100% {
    opacity: 0%;
  }

  10%,
  90% {
    opacity: 100%;
  }
}

h1 {
  margin: calc(var(--game-height) * 0.35) 0 0;
}

button {
  color: var(--fg-color);
  background: var(--bg-color);
  font-size: 1em;
  border: 1px solid var(--border-color);
  padding: 0.5em 1em;
}

button:hover {
  background: var(--button-hover-color);
}

button:active {
  position: relative;
  top: 4px;
  left: 4px;
}

textarea {
  color: var(--fg-color);
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  width: 80ex;
  height: 6em;
}

.hidden {
  visibility: hidden;
}

.tile {
  position: absolute;
  width: var(--side-length);
  height: var(--side-length);
  z-index: 9;
}

.foreground {
  z-index: 99;
}

.empty {
  background: url(images/spritesheet.png) calc(0 * var(--side-length))
    calc(0 * var(--side-length));
}

.blank1 {
  background: url(images/spritesheet.png) calc(-1 * var(--side-length))
    calc(0 * var(--side-length));
}

.blank2 {
  background: url(images/spritesheet.png) calc(-2 * var(--side-length))
    calc(0 * var(--side-length));
}

.wall1 {
  background: url(images/spritesheet.png) calc(0 * var(--side-length))
    calc(-1 * var(--side-length));
}

.wall2 {
  background: url(images/spritesheet.png) calc(-1 * var(--side-length))
    calc(-1 * var(--side-length));
}

.wall3 {
  background: url(images/spritesheet.png) calc(-2 * var(--side-length))
    calc(-1 * var(--side-length));
}

.floor1 {
  background: url(images/spritesheet.png) calc(0 * var(--side-length))
    calc(-2 * var(--side-length));
}

.floor2 {
  background: url(images/spritesheet.png) calc(-1 * var(--side-length))
    calc(-2 * var(--side-length));
}

.floor3 {
  background: url(images/spritesheet.png) calc(-2 * var(--side-length))
    calc(-2 * var(--side-length));
}

.hole1 {
  background: url(images/spritesheet.png) calc(0 * var(--side-length))
    calc(-3 * var(--side-length));
}

.hole2 {
  background: url(images/spritesheet.png) calc(-1 * var(--side-length))
    calc(-3 * var(--side-length));
}

.tunnelv {
  background: url(images/spritesheet.png) calc(-2 * var(--side-length))
    calc(-3 * var(--side-length));
}

.tunnelh {
  background: url(images/spritesheet.png) calc(0 * var(--side-length))
    calc(-4 * var(--side-length));
}

.oasis {
  background: url(images/spritesheet.png) calc(-1 * var(--side-length))
    calc(-4 * var(--side-length));
}

.kangaroo {
  background: url(images/spritesheet.png) calc(0 * var(--side-length))
    calc(-5 * var(--side-length));
}

.emu {
  background: url(images/spritesheet.png) calc(-1 * var(--side-length))
    calc(-5 * var(--side-length));
}

.toad {
  background: url(images/spritesheet.png) calc(-2 * var(--side-length))
    calc(-5 * var(--side-length));
}

.rock {
  background: url(images/spritesheet.png) calc(0 * var(--side-length))
    calc(-6 * var(--side-length));
}

.tumbleweed {
  background: url(images/spritesheet.png) calc(-1 * var(--side-length))
    calc(-6 * var(--side-length));
}

.kangaroo.face-right,
.emu.face-right,
.toad.face-right {
}

.kangaroo.face-left,
.emu.face-left,
.toad.face-left {
  transform: scaleX(-1);
}