/* Google Fonts already imported in HTML */

:root {
  --candy-red: #f54336;
  --sky-blue:  #58b3ff;
  --sickly-green: #9ccf5c;
  --sepia-paper: #f4e3c3;
  --ink-black: #000000;
}

/* --- Global Styles --- */
html,body{
  margin:0;
  padding:0;
  background:var(--sepia-paper);
  color:var(--ink-black);
  font-family:'Special Elite', serif;
  /* subtle static grain using noise-like gradients */
  background-image:radial-gradient(rgba(0,0,0,0.02) 1%, transparent 1%);
  background-size:4px 4px;
}

h1{
  font-family:'Ewert', cursive;
  font-size:4rem;
  line-height:0.9;
  text-align:center;
  letter-spacing:2px;
  margin:1rem 0 0.5rem;
  text-shadow:1px 1px 0 var(--ink-black), 2px 2px 0 rgba(0,0,0,0.25);
}

/* --- Banner Row --- */
.banner{
  display:flex;
  justify-content:center;
  gap:2rem;
  padding:2rem 1rem 4rem;
  flex-wrap:wrap;
}

figure.potion{
  position:relative;
  width:220px;
  height:320px;
  margin:0;
  padding:1rem;
  border:4px solid var(--ink-black);
  box-shadow:2px 2px 0 var(--ink-black), 4px 4px 0 rgba(0,0,0,0.25);
  background:var(--sepia-paper);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  animation:wobble 6s infinite ease-in-out;
}

figure.potion img{
  max-width:100%;
  max-height:70%;
  object-fit:contain;
  filter:drop-shadow(2px 2px 0 var(--ink-black));
}

figcaption{
  font-family:'Ewert', cursive;
  font-size:1.5rem;
  text-align:center;
  letter-spacing:1px;
  color:var(--ink-black);
  text-shadow:1px 1px 0 #ffffff34;
}

/* Water-color splashes behind each potion */
.red-splash::before,
.blue-splash::before,
.green-splash::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  mix-blend-mode:multiply;
  opacity:0.9;
}

.red-splash::before{background:radial-gradient(circle at 30% 30%, var(--candy-red) 0%, transparent 70%);} 
.blue-splash::before{background:radial-gradient(circle at 70% 20%, var(--sky-blue) 0%, transparent 70%);} 
.green-splash::before{background:radial-gradient(circle at 50% 70%, var(--sickly-green) 0%, transparent 70%);} 

/* Hand-inked outline wiggle */
@keyframes wobble{
  0%{transform:rotate(-1deg) scale(0.98);} 
  50%{transform:rotate(1deg) scale(1.02);} 
  100%{transform:rotate(-1deg) scale(0.98);} 
}

@media (max-width:700px){
  h1{font-size:3rem;}
  figure.potion{width:160px; height:260px;}
}