.globe-earth {
  --globe-size: 166px;
  --spin-speed: 12s;
  width: var(--globe-size);
  height: var(--globe-size);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 40px rgba(0,0,0,.5), 0 14px 28px rgba(0,0,0,.35);
}


/* Earth map texture */
.globe-earth::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: url('../images/earth.png') repeat-x; /* <-- use an equirectangular world map */
  background-size: 200% 100%; /* Stretch so it scrolls smoothly */
  animation: spin-earth var(--spin-speed) linear infinite;
}

/* Shading & highlight for 3D effect */
.globe-earth::after {
  content: "";
  position: absolute; inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 45%),
              radial-gradient(circle at 70% 60%, rgba(0,0,0,.0) 40%, rgba(0,0,0,.65) 75%);
  pointer-events: none;
}

@keyframes spin-earth {
  from { background-position: 0% 50%; }
  to   { background-position: -200% 50%; }
}

@media only screen and (max-width: 767px){
  .globe-earth {
    --globe-size: 126px; /* reduced by 40px */
  }
}