stylesheet.css

/* main-game */

* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url("img/stars.png");
}

.background {
  background: rgb(73, 35, 160);
  table-layout: fixed;
  border-spacing: 0;
}
.background td {
  padding: 0;
}
.actor {
  position: absolute;
}
.player {
  background: rgb(143, 143, 143);
}
.cookieJar {
  background: rgb(238, 235, 42);
}

/* containers */

#main-game {
  position: fixed;
  top: 230px;
  left: 360px;
}

#text-container {
  position: fixed;
  top: 190px;
  left: 360px;
}

#text {
  font-family: "Lucida Console", Monospace;
  color: rgb(255, 255, 255);
}

/* matrix-game */
#matrix {
  position: fixed;
  top: 230px;
  left: 360px;
  width: 720px;
  height: 360px;
  display: none;
}

#pills {
  position: fixed;
  top: 380px;
  left: 690px;
  display: none;
}

/* mini-game: block-jump */

#block_jump_game_container {
  position: fixed;
  top: 230px;
  left: 360px;
  display: none;
}

#block_jump_game {
  width: 720px;
  height: 360px;
  background-image: url("./img/background.png");
  /* background-color: aqua; */
}

#character {
  width: 20px;
  height: 50px;
  position: relative;
  top: 310px;
}

#block {
  width: 20px;
  height: 20px;
  position: relative;
  top: 290px;
  left: 700px;
  animation: none;
}

.animate {
  animation: jump 500ms;
}

@keyframes jump {
  0% {
    top: 310px;
  }
  30% {
    top: 260px;
  }
  70% {
    top: 260px;
  }
  100% {
    top: 310px;
  }
}

#block {
  width: 20px;
  height: 20px;
  position: relative;
  top: 290px;
  left: 700px;
  animation: none;
}

@keyframes block {
  0% {
    left: 720px;
  }
  100% {
    left: -10px;
  }
}