@font-face {
  font-family: "DepartureMono";
  src: url("../assets/fonts/DepartureMono/DepartureMono-Regular.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
}

#loading {
  align-items: center;
  animation: fadeIn 0.4s ease forwards;
  background: #f5f5f5;
  color: #323f54;
  display: flex;
  flex-direction: column;
  font-family: "DepartureMono", monospace;
  font-size: clamp(16.5px, 2.5vw, 22px);
  inset: 0;
  justify-content: center;
  opacity: 0;
  position: fixed;
  text-align: center;
  transition: opacity 0.4s ease;
  z-index: 9999;
}

#loading img {
  margin: 8px;
  width: min(128px, 30vw);
}

#progress-bar {
  background: #cbd4d6;
  height: 8px;
  margin: 8px;
  overflow: hidden;
  width: min(256px, 70vw);
}

#progress {
  background: #323f54;
  height: 100%;
  transition: width 0.4s ease;
  width: 0%;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}