body {
  background-color: white;
  color: black;
  font-family: "LR Retrofied", sans-serif;
}

.logo {
  display: block;       /* ensures margin works correctly */
  margin: 1.5rem auto;    /* pushes logo down and centers it */
  width: 300px;         /* or whatever fits your design */
  height: auto;
}

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontal */
  text-align: center;
}


.projects {
  display: flex;
  flex-direction: column;
  gap: 3rem;                 /* spacing between projects */
  align-items: center;
  margin: 3rem auto;
}

/* Each project row */
.project-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  max-width: 800px;
  text-align: left;
}

/* Icon sizing (same as founder icons) */
.project-icon {
  width: 250px;              /* match founder icon size */
  height: auto;
  flex-shrink: 0;
}

/* Text block */
.project-text {
  text-align: left;
}

/* Header */
.project-text h2 {
  font-family: "LR Retrofied", system-ui, sans-serif;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

/* Paragraph */
.project-text p {
  font-family: "LR Retrofied", system-ui, sans-serif;
    font-weight: 400;
  margin: 0;
  line-height: 1.6;
}

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;

  display: flex;
  justify-content: center; /* centers menu */
  gap: 2rem;  
  }/* space between items */
  
  .logo {
  margin-top: 2rem;    /* pushes logo downward */
}

.copyright {
  margin-bottom: 1rem;  /* creates space below text */
}

.neocities-badge {
  display: block;
  margin: 0 auto;
}

.logo {
    /* Initial state before animation starts (hidden and slightly up) */
    opacity: 0;
    transform: translateY(-20px); 
    
    /* Apply the animation */
    animation-name: fadeInDown;
    animation-duration: 0.5s;        /* Duration of the animation */
    animation-timing-function: ease-out; /* Makes the movement smoother */
    animation-fill-mode: forwards;   /* Ensures the logo stays in its final state */
    animation-delay: 0.5s;           /* Optional: A short delay before it starts */
}
/* Define the keyframes for the animation */
@keyframes fadeInDown {
    from {
        opacity: 0; /* Start completely transparent */
        transform: translateY(-20px); /* Start 20 pixels above its final position */
    }
    to {
        opacity: 1; /* End fully visible */
        transform: translateY(0); /* End at its natural position (moved down) */
    }
}

.main-nav ul {
  opacity: 0;
    transform: translateY(-20px); 
    
    /* Apply the animation */
    animation-name: fadeInDown;
    animation-duration: 0.5s;        /* Duration of the animation */
    animation-timing-function: ease-out; /* Makes the movement smoother */
    animation-fill-mode: forwards;   /* Ensures the logo stays in its final state */
    animation-delay: 0.9s;           /* Optional: A short delay before it starts */
}
/* Define the keyframes for the animation */
@keyframes fadeInDown {
    from {
        opacity: 0; /* Start completely transparent */
        transform: translateY(-20px); /* Start 20 pixels above its final position */
    }
    to {
        opacity: 1; /* End fully visible */
        transform: translateY(0); /* End at its natural position (moved down) */
    }
}

.main-nav {
  width: 100%;
  text-align: center;
  position: relative;
}

.main-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0;
  margin: 0;
  margin-bottom: 1rem;
}

.main-nav::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 3000px;
  height: 3px;
  margin: 0.75rem auto 0;
  background: linear-gradient(to right, #E713A6, #0078FF);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: center;
  animation: slideLine 1s ease-out forwards;
}

@keyframes slideLine {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

/* Unclicked (unvisited) links */
a:link {
    color: #E713A6;
}

/* Clicked (visited) links */
a:visited {
    color: #0078FF;
}

.date-text,
.current-time {
  font-family: "LR Retrofied", system-ui, sans-serif;
  font-weight: 700; /* FORCE bold */
}

.blink-colon {
  display: inline-block;
  animation: blink-colon 2s steps(2, start) infinite;
}

@keyframes blink-colon {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  50%  { opacity: 1; }
  75%  { opacity: 0; }
  100% { opacity: 1; }
}