*,
*::after,
*::before {
  box-sizing: border-box;
}
html {
  height: 100%;
  overflow: hidden;
}
body {
  background: #2b0934;
  width: 100%;
  font-size: 12px;
}
@media all and (min-width: 320px) {
  body {
    font-size: calc(12px + 8 * ((100vw - 320px) / 960));
  }
}
@media all and (min-width: 1280px) {
  body {
    font-size: 20px;
  }
}
canvas {
  display: block;
  cursor: pointer;
}
object {
  width: 70vw;
  height: 90vh;
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media all and (min-width: 768px) {
  object {
    width: 85vw;
    height: 90vh;
  }
}
@media all and (min-width: 1024px) {
  object {
    width: 90vw;
    height: 90vh;
  }
}
@media all and (min-width: 1280px) {
  object {
    width: 70vw;
    height: 90vh;
    max-height: 1000px;
  }
}
@media all and (min-width: 1920px) {
  object {
    width: 60vw;
    height: 70vh;
  }
}
@media all and (max-width: 320px) {
  object {
    width: 98vw;
    height: 100vh;
  }
}