@font-face {
  font-family: Calibri-Bold;
  src: url(./fonts/fonnts.com-Calibri_Bold.otf);
}
@font-face {
  font-family: Calibri;
  src: url(./fonts/fonnts.com-Calibri.otf);
}
@font-face {
  font-family: Calibri-Light;
  src: url(./fonts/fonnts.com-Calibri_Light.otf);
}
@font-face {
  font-family: Calibri-Italic;
  src: url(./fonts/fonnts.com-Calibri_Italic.otf);
}
@font-face {
  font-family: Calibri-Light-Italic;
  src: url(./fonts/fonnts.com-Calibri_Light_Italic.otf);
}
@font-face {
  font-family: Calibri-Bold-Italic;
  src: url(./fonts/fonnts.com-Calibri_Bold_Italic.otf);
}
* {
  margin: 0;
  padding: 0;
  font-family: "Calibri";
}
.main-home {
  background-color: black;
  width: 100%;
  height: 100vh;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.Loader > .inner-loader > .items {
  height: 100vh;
  position: relative;
  top: 0;
}

.Loader > .inner-loader > .items > ul {
  position: relative;
  overflow: hidden;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.items > ul > li {
  color: white;
  list-style: none;
  text-align: center;
  font-size: 4rem;
  position: relative;
  top: 0;
  animation: slide 6s infinite;
  font-weight: 400;
  font-family: "Calibri";
}
#spin {
  color: white;
}
@media (max-width: 700px) {
  .items > ul > li {
    font-size: 2.7rem;
  }
}
#spin:after {
  content: "";
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    content: "TRUST";
  }
  10% {
    content: "FAITH";
  }
  20% {
    content: "BALANCE";
  }
  30% {
    content: "TRUTH";
  }
  40% {
    content: "ORDER";
  }
  50% {
    content: "JUSTICE";
  }
  60% {
    content: "EQUITY";
  }
  70% {
    content: "REASON";
  }
  80% {
    content: "FAIRNESS";
  }
  100% {
    content: "HONOR";
  }
}

/* @media screen and (max-width: 500px) {
  .Loader > .inner-loader > .items > ul {
    height: 4rem;
  }

  .items > ul > li {
    font-size: 3rem;
  }
} */