:root {
  --color-main: #d64343;
  --color-font: #87c430;
  --color-secondary: #dcfb9a;
  --color-hover: #00f;

  --vh-100: 100vh;
  --page-padding: 20px;

  --bezier-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.75);
}

body {
  user-select: none;
  background-color: var(--color-main);
  width: 100vw;
  height: var(--vh-100);
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 1.25rem;
  line-height: 1.1;
  overflow: hidden;
}

.header {
  padding: var(--page-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.header__logo {
  width: 100%;
  max-width: 570px;
}

.header__logo path {
  fill: var(--color-font);
}

.main {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
}

.crab {
  width: 100px;
  z-index: 1;
  position: absolute;
  transform: translate3d(-50%, -50%, 0) rotate(var(--crab-rotation));
  transition: transform 1.5s linear;
}

.crab.state--rotation {
  animation: crabRotation 1.5s linear;
}

@keyframes crabRotation {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(var(--crab-rotation));
  }
  10% {
    transform: translate3d(-50%, -50%, 0)
      rotate(calc(var(--crab-rotation) + 20deg)) scale(1);
  }
  30% {
    transform: translate3d(-50%, -50%, 0)
      rotate(calc(var(--crab-rotation) + 20deg)) scale(1);
  }
  50% {
    transform: translate3d(-50%, -50%, 0)
      rotate(calc(var(--crab-rotation) - 20deg)) scale(1);
  }
  70% {
    transform: translate3d(-50%, -50%, 0)
      rotate(calc(var(--crab-rotation) - 20deg)) scale(1);
  }
  80% {
    transform: translate3d(-50%, -50%, 0) rotate(calc(var(--crab-rotation)))
      scale(1);
  }
  85% {
    transform: translate3d(-50%, -50%, 0) rotate(calc(var(--crab-rotation)))
      scale(1);
  }

  90% {
    transform: translate3d(-50%, -50%, 0) rotate(calc(var(--crab-rotation)))
      scale(1.1);
  }

  95% {
    transform: translate3d(-50%, -50%, 0) rotate(calc(var(--crab-rotation)))
      scale(1);
  }

  100% {
    transform: translate3d(-50%, -50%, 0) rotate(calc(var(--crab-rotation)))
      scale(1);
  }
}

.food {
  position: absolute;
  transform: translate3d(-50%, -50%, 0) scale(0);
  width: 30px;
  transition: transform 150ms var(--bezier-bounce);
}

.food.state--active {
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.shit {
  position: absolute;
  width: 30px;
  transform: scale(1) translate3d(-50%, -50%, 0);
  transform-origin: top left;
  transition: transform 150ms var(--bezier-bounce);
}

.shit.state--hidden {
  transform: scale(0) translate3d(-50%, -50%, 0);
}

.footer {
  display: flex;
  padding: var(--page-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-font);
  font-weight: bold;
  z-index: 1;
}

.footer__logo {
  max-width: 77px;
  height: auto;
  margin-bottom: var(--page-padding);
}

.footer__logo path {
  fill: var(--color-font);
}

.footer a {
  transition: color 100ms ease;
}

.footer a:hover {
  color: var(--color-hover);
}

@media screen and (min-width: 800px) {
  .crab {
    width: 170px;
  }
  .food {
    width: 50px;
  }
  .shit {
    width: 50px;
  }
}