.back-link {
	display: inline-block;
	margin-bottom: 30px;
	color: #333;
	text-decoration: none;
}

.back-link:hover {
  color: white;
body{
	background: #000;
	color: #00ff66;
	font-family: monospace;
	margin: 0;
	text-align: center;
}

/* NAVBAR */

.navbar{
border-bottom:1px solid #111;
padding:15px 30px;
}

.nav-inner{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1000px;
margin:auto;
}

.brand{
display:flex;
align-items:center;
gap:10px;
}

.logo{
width:36px;
}

.nav-links a{
margin-left:18px;
color:#4ea1ff;
text-decoration:none;
}

.nav-links a:hover{
text-decoration:underline;
}
/* layout */


}
.page-container {
	max-width: 1100px;
	margin: auto;
	padding: 40px 20px;
	font-family: 'Inter', sans-serif;
	color: #FFE8FF;
	background: #0a0a0a;
}

/* org card */
.organization {
  margin-bottom: 40px;
  padding: 20px;
  background: #FFE8FF; 
  /* dark card */
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}

.organization h2 {
	color: #000000;
}

.organization p {
  color: rgba(255,255,255,0.7);
  color: #000000;
}

/* event card */
.event {
  margin-top: 20px;
  padding: 35px;
  background: #181818;
  border-radius: 20px;
  transition: all 0.3s ease;
  cursor: pointer;

  max-height: 100px;   /* collapsed size */
  overflow: hidden;
}

.event.expanded {
  max-height: 2000px;  /* allow images to show */
}

.event h3 {
	color: #FFE8FF;
}

.event p {
  color: rgba(255,255,255,0.7);
  
}

.event-card:hover {
  transform: translateY(-3px);
}

/* EXPAND STATE */
.event-card.expanded {
  background: #f0f0f0;
}

/* MASONRY STYLE */
.masonry-grid {
  column-count: 3;
  column-gap: 10px;
  margin-top: 10px;
}

.masonry-grid img {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s ease;
}

.masonry-grid img:hover {
  transform: scale(1.03);
}

/* FILTER ANIMATION */
#filter-buttons button {
  margin: 5px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: #ddd;
  cursor: pointer;
  transition: 0.2s;
}

#filter-buttons button:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}

/* DASHBOARD */
#dashboard {
	margin-top: 40px;
	padding: 20px;
	background: #111;
	color: #FFE1F0;
	border-radius: 12px;
}

/* Masonry-style collage */
.collage {
	padding: 20px;
  column-count: 3;
  column-gap: 10px;
}

.collage img {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.collage img:hover {
  transform: scale(1.03);
}

/* Smooth fade */
.fade-in {
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Expandable event */
.event {
  cursor: pointer;
  overflow: hidden;
  max-height: 80px;
  transition: all 0.3s ease;
}

.event.expanded {
  background: #222;
}

/* Modal layout upgrade */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.modal-content {
  max-width: 80%;
  max-height: 80%;
}
.volunteer-viewer{
max-width:600px;
margin:40px auto;
background:pink;
padding:50px;
border-radius:4px;
}

.volunteer-viewer iframe{
width:100%;
height:650px;
border:none;
background:white;
}