@font-face {
  font-family: D-DIN;
  src: url(./assets/font/D-DIN.otf);
}
* {
  margin: 0;
  padding: 0;
  font-family: D-DIN;
}
.main-home {
  background-color: black;
  width: 100%;
  height: 100vh;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.Loader > .inner-loader > .items {
  height: 8rem;
  position: relative;
  top: 0;
}

.Loader > .inner-loader > .items > ul {
  position: relative;
  overflow: hidden;
  height: 8rem;
}

.items > ul > li {
  color: white;
  list-style: none;
  text-align: center;
  font-size: 7rem;
  position: relative;
  top: 0;
  animation: slide 6s infinite;
}
#spin {
  color: white;
}
#spin:after {
  content: "";
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    content: "WE";
  }
  12% {
    content: "PERMANENTLY";
  }
  24% {
    content: "SEQUESTER";
  }
  36% {
    content: "CARBON.";
  }

  48% {
    content: "WE";
  }
  60% {
    content: "PERMANENTLY";
  }
  72% {
    content: "ENRICH";
  }
  100% {
    content: "SOIL.";
  }
}
/* @media screen and (max-width: 500px) {
  .Loader > .inner-loader > .items > ul {
    height: 4rem;
  }

  .items > ul > li {
    font-size: 3rem;
  }
} */
/* Changes */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .Loader > .inner-loader > .items > ul {
      height: 4rem;
    }
  
    .items > ul > li {
      font-size: 3rem;
    }
}
@media only screen 
  and (min-device-width: 200px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .Loader > .inner-loader > .items > ul {
      height: 2rem;
    }
  
    .items > ul > li {
      font-size: 2rem;
    }
}
@media only screen 
  and (min-device-width: 500px) 
  and (max-device-width: 880px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .Loader > .inner-loader > .items > ul {
      height: 4rem;
    }
  
    .items > ul > li {
      font-size: 4rem;
    }
}