html,
body {
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  color: whitesmoke;
}

canvas {
  display: block;
}

#title {
  font-size: 36px;
  opacity: 0;
  transform: translate(0, -30px);
  animation: present 1s ease-in forwards;
}

#wrapper{
    width: 1080px;
    margin: 16px auto;
    padding: 20px;
    background-color: rgb(27, 27, 27);
    border: 4px solid whitesmoke;
    border-radius: 10px;
}

#game {
  display: inline-block;
  position: relative;
  transform-origin: top;
  opacity: 0;
  transform: translate(0, -100px);
  animation: appear 2s ease-in forwards;
}

@keyframes present {
    0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes appear {
  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}