@font-face{
  font-family: 'Abang';
  src: url('/Abang.otf') format('opentype');
}

/* Base / Theme */
:root{
  --bg:#003300;
  --panel:#004400;
  --panel-2:#005500;
  --text:#99ff99;
  --accent:#00ff00;
  --muted:#ccffcc;
  --brand:#ffde59;
  --white:#ffffff;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
}

body{
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: var(--bg);
  color: var(--text);
  padding: 20px;
  position: relative;
}

/* Headings / Branding */
h1{
  margin-bottom: 20px;
  font-family: 'Abang', Arial, sans-serif;
}

h1 span.baby{ color: var(--white); }
h1 span.churn{ color: var(--brand); }

/* Nav */
nav{ margin-bottom:20px; }
nav a{
  color: var(--muted);
  margin: 0 10px;
  text-decoration: none;
}
nav a:hover{ color: var(--accent); }

/* Content container */
section{
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--panel);
  border: 1px solid var(--text);
}

/* Generic media */
img{ max-width: 90%; height:auto; }

/* CAST & CREW cards */
.person{
  display:flex;
  align-items:center;
  margin-bottom:30px;
  padding:15px;
  background-color: var(--panel-2);
  border:1px solid #66cc66;
  border-radius:5px;
}
.person img{
  max-width:220px;
  height:auto;
  margin-right:20px;
  border:2px solid var(--text);
  border-radius:5px;
  cursor:pointer;
}
.person img:hover{
  transform: scale(1.05);
  transition: transform .3s ease;
}
.person-info{ flex:1; text-align:left; }
.person-info h3{ margin: 0 0 10px; font-size:1.2em; }
.person-info p{ margin:0; font-size:.9em; line-height:1.5; }

/* Responsive tweaks for cards */
@media (max-width:600px){
  .person{ flex-direction:column; text-align:center; }
  .person img{ margin-right:0; margin-bottom:10px; }
}

/* STILLS gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top:20px;
}
.gallery img{
  max-width:100%;
  height:auto;
  border:2px solid var(--text);
  border-radius:5px;
  cursor:pointer;
}
.gallery img:hover{
  opacity:.8;
  transition: opacity .3s;
}

/* Lightbox modal */
.modal{
  display:none;
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,.9);
  z-index:1000;
}
.modal-content{
  max-width:90%;
  max-height:90%;
  margin:5% auto;
  display:block;
  cursor:pointer;
  position:relative;
}
.modal-buttons{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.prev,.next{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  background:none;
  border:none;
  color: var(--text);
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
  z-index:1001;
  pointer-events:auto;
  display:flex;
  align-items:center;
}
.prev{ left:10px; flex-direction: row; }
.next{ right:10px; flex-direction: row-reverse; }

/* Triangle arrows */
.prev::before,
.next::before{
  content:"";
  display:inline-block;
}
.prev::before{
  margin-right:8px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 30px solid rgba(0,64,0,.7);
}
.prev:hover::before{ border-right-color: rgba(0,128,0,.7); }
.next::before{
  margin-left:8px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid rgba(0,64,0,.7);
}
.next:hover::before{ border-left-color: rgba(0,128,0,.7); }

/* Mobile tweaks for gallery/arrows */
@media (max-width:600px){
  .gallery{ grid-template-columns: 1fr; }
  .prev::before{
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 20px solid rgba(0,64,0,.7);
  }
  .next::before{
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid rgba(0,64,0,.7);
  }
}

/* Footer */
footer{
  margin-top:40px;
  text-align:center;
}
footer .social{
  margin-top:15px;
  display:flex;
  justify-content:center;
  gap:20px;
}
footer img{
  height:40px;
  width:auto;
  cursor:pointer;
  transition:opacity .3s;
}
footer img:hover{ opacity:.7; }
footer .otm-logo{
  width:180px;
  height:auto;
  display:block;
  margin:0 auto 10px auto;
}