:root{
  --bg:#7e5899;
  --accent:#4A8123;
  --white:#ffffff;
  --black:#000000;
}
@font-face {
  font-family: 'Comfortaa';
  src: url('assets/Comfortaa-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
html,body{
  margin:0; padding:0;
  min-height:100vh; overflow:auto;
  font-family:'Comfortaa',sans-serif;
  background:var(--black);
  color:var(--white);
  display:flex;
  flex-direction:column;
  align-items:center;
}
body{
  border-left: 20pt solid var(--black);
  border-right: 20pt solid var(--black);
}
.background{
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:radial-gradient(circle at 50% 50%, var(--bg), rgba(0,0,0,0.9));
  z-index:-1;
}
subheader{
  font-size:1rem;
  margin-bottom:1rem;
  text-shadow:0 0 10px var(--accent);
  width:70%;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
}
subheader l{ grid-column:1; text-align:left; }
subheader c{ grid-column:2; text-align:center; }
subheader r{ grid-column:3; text-align:right; }
a:visited{ color:inherit; }
.content a, subheader a{
  color:var(--white);
  text-decoration:underline;
  display:inline-block;
  transition:color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
}
.content a:hover, subheader a:hover{
  color:var(--accent);
  text-shadow:0 0 12px var(--accent);
  transform:scale(1.08);
}
.dividerline {
  filter: opacity(0.5) drop-shadow(0 0 0 var(--accent));
  margin-top:1rem;
  margin-bottom:1rem;
}
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  pointer-events:none;
  cursor:zoom-out;
  transition:background 0.3s ease;
}
.lightbox.open{
  background:rgba(0,0,0,0.9);
  pointer-events:auto;
}
.lightbox img{
  max-width:95vw;
  max-height:95vh;
  border-radius:4px;
  box-shadow:0 0 40px rgba(0,0,0,0.8);
  opacity:0;
  transform:scale(0.92);
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.lightbox.open img{
  opacity:1;
  transform:scale(1);
}