html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #001519;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.close-game-button {
  width: 64px;
  height: 64px;
  background-color: white;
  z-index: 10;
  position: absolute;
  right: 0;
  border-bottom-left-radius: 8px;
}

.close-game-link {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.close-game-image {
  margin: auto;
  width: 50%;
  height: auto;

  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: invert(46%) sepia(17%) saturate(3733%) hue-rotate(336deg)
    brightness(90%) contrast(104%);
}

.close-game-image:hover {
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(90deg)
    brightness(109%) contrast(108%);
  cursor: pointer;
}

.game-preview {
  height: 100%;
  width: 100%;
  z-index: 999;
  background-color: #bababa;
  position: absolute;
}

.game-preview img {
  position: relative;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  height: auto;
}

.game-positioner {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

.game-container {
  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  top: 0;
  left: 0;

  overflow: hidden;

  background-color: white;
}

canvas {
  will-change: transform;
}