@charset "utf-8";

.loading {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: 10000;
    color: red;
    font-size: 20px;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loading_hart {
    position: absolute;
    content: '';
    width: 30px;
    animation: loading_hart 0.3s linear infinite;
}
@keyframes loading_hart {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}
.loading_hart::before,
.loading_hart::after {
  position: absolute;
  content: '';
  width: 30px;
  height: 50px;
  background: red;
  bottom: 20px;
}
.loading_hart::before {
  border-radius: 25px 15px 2px 2px;
  transform-origin: 70% 75%;
  transform: rotateZ(-45deg);
}
.loading_hart::after {
  border-radius: 15px 25px 2px 2px;
  transform-origin: 30% 75%;
  transform: rotateZ(45deg);
} 

.loadingFadeout {
    animation: loadingFadeout_key 0.2s linear 1 forwards;
}
@keyframes loadingFadeout_key {
    0% { opacity: 1; } 
    100% { opacity: 0; }
}