#dsa{
  transform: rotateY(120deg);
  transform:translateX(5deg);
/*  transform-style: preserve-3d;*/
  }
.sphere p{
   color:#eefcfc;
  font-family: 'Atkinson Hyperlegible', sans-serif;
	font-weight:400;
	text-align:center;
	text-shadow:0 0 2px black;
	}
.sphere p::nth-type(odd){
  color:teal;
  }
.sphere p::nth-type(even){
  color:#00dcdc;
  }
.sphere {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 290px;
  width: 290px;
  -webkit-animation: rotateSphere 11s linear infinite;
          animation: rotateSphere 11s linear infinite;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
          
}

.sphere .plane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: auto;
  height: 100%;
  width: 100%;
  list-style-type: none;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.sphere .plane li {
  position: absolute;
  height: 50%;
  width: 0;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.sphere .plane li::after {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  display: inline-block;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-50%) rotateX(90deg);
          transform: translateX(-50%) rotateX(90deg);
  border-radius: 50px;
  background-color: transparent;
}

.sphere .plane li:nth-child(1) {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}

.sphere .plane li:nth-child(2) {
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
}

.sphere .plane li:nth-child(3) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

.sphere .plane li:nth-child(4) {
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
}

.sphere .plane li:nth-child(5) {
  -webkit-transform: rotate(50deg);
          transform: rotate(50deg);
}

.sphere .plane li:nth-child(6) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}

.sphere .plane li:nth-child(7) {
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
}

.sphere .plane li:nth-child(8) {
  -webkit-transform: rotate(80deg);
          transform: rotate(80deg);
}

.sphere .plane li:nth-child(9) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.sphere .plane li:nth-child(10) {
  -webkit-transform: rotate(100deg);
          transform: rotate(100deg);
}

.sphere .plane li:nth-child(11) {
  -webkit-transform: rotate(110deg);
          transform: rotate(110deg);
}

.sphere .plane li:nth-child(12) {
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}

.sphere .plane li:nth-child(13) {
  -webkit-transform: rotate(130deg);
          transform: rotate(130deg);
}

.sphere .plane li:nth-child(14) {
  -webkit-transform: rotate(140deg);
          transform: rotate(140deg);
}

.sphere .plane li:nth-child(15) {
  -webkit-transform: rotate(150deg);
          transform: rotate(150deg);
}

.sphere .plane li:nth-child(16) {
  -webkit-transform: rotate(160deg);
          transform: rotate(160deg);
}

.sphere .plane li:nth-child(17) {
  -webkit-transform: rotate(170deg);
          transform: rotate(170deg);
}

.sphere .plane li:nth-child(18) {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.sphere .plane:nth-child(1) {
  -webkit-transform: rotateY(10deg);
          transform: rotateY(10deg);
}

.sphere .plane:nth-child(2) {
  -webkit-transform: rotateY(20deg);
          transform: rotateY(20deg);
}

.sphere .plane:nth-child(3) {
  -webkit-transform: rotateY(30deg);
          transform: rotateY(30deg);
}

.sphere .plane:nth-child(4) {
  -webkit-transform: rotateY(40deg);
          transform: rotateY(40deg);
}

.sphere .plane:nth-child(5) {
  -webkit-transform: rotateY(50deg);
          transform: rotateY(50deg);
}

.sphere .plane:nth-child(6) {
  -webkit-transform: rotateY(60deg);
          transform: rotateY(60deg);
}

.sphere .plane:nth-child(7) {
  -webkit-transform: rotateY(70deg);
          transform: rotateY(70deg);
}

.sphere .plane:nth-child(8) {
  -webkit-transform: rotateY(80deg);
          transform: rotateY(80deg);
}

.sphere .plane:nth-child(9) {
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
}

.sphere .plane:nth-child(10) {
  -webkit-transform: rotateY(100deg);
          transform: rotateY(100deg);
}

.sphere .plane:nth-child(11) {
  -webkit-transform: rotateY(110deg);
          transform: rotateY(110deg);
}

.sphere .plane:nth-child(12) {
  -webkit-transform: rotateY(120deg);
          transform: rotateY(120deg);
}

.sphere .plane:nth-child(13) {
  -webkit-transform: rotateY(130deg);
          transform: rotateY(130deg);
}

.sphere .plane:nth-child(14) {
  -webkit-transform: rotateY(140deg);
          transform: rotateY(140deg);
}

.sphere .plane:nth-child(15) {
  -webkit-transform: rotateY(150deg);
          transform: rotateY(150deg);
}

.sphere .plane:nth-child(16) {
  -webkit-transform: rotateY(160deg);
          transform: rotateY(160deg);
}

.sphere .plane:nth-child(17) {
  -webkit-transform: rotateY(170deg);
          transform: rotateY(170deg);
}

.sphere .plane:nth-child(18) {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.sphere .plane:nth-child(19) {
  -webkit-transform: rotateY(190deg);
          transform: rotateY(190deg);
}

.sphere .plane:nth-child(20) {
  -webkit-transform: rotateY(200deg);
          transform: rotateY(200deg);
}

.sphere .plane:nth-child(21) {
  -webkit-transform: rotateY(210deg);
          transform: rotateY(210deg);
}

.sphere .plane:nth-child(22) {
  -webkit-transform: rotateY(220deg);
          transform: rotateY(220deg);
}

.sphere .plane:nth-child(23) {
  -webkit-transform: rotateY(230deg);
          transform: rotateY(230deg);
}

.sphere .plane:nth-child(24) {
  -webkit-transform: rotateY(240deg);
          transform: rotateY(240deg);
}

.sphere .plane:nth-child(25) {
  -webkit-transform: rotateY(250deg);
          transform: rotateY(250deg);
}

.sphere .plane:nth-child(26) {
  -webkit-transform: rotateY(260deg);
          transform: rotateY(260deg);
}

.sphere .plane:nth-child(27) {
  -webkit-transform: rotateY(270deg);
          transform: rotateY(270deg);
}

.sphere .plane:nth-child(28) {
  -webkit-transform: rotateY(280deg);
          transform: rotateY(280deg);
}

.sphere .plane:nth-child(29) {
  -webkit-transform: rotateY(290deg);
          transform: rotateY(290deg);
}

.sphere .plane:nth-child(30) {
  -webkit-transform: rotateY(300deg);
          transform: rotateY(300deg);
}

.sphere .plane:nth-child(31) {
  -webkit-transform: rotateY(310deg);
          transform: rotateY(310deg);
}

.sphere .plane:nth-child(32) {
  -webkit-transform: rotateY(320deg);
          transform: rotateY(320deg);
}

.sphere .plane:nth-child(33) {
  -webkit-transform: rotateY(330deg);
          transform: rotateY(330deg);
}

.sphere .plane:nth-child(34) {
  -webkit-transform: rotateY(340deg);
          transform: rotateY(340deg);
}

.sphere .plane:nth-child(35) {
  -webkit-transform: rotateY(350deg);
          transform: rotateY(350deg);
}

.sphere .plane:nth-child(36) {
  -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
}

@-webkit-keyframes rotateSphere {
  0% {
    -webkit-transform: rotate3d(1, 1, 1, -360deg);
            transform: rotate3d(1, 1, 1, -360deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 0, 360deg);
            transform: rotate3d(0, 0, 0, 360deg);
  }
}

@keyframes rotateSphere {
  0% {
    -webkit-transform: rotate3d(1, 1, 1, -360deg);
            transform: rotate3d(1, 1, 1, -360deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 0, 360deg);
            transform: rotate3d(0, 0, 0, 360deg);
  }
}
/*# sourceMappingURL=style.css.map*/