html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

:root {
  --loader-stroke-width: 3;
  --animation-fade-duration: .3s;
  --animation-line-duration: 1s;
  --animation-easing: ease-in-out;
  --loader-size: 80px;
}

@media screen and (min-width: 1200px) {
  :root {
    --loader-stroke-width: 4;
    --loader-size: 100px;
  }
}

#app {
  min-width: 800px;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

#app.loaded {
  opacity: 1;
}

.app-loader {
  height: 100%;
  width: 100%;
  display: flex; /* Visible by default */
  position: fixed;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  background-color: #f5f6f7;
  z-index: 9999;
}

.app-loader svg {
  width: var(--loader-size);
  height: var(--loader-size);
}

.app-loader__area {
  fill: transparent;
  stroke-width: 0;
}

.app-loader__line {
  animation: line var(--animation-line-duration) var(--animation-easing) infinite alternate;
  fill: transparent;
  stroke: #4dbeff;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-width: var(--loader-stroke-width);
}

@keyframes line {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.app-loader--hide {
  opacity: 0;
  transition: opacity var(--animation-fade-duration) var(--animation-easing);
}

html[data-theme='dark'] .app-loader {
  background-color: #202020 !important;
}