html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: black;
  display: grid;
}

@font-face {
  font-family: 'MadimiOne';
  src: url('../fonts/MadimiOne-Regular.ttf') format('truetype');
}

.madimiOne {
  font-family: 'MadimiOne';
}

.footerText {
  left: auto;
  right: auto;
  bottom: 0;
  width: 100%;
  color: white;
  font-size: 48px;
  text-align: center;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1000;
}

.preloaderText {
  font-weight: 400;
  letter-spacing: 1.7px;
  font-family: "MadimiOne";
  font-size: 15.5px;
  fill: #FFD700;
  
}

#preloaderRotatingText {
  animation-name: rotate-circle;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate-circle {
  to {
    transform: rotate(1turn);
  }
}

.preloader {
  display: grid;
  align-items: center;
  justify-items: center;
}

.preloader img {
  position: absolute;
  animation-name: rotate-circle;
  animation-direction: reverse;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}