body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f6eee4;
  background-image: url('../assets/paws_bg.png');
  background-repeat: repeat;
  background-size: 320px auto;
  color: #4b2e1e;
}

.container {
  max-width: 960px;
  margin: auto;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

h1, h2, h3 {
  color: #5e3e28;
}

a {
  color: #855723;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button, input[type="submit"], select {
  background-color: #d2b48c;
  color: #3c2e1c;
  border: 1px solid #aa8960;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}

button:hover, input[type="submit"]:hover {
  background-color: #c8a97c;
}

input, select, textarea {
  border: 1px solid #c4b299;
  padding: 6px;
  border-radius: 4px;
}

img {
  max-width: 100%;
}

ul {
  padding-left: 20px;
}

.pet-glow {
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #ccf)
          drop-shadow(0 0 24px #99f) brightness(1.2);
  /* You can change colors for different glow types! */
}

.pet-rainbow-glow {
  filter:
    drop-shadow(0 0 8px #ff4da6)
    drop-shadow(0 0 16px #fffb01)
    drop-shadow(0 0 24px #39ff14)
    drop-shadow(0 0 32px #1e90ff)
    drop-shadow(0 0 40px #ff1c1c)
    brightness(1.12);
}

.pet-mini {
  width: 27% !important; /* 1/3 of 80% is about 27% */
  top: 36.5%;  /* to keep it centered vertically */
  left: 36.5%; /* to keep it centered horizontally */
}











.faq-category h2 {
  background: #e9d8c3;
  border-left: 6px solid #855723;
}

.notice {
  background-color: #f3e3d3;
  color: #5a3924;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}