@font-face {
  font-family: "header";
  src: url("./fonts/Bauhaus Demi.ttf");
}
@font-face {
  font-family: "code";
  src: url("./fonts/Zector.ttf");
}

*{
  padding:0;
  margin:0;
  box-sizing: border-box;
  transition:all .3s ease;
  scroll-behavior: smooth;
}

:root {
  /* BACKGROUND */
  --body-bg-image: url(https://storage.needpix.com/rsynced_images/old-purple-background.jpg);
  --body-bg-color: rgba(10,10,10,1);
  
  /* NAVBAR */
  --navbar-bg-color:rgba(255,255,255,.2);
  --navbar-bg-blur: 25px;
  --navbar-border: rgba(255,255,255,.6);
  --navbar-image: url(../cdn/site_logo.png);

  /* HERO */
  --hero-image-shadow: rgba(0,0,0,.3);
  
  /* MAIN */
  
  --main-card-bg: rgba(255,255,255,.04);
  --main-card-bg-blur: 15px;
  --main-card-bg-border: rgba(255,255,255,.05);
  
  /* FOOTER */
  --footer-bg-left: rgba(163, 54, 124, .02);
  --footer-bg-right: rgba(255, 0, 221, .02);
  --footer-bg-left-hover: rgba(213, 104, 174, .2);
  --footer-bg-right-hover: rgba(255, 50, 255, .2);
  --footer-bg-blur: 5px;
}

#about{
  height:auto;
  z-index:1;
  background:var(--body-bg-color);
}

.navbar{
  background:var(--navbar-bg-color);
  backdrop-filter:blur(var(--navbar-bg-blur));
  border-bottom:var(--navbar-border) solid .2em;
	display: flex;
	justify-content: center;
  position:fixed;
  justify-self:right;
  padding:.4em;
  border-radius:2em;
  margin:.8em;
  z-index: 1000;
}
.navbar ul{
	color:white;
	display:flex;
	flex-direction: row;
	gap: 2em;
	list-style: none;
	padding:.5em;
	font-family: mainFont, Arial, sans-serif;
	font-size:1.3em;
}
.navbar ul li.active a::after{
	content: '';
	position:absolute;
	height:2px;
	left: 0;
	bottom: 0;
	width: 100%;
	background: white;
}
.navbar ul a{
	color:white;
	text-decoration: none;
	position:relative;
}
.navbar ul li{
	color:white;
	text-decoration: none;
	transition:all .3s ease;
}

.navbar ul li a:hover::after{
	width:100%;
}
.navbar ul li a::after{
	content: '';
	position:absolute;
	height:3px;
	left: 0;
	bottom: 0;
	width: 0%;
	background: white;
	transition: all .3s ease;
	top:1.2em;
}

.navbar .navbar-content ul li a:hover::after{
	width:100%;
}
.navbar .navbar-content ul li a::after{
	content: '';
	position:absolute;
	height:3px;
	left: 0;
	bottom: 0;
	width: 0%;
	background: white;
	transition: all .3s ease;
	top:1.2em;
}


header{
  background: #AD397E;
  background: -webkit-linear-gradient(top left, rgba(173, 57, 126, 1) 0%, rgba(81, 18, 127, 1) 100%);
  background: -o-linear-gradient(top left, rgba(173, 57, 126, 1) 0%, rgba(81, 18, 127, 1) 100%);
  background: linear-gradient(to bottom right, rgba(173, 57, 126, 1) 0%, rgba(81, 18, 127, 1) 100%);
}
.hero .hero-image{
  padding:5em;
}
.hero .hero-image img{
  display:block;
  width:20em;
  margin:0 auto;
  border-radius:10%;
  box-shadow:0 0 2em 1em var(--hero-image-shadow);
}

main{
  width:100%;
}
.main-container{
  padding: 1em 20em;
  z-index: 2;
  display:flex;
  justify-content: center;
  flex-direction: column;
  color:white;
}
.main-container article{
  background:var(--main-card-bg);
  backdrop-filter:blur(var(--main-card-bg-blur));
  border: var(--main-card-bg-border) solid 2px;
  padding:.4em;
  border-radius: .5em;
}
.main-container article h1{
  text-align:center;
  font-family: Arial, sans-serif;
}
.main-container article hr{
  background:purple;
  border:none;
  height:4px;
  width:50%;
  display:block;
  margin: 0.5em auto;
}
.main-container article p{
  padding:0 3em;
  font-size:1.2em;
  font-family:Arial, sans-serif;
}
.main-container article p a{
  color:white;
}

.showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  padding: 2em 0.5em;
}
.showcase img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.showcase .showcase-banner {
  grid-column: 1 / -1; /* spans both columns = full row */
}

/* responsive: single column on mobile */
@media (max-width: 759px) {
  .showcase {
    grid-template-columns: 1fr;
  }
  .showcase .showcase-banner {
    grid-column: 1;
  }
}
    /* LIGHTBOX */
    .lightbox-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(6px);
      z-index: 1000;
      justify-content: center;
      align-items: center;
      cursor: zoom-out;
    }
    .lightbox-overlay.active {
      display: flex;
    }
    .lightbox-overlay img {
      max-width: 90vw;
      max-height: 90vh;
      border-radius: 10px;
      box-shadow: 0 0 4em rgba(0, 0, 0, 0.8);
      cursor: default;
      animation: lightbox-pop .25s ease;
    }
    @keyframes lightbox-pop {
      from { transform: scale(0.85); opacity: 0; }
      to   { transform: scale(1);    opacity: 1; }
    }
    .lightbox-close {
      position: fixed;
      top: 1.2em;
      right: 1.4em;
      color: white;
      font-size: 2em;
      cursor: pointer;
      line-height: 1;
      opacity: .7;
      user-select: none;
    }
    .lightbox-close:hover { opacity: 1; }

    /* Make showcase images feel clickable */
    .showcase img {
      cursor: zoom-in;
    }
    .showcase img:hover {
      transform: scale(1.03);
      box-shadow: 0 0 1.5em rgba(173, 57, 126, 0.5);
    }

footer{
  display:flex;
  justify-content: center;
}
footer p{
  color:white;
  font-size:1.2em;
  font-family:Arial, sans-serif;
  text-align: center;
}

@media (max-width:1024px){
  .main-container{
    padding: 1em 10em;
  }
  .main-container article{
    padding:.2em;
  }
  .main-container article p{
    padding:0 1em;
    font-size:1.2em;
  }
}
@media (max-width: 759px){
  .main-container{
    padding: 1em 1em;
  }
  .hero .hero-image{
    padding:2em;
  }
  .hero .hero-image img{
    display:block;
    width:15em;
    margin:0 auto;
    border-radius:10%;
    box-shadow:0 0 2em 1em var(--hero-image-shadow);
  }
}