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

:root {
  --loader-stroke-width: 20;
  --animation-fade-duration: .5s;
  --animation-line-duration: 1s;
  --animation-easing: ease-in-out;
}

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

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

#app.loaded {
  opacity: 1;
}

.app-loader {
  animation: background-fade var(--animation-fade-duration) var(--animation-easing) forwards;
  height: 100%;
  width: 100%;
}

@keyframes background-fade {
  to {
    background-color: #019beb;
  }
}

.app-loader__area {
  animation: area-fade var(--animation-fade-duration) var(--animation-easing) calc(var(--animation-fade-duration) + var(--animation-line-duration)) forwards;
  fill: transparent;
  stroke-width: 0;
}

@keyframes area-fade {
  to {
    fill: #003d75;
  }
}

.app-loader__line {
  animation: line var(--animation-line-duration) var(--animation-easing) var(--animation-fade-duration) forwards;
  fill: transparent;
  stroke: white;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-width: var(--loader-stroke-width);
}

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