* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background: rgb(5, 17, 4);
    overflow: hidden;
    color: #fff;
    font-family: Consolas, monospace;
  }
  
  #scene {
    perspective: 500px;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    transition: perspective 1s ease-in-out;
    pointer-events: none;
    z-index: 0;
  }
  
  #scene * {
    transform-style: preserve-3d;
    position: absolute;
  }
  
  #sphere {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    animation: rotate-around 40s linear infinite;
  }
  @keyframes rotate-around {
    0% {
      transform: rotateX(-20deg) rotateY(0deg);
    }
    10% {
      transform: rotateX(-20deg) rotateY(36deg);
    }
    50% {
      transform: rotateX(-70deg) rotateY(180deg);
    }
    60% {
      transform: rotateX(-70deg) rotateY(216deg);
    }
    100% {
      transform: rotateX(-20deg) rotateY(360deg);
    }
  }
  #sphere .longitudes,
  #sphere .latitudes {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #sphere .longitude,
  #sphere .latitude {
    border-radius: 50%;
    border: 5px solid;
    aspect-ratio: 1/1;
  }
  #sphere .longitude {
    border-color: #0f0a;
    width: 400px;
  }
  #sphere .latitude {
    border-color: #0f0a;
  }
  #sphere .longitude:nth-child(1) {
    transform: rotateY(0deg);
  }
  #sphere .longitude:nth-child(2) {
    transform: rotateY(10deg);
  }
  #sphere .longitude:nth-child(3) {
    transform: rotateY(20deg);
  }
  #sphere .longitude:nth-child(4) {
    transform: rotateY(30deg);
  }
  #sphere .longitude:nth-child(5) {
    transform: rotateY(40deg);
  }
  #sphere .longitude:nth-child(6) {
    transform: rotateY(50deg);
  }
  #sphere .longitude:nth-child(7) {
    transform: rotateY(60deg);
  }
  #sphere .longitude:nth-child(8) {
    transform: rotateY(70deg);
  }
  #sphere .longitude:nth-child(9) {
    transform: rotateY(80deg);
  }
  #sphere .longitude:nth-child(10) {
    transform: rotateY(90deg);
  }
  #sphere .longitude:nth-child(11) {
    transform: rotateY(100deg);
  }
  #sphere .longitude:nth-child(12) {
    transform: rotateY(110deg);
  }
  #sphere .longitude:nth-child(13) {
    transform: rotateY(120deg);
  }
  #sphere .longitude:nth-child(14) {
    transform: rotateY(130deg);
  }
  #sphere .longitude:nth-child(15) {
    transform: rotateY(140deg);
  }
  #sphere .longitude:nth-child(16) {
    transform: rotateY(150deg);
  }
  #sphere .longitude:nth-child(17) {
    transform: rotateY(160deg);
  }
  #sphere .longitude:nth-child(18) {
    transform: rotateY(170deg);
  }
  #sphere .longitude:nth-child(19) {
    transform: rotateY(180deg);
  }
  #sphere .latitude:nth-child(1) {
    width: 0px;
    transform: translateY(-200px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(2) {
    width: 69.4592710668px;
    transform: translateY(-196.9615506024px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(3) {
    width: 136.8080573303px;
    transform: translateY(-187.9385241572px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(4) {
    width: 200px;
    transform: translateY(-173.2050807569px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(5) {
    width: 257.1150438746px;
    transform: translateY(-153.2088886238px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(6) {
    width: 306.4177772476px;
    transform: translateY(-128.5575219373px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(7) {
    width: 346.4101615138px;
    transform: translateY(-100px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(8) {
    width: 375.8770483144px;
    transform: translateY(-68.4040286651px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(9) {
    width: 393.9231012049px;
    transform: translateY(-34.7296355334px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(10) {
    width: 400px;
    transform: translateY(0px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(11) {
    width: 393.9231012049px;
    transform: translateY(34.7296355334px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(12) {
    width: 375.8770483144px;
    transform: translateY(68.4040286651px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(13) {
    width: 346.4101615138px;
    transform: translateY(100px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(14) {
    width: 306.4177772476px;
    transform: translateY(128.5575219373px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(15) {
    width: 257.1150438746px;
    transform: translateY(153.2088886238px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(16) {
    width: 200px;
    transform: translateY(173.2050807569px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(17) {
    width: 136.8080573303px;
    transform: translateY(187.9385241572px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(18) {
    width: 69.4592710668px;
    transform: translateY(196.9615506024px) rotateX(90deg);
  }
  #sphere .latitude:nth-child(19) {
    width: 0px;
    transform: translateY(200px) rotateX(90deg);
  }
  
  label {
    position: fixed;
    margin: 15px;
    display: inline-block;
    background-color: #444;
    box-shadow: 0px 0px 10px #111a;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 18px;
    z-index: 10;
    opacity: 0.8;
  }
  label:hover {
    cursor: pointer;
    opacity: 1;
  }
  
  input {
    display: none;
  }
  input:checked ~ #scene {
    perspective: 150px;
  }
  input:not(:checked) ~ #scene {
    perspective: 500px;
  }