html, body{
  background-color: black;
  color: white;
  text-align: center;
}

.main{
  width: 100vw;
  height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 1.5s;
}

.main img{
  width: 140px;
}

.onyx{
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 10px;
  margin-top: 5px;
}

.maj{
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 10vh;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.loader-11 {
  display: inline-block;
  width: 40px;
  aspect-ratio: 1/1;
  color: inherit;
  vertical-align: middle;
  pointer-events: none;
  left: -4px;
  position: relative;
  margin-top: 60px;
}

.loader-11 {
  background-color: currentcolor;
  -webkit-animation: loader-11 2s infinite ease-in-out;
          animation: loader-11 2s infinite ease-in-out;
}

@-webkit-keyframes loader-11 {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

@keyframes loader-11 {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}