/* General Reset */
html, body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100vh;
   overflow: hidden; /* Prevent scrolling */
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   list-style: none;
   text-decoration: none;
   color: #000;
}

/* Header and Navigation Styling */
.header, .nav-header {
   position: fixed;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   pointer-events: none;
}


.header h1, .nav-header h1 {
   position: absolute;
   bottom: 0px;
   left: 0.06em;
   font-size: 100px;
   font-family: 'SlugSingleW00-Regular';
   letter-spacing: 0px;
}



/* Navigation Icon Styling */
.nav-icon {
   position: fixed;
   top: 0;
   right: 0;
   margin: 1em;
   width: 4em;
   height: 4em;
   background: #000;
   overflow: hidden;
   z-index: 2;
   cursor: pointer;
}

.nav-icon .bar {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 4.2em;
   height: 0.25em;
   background: white;
}

.nav-container {
   position: fixed;
   width: 100%;
   height: 100vh;
   background: #00ff00;
   z-index: 1;
}

.nav-container.nav-items.inactive {
   z-index: -1;
   pointer-events: none;
}


.nav {
   position: absolute;
   width: 100%;
   height: 3em;
   display: flex;
   justify-content: space-between;
   z-index: 2;
}

.nav li {
   margin: 0.7em;
   font-size: 20px;
   font-weight: 600;
}

.nav li:nth-child(3) {
   flex-grow: 0.5;
}

.nav li:not(:nth-of-type(1)) {
   opacity: 0;
}

.nav-items {
   position: absolute;
   top: 20%;
   left: 60.5%;
   transform: translateX(-50%);
   z-index: 1;
}

.nav-items.inactive {
   pointer-events: none; /* Disable clicking */
   opacity: 0.5; /* Optional: visually indicate it's inactive */
}


.nav-items li {
   font-size: 3.7em;
   font-weight: 300;
   letter-spacing: -3px;
   line-height: 60px;
}

.rights {
   position: absolute;
   bottom: 0;
   right: 0;
   margin: 1em;
}

.rights p {
   font-size: 20px;
   font-weight: 600;
}

/* Fade-in animations for menu */
.nav-container, .nav-header, .nav-items li, .rights {
   opacity: 0;
}

/* About Us Section Styling */
.content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 80%;
   font-family: 'SlugSingleW00-Regular';
   color: #000;
   line-height: 1.6;
   animation: fadeIn 0.5s ease-in-out;
   pointer-events: visible;
   z-index: 0;
}


/* Headers within the About Us section */
.content h2 {
   font-size: 2.5em;
   font-weight: bold;
   margin: 0.5em 0;
   text-transform: uppercase;
   color: #000;
}

/* Paragraphs within the About Us section */
.content p {
   font-size: 1.2em;
   font-weight: 300;
   margin: 1em 0;
   color: #333;
   line-height: 1.8;
   text-align: center;
   font-style: italic;
}

/* Digital Clock Styling */
#digital-clock {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 20px;
   letter-spacing: 10px;
   font-weight: bold;
   font-family: 'VT323', monospace; /* VT323 font applied */
   color: white;
   padding: 10px;
}


/* Marquee Styling */
.marquee {
   position: fixed;
   top: 55%;
   left: 50%;
   transform: translateX(-50%);
   font-size: 16px;
   color: white;
   overflow: hidden;
   width: 100%;
   font-family: 'VT323', monospace; /* VT323 font applied */
}

.marquee p {
   white-space: nowrap;
   animation: marquee 15s linear infinite;
}

@keyframes marquee {
   0% {
       transform: translateX(-100%);
   }
   100% {
       transform: translateX(100%);
   }
}



/* Centering and Scaling for the Card */
figure {
   display: block;
   border-radius: 1rem;
   overflow: hidden;
   cursor: pointer;
   width: 250px;
   height: 300px;
   margin: 20px;
   animation: scaleIn 0.5s ease-in-out;
}

figure > * {
   grid-area: 1/1;
   transition: 0.4s;
}

figure img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

figure figcaption {
   display: grid;
   align-items: end;
   font-family: sans-serif;
   font-size: 1.5rem;
   font-weight: bold;
   color: #0000;
   padding: 0.75rem;
   background: var(--c, #0009);
   clip-path: inset(0 var(--_i, 100%) 0 0);
   -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   -webkit-mask-clip: text, padding-box;
   margin: -1px;
   transition: color 0.4s ease;
}

figure:hover figcaption {
   --_i: 0%;
   color: white; /* Text appears white on hover */
}

figure:hover img {
   transform: none;
}

.project-cards {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap; /* side-by-side on desktop */
    width: 100%;
    z-index: 10;
    position: relative;
}

/* Circle Styling */
.circles-container {
   position: absolute;
   pointer-events: none;
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: -1; /* Ensure circles are on top */
}

.circle {
   position: absolute;
   border-radius: 50%;
   mix-blend-mode: difference;
   pointer-events: none;
   opacity: 0; /* Start hidden */
   animation: fadeIn 1s ease-in forwards, moveCircle 20s infinite ease-in-out;
}

.circle.red {
   background-color: red;
   width: 175px;
   height: 175px;
}

.circle.yellow {
   background-color: yellow;
   width: 250px;
   height: 250px;
}

.circle.blue {
   background-color: blue;
   width: 400px;
   height: 400px;
}

/* Circle movement animation */
@keyframes moveCircle {
   0% {
       transform: translate(0, 0);
   }
   25% {
       transform: translate(70vw, 40vh);
   }
   50% {
       transform: translate(30vw, 80vh);
   }
   75% {
       transform: translate(-50vw, 60vh);
   }
   100% {
       transform: translate(0, 0);
   }
}

/* Fade-in animation */
@keyframes fadeIn {
   from {
       opacity: 0;
   }
   to {
       opacity: 1;
   }
}


/* Scale-in animation for the card */
@keyframes scaleIn {
   from {
      transform: scale(0.8);
      opacity: 0;
   }
   to {
      transform: scale(1);
      opacity: 1;
   }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
   .header h1, .nav-header h1 {
       font-size: 50px;
       letter-spacing: 0px;
       margin-bottom: 110px;
   }

   .nav li {
       font-size: 16px;
   }

   #digital-clock {
       font-size: 16px;
       padding: 8px;
   }

   .marquee {
      font-size: 12px;
   }

   .marquee p {
      animation: marquee 7s linear infinite;
   }

   .content {
       width: 90%;
       height: 75%;
       font-size: 1em;
   }

   .content h2 {
       font-size: 1.5em;
   }

   .content p {
       font-size: 0.75em;
   }

   figure {
      width: 150px;
      height: 150px;
      margin: 10px;
  }

  .project-cards {
    flex-direction: column;
    align-items: center;
    margin: 5px;
}

}