* {
  margin: 0;
  padding: 0;
  border: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.game-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  /* Background pattern from https://css-pattern.com/ */
  --s: 200px;
  --c1: #1d1d1d;
  --c2: #4e4f51;
  --c3: #3c3c3c;
  background:
    repeating-conic-gradient(from 30deg, #0000 0 120deg, var(--c3) 0 180deg) calc(.5*var(--s)) calc(.5*var(--s)*0.577),
    repeating-conic-gradient(from 29.5deg, var(--c1) 0 60deg, var(--c2) 0 120deg, var(--c3) 0 180deg);
  background-size: var(--s) calc(var(--s)*0.577);
}

#bevy {
  height: 0;
}

/* Loader from https://cssloaders.github.io/ */
.loader {
  width: 128px;
  height: 128px;
  border: 16px solid #FFF;
  border-bottom-color: #FF3D00;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}