@font-face {
  font-family: 'EBGaramond';
  src: url(https://daedalusmachine.neocities.org/FONTS/EBG.ttf);
}

@font-face {
  font-family: 'IBMPlexSans';
  src: url(https://daedalusmachine.neocities.org/FONTS/IBMPS.ttf);
}

@font-face {
  font-family: 'Courier';
  src: url(https://daedalusmachine.neocities.org/FONTS/COUR.ttf);
}

@font-face {
  font-family: 'LibreBarcode39';
  src: url(https://daedalusmachine.neocities.org/FONTS/LB39.ttf);
}

body {
  background-color: black;
  color: white;
  font-family: IBMPlexSans;
  font-size: 14pt;
}

.RED {
  color: #ff2828;
}

.PROXY {
  font-family: LibreBarcode39; 
  font-size: 32pt;
  line-height: 48pt;
}

/* Rotate Sphere animation */
    @-webkit-keyframes animateSphere {
      0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
      50% { transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg); }
      100% { transform: rotateY(720deg) rotateX(720deg) rotateZ(360deg); }
    }
    
    html {
      background: black;
    }
    
    .scene {
      perspective: 1000px;
    }
    .sphere {
      margin-top: 5vh;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      width: 200px;
      height: 200px;
      transform-style: preserve-3d;
      animation-name: animateSphere; 
      animation-duration: 30s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    .border {
      border: 1px solid #ff2828;
    }
    .border2 {
      border: 5px solid black;
    }
    
    .border3 {
      border: 5px solid white; 
    }
    
    .circle {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: rgba(255,40,40, 1);
    }
    /* X Axis */
    .circle:nth-child(1) {transform: rotate3d(1, 0, 0, 0deg);}
    .circle:nth-child(2) {transform: rotate3d(1, 0, 0, 36deg);}
    .circle:nth-child(3) {transform: rotate3d(1, 0, 0, 72deg);}
    .circle:nth-child(4) {transform: rotate3d(1, 0, 0, 108deg);}
    .circle:nth-child(5) {transform: rotate3d(1, 0, 0, 144deg);}
    /* Y Axis */
    .circle:nth-child(6) {transform: rotate3d(0, 1, 0, 0deg);}
    .circle:nth-child(7) {transform: rotate3d(0, 1, 0, 36deg);}
    .circle:nth-child(8) {transform: rotate3d(0, 1, 0, 72deg);}
    .circle:nth-child(9) {transform: rotate3d(0, 1, 0, 108deg);}
    .circle:nth-child(10) {transform: rotate3d(0, 1,0, 144deg);}
    /* Z Axis */
    .circle:nth-child(11) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 0deg);}
    .circle:nth-child(12) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 36deg);}
    .circle:nth-child(13) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 72deg);}
    .circle:nth-child(14) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 108deg);}
    .circle:nth-child(15) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 144deg);}
    
    /* Light effect */
    .light {
       margin: auto;
       border-radius: 50%;
       width: 200px;
       height: 200px;
       color: white;
    } 
    /* Clip the sphere a bit */
    .clip {
      clip-path: circle(75%);
    }

.YELLOW {
  color: #ffc800;
}

.FLASHLIGHT {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 220, 0, 0.5);;
  position: absolute;
  left: var(--mouse-x);
  top: var(--mouse-y);
  margin: -2.5em;
  z-index: 1;
}

.FLOATINGHIGH {
  z-index: 7;
  position: relative;
}

.PURPLE {
  color: #9966c8;
}

.REFLECTION1 {
  transform: rotatex(180deg);
  mask-image: repeating-linear-gradient(transparent, transparent 1px, #9966c8 2px, #9966c8 1px), linear-gradient( transparent 99.98%, #9966c8 99.99%);
}

.wave {
	display: inline-block;
}

.wave {
    --amt: 1;
}

.wave {
	animation: wave 2s linear infinite;
}

.wave:nth-child(5n+3) {
	animation-delay: -0.4s;
}
.wave:nth-child(5n+2) {
	animation-delay: -0.8s;
}
.wave:nth-child(5n+1) {
	animation-delay: -1.2s;
}
.wave:nth-child(5n) {
	animation-delay: -1.6s;
}

@keyframes wave {
	from { transform: rotate(0deg) translateX(calc(var(--amt) * 0.05ch)) rotate(0deg); }
	to { transform: rotate(360deg) translateX(calc(var(--amt) * 0.05ch)) rotate(-360deg); }
}

.GREEN {
  color: #00c859;
}

.LEAF1 {
  animation: LeafAnim1 6s linear infinite;
  border:0.05em solid #00c859;
  border-style: solid;
  border-radius:0.5em;
  padding:0.5em;
  display:inline-table;
  background-color: #00c859;
  color:#000000;
  position:absolute;
  z-index: 4;
}

.LEAF2 {
  animation: LeafAnim2 7.5s linear infinite;
  border:0.05em solid #00b458;
  border-style: solid;
  border-radius:0.5em;
  padding:0.5em;
  display:inline-table;
  background-color: #00b458;
  color:#000000;
  position:absolute;
  z-index: 3;
}

.LEAF3 {
  animation: LeafAnim3 9s linear infinite;
  border:0.05em solid #00a257;
  border-style: solid;
  border-radius:0.5em;
  padding:0.5em;
  display:inline-table;
  background-color: #00a257;
  color:#000000;
  position:absolute;
  z-index: 2;
  
}

@keyframes LeafAnim1 {
  0%, 100% {
    transform: translate(-0.1em,-0.1em);
  }
  25% {
    transform: translate(-0.1em,0.1em);
  }
  50% {
    transform: translate(0.1em,0.1em);
  }
  75% {
    transform: translate(0.1em,-0.1em);
  }
}

@keyframes LeafAnim2 {
  0%, 100% {
    transform: translate(-0.2em,-0.2em);
  }
  25% {
    transform: translate(-0.2em,0.2em);
  }
  50% {
    transform: translate(0.2em,0.2em);
  }
  75% {
    transform: translate(0.2em,-0.2em);
  }
}

@keyframes LeafAnim3 {
  0%, 100% {
    transform: translate(-0.3em,-0.3em);
  }
  25% {
    transform: translate(-0.3em,0.3em);
  }
  50% {
    transform: translate(0.3em,0.3em);
  }
  75% {
    transform: translate(0.3em,-0.3em);
  }
}

.BOUGH {
  border:0.05em solid #009155;
  border-style: solid;
  border-radius:0.5em;
  padding:0.5em;
  display:inline-table;
  background-color: #009155;
  color:#000000;
  position:absolute;
  z-index: 1;
}