body {
  margin: 0;
  padding: 0;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAALUlEQVQYV2PsCeT6HzM9lWFJ5mwGGM344kX+f5AADIAkGGEqYYIgBfhVIpsJAA/lITSrvR5SAAAAAElFTkSuQmCC"); }

* {
  user-select: none; }

.foot, .foot1, .foot2, .foot3 {
  position: absolute;
  width: 20vw;
  height: 20vw; }

.foot1 {
  left: -2vw;
  top: -2vw; }

.foot2 {
  left: 13vw;
  top: 10vw; }

.foot3 {
  top: 22vw; }

.pillow, .left, .middle-left, .middle-right, .right, .pillow-left, .pillow-right {
  position: relative;
  border-radius: 100%;
  background-color: black;
  display: block; }

.emojis {
  position: absolute;
  top: 40vw;
  left: 0;
  height: 40vw;
  width: 50vw;
  overflow: auto;
  overflow-wrap: break-word;
  font-size: 16px; }

.footsteps-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 40vw;
  height: 40vw; }

.finger {
  width: 3vw;
  height: 5vw; }

.left {
  left: 4vw;
  top: 6vw;
  transform: rotate(-30deg); }

.middle-left {
  left: 8vw;
  top: -2vw; }

.middle-right {
  left: 12vw;
  top: -7vw;
  transform: rotate(20deg); }

.right {
  left: 15vw;
  top: -7vw;
  transform: rotate(60deg); }

.pillow-left {
  width: 4vw;
  height: 6vw;
  left: 8vw;
  top: -10vw;
  transform: rotate(45deg);
  border-bottom-right-radius: 80%; }

.pillow-right {
  width: 4vw;
  height: 6vw;
  left: 10vw;
  top: -16vw;
  transform: rotate(-45deg);
  border-bottom-left-radius: 80%; }

.shop-container {
  position: absolute;
  right: 0;
  width: 50vw; }

.buyable {
  margin: 5px auto;
  padding: 5px;
  box-shadow: 1px 1px 5px #000;
  width: 90%;
  height: 100px;
  line-height: 2.5;
  background: radial-gradient(circle at top left, #BEB9B8 0%, #726F6E, #BEB9B8 100%);
  font: 18px Monospace; }
  .buyable:active {
    transform: translate(2px, 1px); }

.owned {
  position: relative;
  width: 100%;
  text-align: right;
  top: 40px; }
  .owned::before {
    content: "Owned: "; }

.cost {
  position: relative;
  width: 100%;
  text-align: right;
  top: 40px; }
  .cost::before {
    content: "Cost: "; }

.particles-container {
  position: absolute;
  top: 0;
  left: 0; }

@keyframes particle-animation {
  from {
    opacity: 1;
    transform: translate(0, 0); }
  to {
    opacity: 0;
    transform: translate(0, -50px); } }

.particle {
  font: 22px Monospace;
  animation-name: particle-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

.points-display {
  font: 16px Monospace;
  color: white;
  position: absolute;
  bottom: 0;
  left: 5px;
  width: 50vw; }