#globe {
      display: block;
      border-radius: 50%;
    }

    .land {
      stroke: #999;
      stroke-width: 0.5px;
    }

    .highlighted {
      fill: #f59e0b;
    }

    .default {
      fill: #ccc;
    }

    .graticule {
      fill: none;
      stroke: #ddd;
      stroke-width: 0.5px;
    }

    .ocean {
      fill: #e6e6e6;
    }

    .marker {
      cursor: pointer;
      font-size: 18px;
      pointer-events: all;
    }

    .tooltip {
      position: absolute;
      background: #333;
      color: #fff;
      padding: 5px 8px;
      border-radius: 4px;
      font-size: 14px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    @media (max-width: 600px) {
      #globe {
        width: 350px !important;
        height: 350px !important;
      }
    }

    @media (max-width: 400px) {
      #globe {
        width: 280px !important;
        height: 280px !important;
      }
    }