body {
  margin: 0;
  color: #162d4f;
  background-color: #e6f4ff;
  font-family: "Libre Caslon Text", Georgia, serif;
}
 
h1 {
  color: #235fd4;
  font-size: 2.5rem;
}
 
.tagline {
  color: #f0a5c8;
}
 
.hero {
  padding: 3rem 1rem 1rem;
  text-align: center;
}
 
main {
  max-width: 32rem;
  margin: 0 auto;
  padding: 0 1rem 4rem;
}
 
.globe-card {
  background: #fdf7e8;
  border: 2px solid #235fd4;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
 
#message {
  font-style: italic;
}
 
.globe {
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ffffff, #cfe6ff 65%, #9dc4ef);
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.scene {
  width: 78%; border-radius: 50%; border: 3px solid #ffffff;
}
 
button {
  font: inherit;
  color: #ffffff;
  background: #f0a5c8;
  border: none;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
 
button:hover {
  background: #d54c97;
  transform: scale(1.05);
}
 
@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-0.6rem) rotate(-4deg); }
  40% { transform: translateX(0.6rem) rotate(4deg); }
  60% { transform: translateX(-0.4rem) rotate(-2deg); }
  80% { transform: translateX(0.4rem) rotate(2deg); }
}
 
.globe.shaking {
  animation: shake 600ms ease;
}

#made {
  color: #235fd4;
}