.app-loader .loader {
  position: relative;
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}
.app-loader .square {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #dea900;
  animation: rotateSquare 1.2s infinite ease-in-out;
}
.app-loader .square:nth-child(1) {
  top: 0;
  left: 0;
  animation-delay: 0s;
}
.app-loader .square:nth-child(2) {
  top: 0;
  right: 0;
  animation-delay: -0.3s;
}
.app-loader .square:nth-child(3) {
  bottom: 0;
  right: 0;
  animation-delay: -0.6s;
}
.app-loader .square:nth-child(4) {
  bottom: 0;
  left: 0;
  animation-delay: -0.9s;
}

@keyframes rotateSquare {
  0%, 100% {
    transform: translate(-30px, -30px) rotate(0deg);
    background-color: #dea900;
  }
  25% {
    transform: translate(30px, -30px) rotate(90deg);
    background-color: #03a9f4;
  }
  50% {
    transform: translate(30px, 30px) rotate(180deg);
    background-color: #4caf50;
  }
  75% {
    transform: translate(-30px, 30px) rotate(270deg);
    background-color: #0082ff;
  }
}
body {
  background-color: #1C2128;
  color: white;
}

.app-loader {
  color: white;
}

#app {
  height: 100dvh;
  height: 100vh;
  max-height: 100dvh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#app .page {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}