/** @format */
/** @format */
body {
  background-color: #131313;
}

#main__frogger__heading {
  font-size: 1.5rem;
  margin: 50px;
  text-align: center;
  color: #bbff99;
}

@media (max-width: 550px) {
  #main__frogger__heading {
    font-size: 2rem;
    margin: 50px;
  }
}

.frogger__wrapper {
  border: 5px solid #e432f4;
  top: 50%;
  left: 50%;
  position: absolute;
  width: 600px;
  height: 600px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: url("/images/frogger/background.png");
}

@media (max-width: 768px) {
  .frogger__wrapper {
    width: 400px;
    height: 400px;
  }
}

@media (max-width: 550px) {
  .frogger__wrapper {
    top: 65%;
    width: 360px;
    height: 360px;
  }
}

.frogger__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}