* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Titillium Web', sans-serif;
    }
    body {
      font-family: 'Muli', sans-serif;
      background-color: #1f222d;
      margin: 0;
      padding: 0;
      overflow: hidden;
      position: relative;
      height: 100vh;
      width: 100vw;
    }

    .planet {
      position: absolute;
      width: 100px;
      height: 130px;
      opacity: 0.95;
      animation: float 12s ease-in-out infinite;
      transition: z-index 0.3s ease;
      will-change: transform;
      z-index: 1;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      text-decoration: none;
      user-select: none;
    }

    .planet-inner {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: visible;
      transition: transform 0.5s ease, box-shadow 0.5s ease;
      transform-style: preserve-3d;
      will-change: transform;
      pointer-events: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .planet-inner img {
      width: 100px;
      height: 100px;
      border-radius: 10%;
      object-fit: cover;
      display: block;
      pointer-events: none;
      animation: spin 20s linear infinite;
    }

    /* Hover */
    .planet:hover {
      z-index: 5;
    }
    .planet:hover .planet-inner {
      transform: scale(1.3) translateZ(100px);
      box-shadow: 0 0 40px rgba(0, 255, 255, 0.4);
    }
    .planet:hover .label {
      transform: scale(1.3) translateZ(100px);
      text-shadow: 0 0 40px rgba(0, 255, 255, 0.8);
      transition: transform 0.5s ease, text-shadow 0.5s ease;
    }

    .label {
      margin-top: 6px;
      color: #e05206;
      font-size: 14px;
      font-weight: bold;
      font-family: 'Titilum Web', sans-serif;
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
      text-decoration: none;
      transition: transform 0.5s ease, text-shadow 0.5s ease;
    }

    @keyframes float {
      0%   { transform: translate(0px, 0px); }
      25%  { transform: translate(10px, -10px); }
      50%  { transform: translate(-10px, 10px); }
      75%  { transform: translate(10px, 5px); }
      100% { transform: translate(0px, 0px); }
    }

    @keyframes spin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }