/* --- Mr. Doodle Inspired Black & White Theme --- */
:root{
  --bg:#f5f5f5;          /* light gray background */
  --primary:#2d3748;     /* rich dark gray */
  --accent:#e2e8f0;      /* light blue-gray */
  --secondary:#4a5568;   /* medium slate */
  --doodle:#718096;      /* darker gray for doodles */
  --card-bg:#ffffff;     /* pure white for cards */
  --shadow:rgba(0,0,0,0.12); /* slightly stronger shadows */
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  font-family:'Avenir Light','Avenir Next','Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--primary);
  line-height:1.6;
  position:relative;
  overflow-x:hidden;
  font-weight:300;
}

/* Monster doodle background */
body::before{
  content:'';
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background-image:url('monster-doodle-bg.jpg');
  background-size:400px 400px;
  background-repeat:repeat;
  opacity:0.18;
  z-index:-1;
  animation:float 60s ease-in-out infinite;
  filter:grayscale(100%) contrast(1.2);
}

@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-10px) rotate(1deg)}
}

/* ----------------------------------------------------
   HERO SECTION
---------------------------------------------------- */
.hero{
  background:var(--card-bg);
  height:45vh;
  position:relative;
  border:1px solid var(--accent);
  border-radius:16px;
  margin:24px;
  overflow:hidden;
  box-shadow:0 4px 20px var(--shadow);
}
.hero::before{
  content:'';
  position:absolute;
  top:16px;left:16px;right:16px;bottom:16px;
  border:1px dashed var(--doodle);
  border-radius:12px;
  opacity:0.6;
}
.hero .overlay{
  background:transparent;
  color:var(--primary);
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 1rem;
  position:relative;
}

@keyframes bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

h1{
  font-family:'Amatic SC',cursive;
  margin:.2em 0;
  font-size:clamp(3.5rem,8vw,7rem);
  font-weight:700;
  color:var(--primary);
  letter-spacing:0.02em;
  position:relative;
  text-shadow:0 2px 4px rgba(0,0,0,0.1);
}
h1::after{
  content:'';
  position:absolute;
  bottom:-8px;left:0;
  width:80px;
  height:4px;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius:2px;
}
h2{
  font-family:'Amatic SC',cursive;
  font-weight:400;
  color:var(--secondary);
  font-size:1.4rem;
}

/* ----------------------------------------------------
   LAYOUT WRAPPER
---------------------------------------------------- */
.container{max-width:900px;width:90%;margin:3rem auto}

/* ----------------------------------------------------
   ACCORDION (details/summary)
---------------------------------------------------- */
.accordion{
  border:1px solid var(--accent);
  border-radius:12px;
  background:var(--card-bg);
  overflow:hidden;
  margin-bottom:1.5rem;
  box-shadow:0 2px 12px var(--shadow);
  transition:all .3s ease;
  position:relative;
}
.accordion:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(0,0,0,0.15);
  border-color:var(--secondary);
}
.accordion::before{
  content:'';
  position:absolute;
  top:-4px;left:16px;right:16px;
  height:2px;
  background:var(--doodle);
  border-radius:1px;
  opacity:0.3;
  z-index:2;
}
.accordion summary{
  padding:1.25rem 1.5rem;
  cursor:pointer;
  font-family:'Amatic SC',cursive;
  font-weight:700;
  background:var(--card-bg);
  list-style:none;
  position:relative;
  font-size:1.3rem;
  border-bottom:1px solid var(--accent);
  transition:all .2s ease;
  color:var(--primary);
}
.accordion summary::marker,
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{
  content:'+';
  position:absolute;
  right:1.5rem;
  font-size:1.25rem;
  font-weight:300;
  color:var(--secondary);
  transition:transform .2s ease;
}
.accordion[open] summary{
  background:var(--accent);
  color:var(--primary);
  border-bottom:none;
}
.accordion[open] summary::after{
  content:'−';
  transform:rotate(180deg);
}
.accordion .content{
  padding:1.5rem 1.5rem;
  background:var(--card-bg);
  position:relative;
  color:var(--primary);
  line-height:1.6;
  font-size:0.95rem;
}

/* ----------------------------------------------------
   ATTRIBUTION
---------------------------------------------------- */
.attribution{
  text-align:center;
  padding:1rem 0;
  font-size:0.8rem;
  color:var(--secondary);
  margin:24px;
}
.attribution a{
  color:var(--secondary);
  text-decoration:none;
  opacity:0.7;
  transition:opacity .2s ease;
}
.attribution a:hover{
  opacity:1;
}

/* ----------------------------------------------------
   FOOTER
---------------------------------------------------- */
footer{
  text-align:center;
  padding:2rem 0;
  font-size:0.9rem;
  background:var(--card-bg);
  color:var(--secondary);
  margin:48px 24px 24px;
  border-radius:12px;
  position:relative;
  border:1px solid var(--accent);
  box-shadow:0 2px 12px var(--shadow);
}

/* Additional doodle elements */
.intro{
  background:var(--card-bg);
  padding:1.5rem;
  margin:1.5rem 0;
  border:1px solid var(--accent);
  border-radius:12px;
  position:relative;
  font-size:1.1rem;
  text-align:center;
  color:var(--primary);
  box-shadow:0 2px 8px var(--shadow);
  font-weight:400;
}

/* ----------------------------------------------------
   RESPONSIVE
---------------------------------------------------- */
@media(min-width:768px){
  .hero{height:55vh}
  .accordion{margin-bottom:2.5rem}
  .container{width:85%}
}