/* Base styling for a comic-book feel */
body {
  font-family: 'Comic Relief', sans-serif;
  background-color: #fdf6e3;
  /* Subtle polka dot background */
  background-image: radial-gradient(#ccc 1px, transparent 0);
  background-size: 20px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  flex-direction: column;
}

/* The main card container */
.comic-card {
  background-color: #ffffff;
  /* Reduced horizontal padding from 40px to 20px */
  padding: 30px 20px 20px; 
  border: 4px solid #111;
  border-radius: 12px;
  width: 100%;
  /* Shrank max-width from 380px to 320px to fit the widget tightly */
  max-width: 280px; 
  text-align: center;
  box-shadow: 10px 10px 0px #111;
  transform: rotate(-1deg);
}

h1 {
  color: #111;
  font-size: 2.6rem;
  margin-top: 0;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  /* Bright yellow shadow */
  text-shadow: 3px 3px 0px #ffcc00;
  transform: rotate(1deg);
}

p.subtitle {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 25px;
}

/* Wrapper to make the ALTCHA widget fit the vibe */
.altcha-wrapper {
  margin: 0 auto 25px auto;
  padding: 10px;
  border: 3px dashed #111;
  border-radius: 10px;
  background-color: #f9f9f9;
  /* Counter-tilt to make it look pasted on */
  transform: rotate(1.5deg); 
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

/* Big, chunky comic button */
button {
  width: 100%;
  padding: 15px;
  font-family: 'Comic Relief', sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  color: #111;
  background-color: #00e5ff;
  border: 4px solid #111;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 6px 6px 0px #111;
  text-transform: uppercase;
  transition: all 0.1s ease;
}

/* Button press animation */
button:active {
  box-shadow: 0px 0px 0px #111;
  transform: translate(6px, 6px);
  background-color: #00b8cc;
}
    
footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.75rem;
  color: #888;
  /* The key part — flexbox pushes it down because
    .comic-card takes up all remaining space (flex: 1) */
}