html,body {
  margin: 0;
  padding: 0;
  background: #252525;
}

main {
  text-align: center;
  width: 100%;
}

canvas {
  display: block;
}

main {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

main canvas {
  height: auto !important;
  width: auto !important;
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle;
  touch-action: none;
}
#loadingScreen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #252525;
}

#loadingScreen .message {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  width: 100%;
  margin: 0 0 20px;
  text-align: center;
  color: #FFFF2D;
}
#loadingScreen .spinner-container {
  position: relative;
}
#loadingScreen .spinner {
    border: 4px solid rgb(255, 255, 45, 0.1);
    width: 116px;
    height: 116px;
    border-radius: 50%;
    border-left-color: #FFFF2D;
    animation: spin 1s ease infinite;
}
#loadingScreen .smiley {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    color: #f0f;
}
#loadingScreen .smiley svg {
  width: 80px;
  margin: 10px 0 0;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loaded #loadingScreen,
#fxparty {
  display: none;
}
.loaded #fxparty {
  display: flex;
}