:root {
  color-scheme: light dark;
  --logoAnimationTranslateY: -200px;
  --logoAnimationTranslateX: 150px;
  --logoAnimationSpeed: 0.54s;
  --backgroundImage: url("Images/endstone.png");
}

@font-face {
  font-family: "Mojangles";
  src: url("Fonts/minecraftfont.woff");
}

body {
  background-color: #3d3938;
  background-image: var(--backgroundImage);
  background-size: 100px 100px;
  backdrop-filter: blur(5px) brightness(70%);
  border: 8px solid black;
  top: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --backgroundImage: url("Images/cobblestone.png");
  }
}

.inline {
  display: inline;
  white-space: nowrap;
  position: relative;
  font-size: 0px;
  left: 45px;
}

.black {
  background-color: black;
}

.e {
  clip-path: polygon(0 1%, 100% 1%, 100% 99%, 0 99%);
}

.e1 {
  position: relative;
  animation: dropIn var(--logoAnimationSpeed) ease-out running, bounce var(--logoAnimationSpeed) normal calc(0.9s + var(--logoAnimationSpeed)) running;
  bottom: -1px;
}

.l {
  transform: skew(9deg, 0deg);
  transform-origin: top right;
  left: 50px;
  bottom: -1px;
  position: absolute;
  animation: dropInL calc((0.1 * var(--logoAnimationSpeed)) + var(--logoAnimationSpeed)) ease-out running, bounceL var(--logoAnimationSpeed) normal calc(1s + var(--logoAnimationSpeed)) running;
}

.d {
  left: 124px;
  bottom: -1px;
  position: absolute;
  animation: dropInUnskewed calc((0.2 * var(--logoAnimationSpeed)) + var(--logoAnimationSpeed)) ease-out running, bounce var(--logoAnimationSpeed) normal calc(1.1s + var(--logoAnimationSpeed)) running;
}

.e2 {
  left: 185px;
  transform: skew(5deg);
  transform-origin: center left;
  position: absolute;
  bottom: -1px;
  animation: dropInE calc((0.3 * var(--logoAnimationSpeed)) + var(--logoAnimationSpeed)) ease-out running, bounceE var(--logoAnimationSpeed) normal calc(1.2s + var(--logoAnimationSpeed)) running;
}

.relative {
  position: relative !important;
}

.invisible {
  visibility: hidden;
}

