.loading-screen {
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 1;
  background-color: var(--dark-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-speed) ease-in;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

.loading-text {
  font-family: monospace;
}

.loading-icons {
  margin: 16px 0;
}

.icon {
  font-size: 28px;
  margin: 0 6px;
}

.icon:nth-of-type(1) {
  color: red;
}
.icon:nth-of-type(2) {
  color: orange;
}
.icon:nth-of-type(3) {
  color: aqua;
}
.icon:nth-of-type(4) {
  color: pink;
}