@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: #ff2828;
  font-family: IBMPlexSans;
  font-size: 14pt;
}

.RED {
  margin: 5em;
}

.REDPURPLE {
  color: #c86699;
}

.REDYELLOW {
  color: #c85a00; 
}

.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%);
    }