.infoBox {
  position: relative;
  font-family: "Mojangles";
  word-spacing: 4px;
  color: light-dark(black, white);
  top: 20px;
  border: 5px solid #000000;
  width: 80%;  
  text-align: left;
  padding: 20px;
  anchor-name: --infoBox;
  background-color: light-dark(#FFFADA, #343434);
  padding-top: 2px;
}

.absolute {
  position: absolute;
}

.blackThing {
  height: 12px;
  width: 8px;
  left: 67px;
  bottom: 0px;
}

.blackThing2 {
  height: 27px;
  width: 18px;
  left: 181px;
  bottom: 0px;
}

.blackThing3 {
  height: 10px;
  width: 18px;
  left: 180px;
  bottom: 81px;
}

.blackThing4 {
  height: 30px;
  width: 8px;
  left: 182px;
  bottom: 60px;
}

.r {
  position: absolute;
  left: 247px;
  bottom: -0.3px;
  animation: dropInUnskewed calc((0.4 * var(--logoAnimationSpeed)) + var(--logoAnimationSpeed)) ease-out running, bounce var(--logoAnimationSpeed) normal calc(1.3s + var(--logoAnimationSpeed)) running;
}

.c {
  position: absolute;
  left: 310px;
  bottom: -1px;
  transform: skew(7deg);
  animation: dropInCR calc((0.5 * var(--logoAnimationSpeed)) + var(--logoAnimationSpeed)) ease-out running, bounceCR var(--logoAnimationSpeed) normal calc(1.4s + var(--logoAnimationSpeed)) running;

}

.blackThing5 {
  height: 27px;
  width: 18px;
  left: 306px;
  bottom: 0px;
  animation: dropInUnskewed calc((0.5 * var(--logoAnimationSpeed)) + var(--logoAnimationSpeed)) ease-out running, bounce var(--logoAnimationSpeed) normal calc(1.4s + var(--logoAnimationSpeed)) running;
}

.r2 {
  right: 264px;
  position: absolute;
  transform: skew(7deg);
  bottom: -1px;
  animation: dropInCR calc((0.6 * var(--logoAnimationSpeed)) + var(--logoAnimationSpeed)) ease-out running, bounceCR var(--logoAnimationSpeed) normal calc(1.5s + var(--logoAnimationSpeed)) running;
}

.rAll {
  clip-path: polygon(1% 0, 100% 0, 100% 100%, 2% 100%);
}

.a {
  position: absolute;
  right: 200px;
  bottom: -1px;
  animation: dropInUnskewed calc((0.7 * var(--logoAnimationSpeed)) + var(--logoAnimationSpeed)) ease-out running, bounce var(--logoAnimationSpeed) normal calc(1.6s + var(--logoAnimationSpeed)) running;
}

.blackThing6 {
  height: 34px;
  width: 20px;
  left: 424px;
  bottom: 56px;
  animation: dropInUnskewed calc((0.7 * var(--logoAnimationSpeed)) + var(--logoAnimationSpeed)) ease-out running,  bounce var(--logoAnimationSpeed) normal calc(1.6s + var(--logoAnimationSpeed)) running;
}

.f {
  position: absolute;
  right: 145px;
  bottom: -1px;
  animation: dropInUnskewed calc((0.8 * var(--logoAnimationSpeed)) + var(--logoAnimationSpeed)) ease-out running, bounce var(--logoAnimationSpeed) normal calc(1.7s + var(--logoAnimationSpeed)) running;
}

.t {
  position: relative;
  right: 22px;
  bottom: -1px;
  animation: dropInUnskewed calc((0.9 * var(--logoAnimationSpeed)) + var(--logoAnimationSpeed)) ease-out running, bounce var(--logoAnimationSpeed) normal calc(1.8s + var(--logoAnimationSpeed)) running;
}

.blackThing7 {
  height: 48px;
  width: 50px;
  left: 520px;
  bottom: -1px;
  z-index: -1;
}

.letterdiv {
  display: inline;
}

@keyframes dropIn {
  0% {
    transform: translateX(var(--logoAnimationTranslateX)) translateY(var(--logoAnimationTranslateY));
  }
  100% {
    transform: translateX(0px) translateY(0px);
  }
}

@keyframes dropInL {
  0% {
    transform: translateX(var(--logoAnimationTranslateX)) translateY(var(--logoAnimationTranslateY)) skew(9deg, 0deg);
    transform-origin: top right;
    left: 50px;
    bottom: -1px;
  }
  10% {
    transform: translateX(var(--logoAnimationTranslateX)) translateY(var(--logoAnimationTranslateY)) skew(9deg, 0deg);
    transform-origin: top right;
    left: 50px;
    bottom: -1px;
  }
  100% {
    transform: translateX(0px) translateY(0px) skew(9deg, 0deg);
    transform-origin: top right;
    left: 50px;
    bottom: -1px;
  }
}

@keyframes dropInUnskewed {
  0% {
    transform: translateX(var(--logoAnimationTranslateX)) translateY(var(--logoAnimationTranslateY));
  }
  10% {
    transform: translateX(var(--logoAnimationTranslateX)) translateY(var(--logoAnimationTranslateY));
  }
  100% {
    transform: translateX(0px) translateY(0px);
  }
}

.lLittleBlackThing {
  animation: dropInUnskewed calc((0.1 * var(--logoAnimationSpeed)) + var(--logoAnimationSpeed)) ease-out running, bounce var(--logoAnimationSpeed) normal calc(0.9s + var(--logoAnimationSpeed)) running;
;
}

@keyframes dropInE {
  0% {
    transform: translateX(var(--logoAnimationTranslateX)) translateY(var(--logoAnimationTranslateY)) skew(5deg);
    transform-origin: center left;
  }
  10% {
    transform: translateX(var(--logoAnimationTranslateX)) translateY(var(--logoAnimationTranslateY)) skew(5deg);
    transform-origin: center left;
  }
  100% {
    transform: translateX(0px) translateY(0px) skew(5deg);
    transform-origin: center left;
  }
}

.eLittleBlackThing {
  animation: dropInUnskewed calc((0.3 * var(--logoAnimationSpeed)) + var(--logoAnimationSpeed)) ease-out running, bounce var(--logoAnimationSpeed) normal calc(1.2s + var(--logoAnimationSpeed)) running;
}

@keyframes dropInCR {
  0% {
    transform: translateX(var(--logoAnimationTranslateX)) translateY(var(--logoAnimationTranslateY)) skew(7deg);
  }
  10% {
    transform: translateX(var(--logoAnimationTranslateX)) translateY(var(--logoAnimationTranslateY)) skew(7deg);
  }
  100% {
    transform: translateX(0px) translateY(0px) skew(7deg);
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes bounceL {
  0% {
    transform: translateY(0px) skew(9deg, 0deg);
    transform-origin: top right;
    left: 50px;
    bottom: -1px;
  }
  50% {
    transform: translateY(-20px) skew(9deg, 0deg);
    transform-origin: top right;
    left: 50px;
    bottom: -1px;
  }
  100% {
    transform: translateY(0px) skew(9deg, 0deg);
    transform-origin: top right;
    left: 50px;
    bottom: -1px;
  }
}

@keyframes bounceE {
  0% {
    transform: translateY(0px) skew(5deg);
    transform-origin: center left;
  }
  50% {
    transform: translateY(-20px) skew(5deg);
    transform-origin: center left;
  }
  100% {
    transform: translateY(0px) skew(5deg);
    transform-origin: center left;
  }
}

@keyframes bounceCR {
  0% {
    transform: translateY(0px) skew(7deg);
  }
  50% {
    transform: translateY(-20px) skew(7deg);
  }
  100% {
    transform: translateY(0px) skew(7deg);
  }
}

.enchanted {
  height: 95px;
  opacity: 0%;
  width: 611px;
  left: 1px;
  mask-image: url("Images/fullLogo.png");
  mask-size: 611px 95px;
  animation: movingEnchantIn 1.5s linear 1.9s running, movingEnchant 20s linear 1.9s infinite;
  background-image: url("Images/enchanted_item_glint.png");
  bottom: 0px;
}

@keyframes movingEnchant {
  0% {
    background-position: 0px 0px;
    background-size: 611px 95px;
    opacity: 40%;
  }
  100% {
    background-position: 611px 0px;
    background-size: 611px 95px;
    opacity: 40%;
  }
}

@keyframes movingEnchantIn {
  0% {
    background-size: 611px 95px;
    width: 0%;
    opacity: 40%;
  }
  100% {
    background-size: 611px 95px;
    width: 611px;
    opacity: 40%;
  }
}

.cornerBox {
  width: 20px;
  height: 20px;
  position: fixed;
  border: 5px solid #000000;
  position-anchor: --infoBox !important;
  background-color: light-dark(#FFFADA, #343434);
}

.topRightCornerBox {
  position-area: top right;
  bottom: -5px;
  left: -5px;
}

.topLeftCornerBox {
  position-area: top left;
  bottom: -5px;
  right: -5px;
}

.bottomLeftCornerBox {
  position-area: bottom left;
  top: -5px;
  right: -5px;
}

.bottomRightCornerBox {
  position-area: bottom right;
  top: -5px;
  left: -5px;
}

.sourceClass {
  font-family: "Mojangles";
  font-size: 12px;
}

@keyframes currentVersion {
  0% {
    color: #2D0039;
  }
  25% {
    color: #8800AA;
  }
  50% {
    color: #953FAA;
  }
  75% {
    color: #8800AA;
  }
  100% {
    color: #2D0039;
  }
}

.currentVersion {
  color: #2D0039;
}

.currentVersionC {
  animation: currentVersion 5s linear running infinite;
}

.currentVersionU {
  animation: currentVersion 5s linear 0.25s running infinite;
}

.currentVersionR {
  animation: currentVersion 5s linear 0.50s running infinite;
}

.currentVersionR2 {
  animation: currentVersion 5s linear 0.75s running infinite;
}

.currentVersionE {
  animation: currentVersion 5s linear 1s running infinite;
}

.currentVersionN {
  animation: currentVersion 5s linear 1.25s running infinite;
}

.currentVersionT {
  animation: currentVersion 5s linear 1.50s running infinite;
}

.currentVersionV {
  animation: currentVersion 5s linear 1.75s running infinite;
}

.currentVersionE2 {
  animation: currentVersion 5s linear 2s running infinite;
}

.currentVersionR3 {
  animation: currentVersion 5s linear 2.25s running infinite;
}

.currentVersionS {
  animation: currentVersion 5s linear 2.50s running infinite;
}

.currentVersionI {
  animation: currentVersion 5s linear 2.75s running infinite;
}

.currentVersionO {
  animation: currentVersion 5s linear 3s running infinite;
}

.currentVersionN2 {
  animation: currentVersion 5s linear 3.25s running infinite;
}

.currentVersionColon {
  animation: currentVersion 5s linear 3.50s running infinite;
}

.line {
  width: 100%;
  background-color: black;
  height: 2px;
}

.theVersion {
  border: 4px black solid;
  width: 80%;
  background-color: light-dark(#FFF9E3, #232023);
  anchor-name: --verBox;
}

.cornerBoxVer {
  width: 20px;
  height: 20px;
  position: fixed;
  border: 5px solid #000000;
  position-anchor: --verBox !important;
  background-color: light-dark(#FFF9E3, #232023);
}

.poorLink {
  color: #5865F2;
}

.thePlayers {
  border: 4px black solid;
  width: 80%;
  background-color: light-dark(#FFF9E3, #232023);
  anchor-name: --playerBox;
  text-align: left;
}

.cornerBoxPlayers {
  width: 20px;
  height: 20px;
  position: fixed;
  border: 5px solid #000000;
  position-anchor: --playerBox !important;
  background-color: light-dark(#FFF9E3, #232023);
}

.h1space {
  opacity: 0%;
  pointer-events: none;
  user-select: none;
}

.cornerBoxDomain {
  width: 20px;
  height: 20px;
  position: fixed;
  border: 5px solid #000000;
  position-anchor: --domainBox !important;
  background-color: light-dark(#FFF9E3, #232023);
}

.theDomain {
  border: 4px black solid;
  width: 80%;
  background-color: light-dark(#FFF9E3, #232023);
  anchor-name: --domainBox;
  text-align: left;
}

.verNum {
  color: light-dark(darkgreen, lightgreen);
}