/* Loading page */
#screen_loading {
  z-index: 69;
  background-color: #000;
}
#screen_loading #loading_error {
  position: absolute;
  z-index: 3;
  font-size: 1.5rem;
  color: red;
  text-align: center;
}
#screen_loading #loading_error_text {
  margin-bottom: 0.5rem;
}

#screen_loading .loading.one,
#screen_loading .loading.two {
  width: 5rem;
  height: 5rem;
}
#screen_loading .loading.one {
  z-index: 2;
}
#screen_loading .loading.one::before {
  content: ' ';
  position: absolute;
  left: 50%;
  width: 10%;
  height: 100%;
  animation: loading_circle 1s infinite alternate ease-in-out, bg_rainbow 5s infinite;
  z-index: 2;
  background-color: #07f;
  transform: translateX(-50%);
}
#screen_loading .loading.two::after {
  content: ' ';
  position: absolute;
  width: 90%;
  height: 90%;
  z-index: 4;
  background-color: #000;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#screen_loading .loading.two {
  z-index: 3;
}
#screen_loading .loading.two::before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: #000 15rem solid;
  border-radius: 50%;
  transform: translate(-15rem, -15rem);
}
#screen_loading #loading_funny {
  z-index: 3;
  top: unset;
  bottom: 10%;
  transition: all 1s ease-in-out;
  animation: pulse_opacity 1s linear infinite alternate;
}