body {
  font-family: "Kumbh Sans", sans-serif;
}

#popittable {
    background-color: #1e3a8a; 
    border-spacing: 12px;      
    border-radius: 30px; /* Rounder corners for a toy look */
    padding: 20px;
    box-shadow: 
        0 10px 0px #172554, /* Darker bottom edge for 3D depth */
        0 20px 30px rgba(0,0,0,0.4); 
    margin: 20px auto;
}

#popittable td button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none; /* Remove default button border */
  cursor: pointer;
  
  /* A radial gradient makes it look spherical */
  background: radial-gradient(circle at 30% 30%, #60a5fa, #3b82f6);
  
  /* Outer shadow for the bubble, inner shadow for the 'pop' effect */
  box-shadow: 
    0 4px 6px rgba(0,0,0,0.2), 
    inset -4px -4px 6px rgba(0,0,0,0.1);
    
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Hover effect */
#popittable td button:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* The "Pop" effect: when clicking, it shrinks and shadows invert */
#popittable td button:active {
  transform: scale(0.9) translateY(2px);
  background: radial-gradient(circle at center, #2563eb, #3b82f6);
  box-shadow: inset 4px 4px 8px rgba(0,0,0,0.3);
}

/* This class will be added/removed by JavaScript */
#popittable td button.is-popped {
  /* Inverted shadow makes it look pushed in */
  box-shadow: inset 4px 4px 8px rgba(0,0,0,0.4), 
              0 1px 2px rgba(0,0,0,0.1);
  
  /* Darker gradient to show it's "depressed" */
  background: radial-gradient(circle at center, #2563eb, #3b82f6);
  
  /* Stay slightly smaller */
  transform: scale(0.95);
}

#popithtml, #popitbody{
  background-color:gold;
}

#popitinpdiv, #spinnerinpdiv{
  padding-top:15px;
  text-align:center;
}

.popitnuminp{
  width:50px;
  margin-top:5px;
}

#popitinpdiv a{
  margin-top:5px;
  color:black;
}

#spinnerinpdiv a{
  color:white;
}

#spinnerhtml, #spinnerbody{
  background-color:#111827;
}

#spinnerpng{
  transition: transform 0.5s ease;
  display:block;
  margin:auto;
}