:root {
  color-scheme: dark;
  background: #142727;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background:
    linear-gradient(#142727 0 72%, #203b3b 72% 73%, #789392 73% 100%);
  cursor: default;
  touch-action: none;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.penguin {
  position: absolute;
  left: 50%;
  top: 70%;
  width: 24px;
  height: 32px;
  border: 6px solid #26312e;
  border-radius: 50% 50% 40% 40%;
  background: #c3d0c2;
  transform: translate(-50%, -100%);
}

@media (prefers-reduced-motion: reduce) {
  body {
    touch-action: auto;
  }
}

.penguin {
  border-color: #0b1717;
}