/* ---------------------------
   Maker Mode Global Styling
---------------------------- */

body {
	background: repeating-linear-gradient(
	  to bottom,
	  #0f0f0f,
	  #0f0f0f 28px,
	  #111111 29px,
	  #0f0f0f 30px
	);
	font-family: 'Source Code Pro', monospace;
	color: white;
	overflow-x: hidden;
  }
  
  /* Add terminal scan lines */
  body::before {
	content: "";
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background-image: repeating-linear-gradient(
	  to bottom,
	  rgba(0, 255, 100, 0.03),
	  rgba(0, 255, 100, 0.03) 1px,
	  transparent 1px,
	  transparent 3px
	);
	z-index: 0;
	pointer-events: none;
	animation: matrixPulse 2s infinite;
  }
  
  @keyframes matrixPulse {
	0%, 100% { opacity: 0.2; }
	50% { opacity: 0.1; }
  }
  
  
  /* ---------------------------
	 Boot Log Section
  ---------------------------- */
  
  #boot-logs {
	padding: 1em 2em;
	font-size: 1rem;
	z-index: 1;
  }
  
  #boot-logs p {
	font-family: 'Source Code Pro', monospace;
	color: #00ff99;
	margin: 0.5em 0;
  }
  
  /* Terminal typing animation */
  @keyframes terminal-typing {
	to {
	  width: 100%;
	}
  }
  
  #boot-logs p {
	overflow: hidden;
	white-space: nowrap;
	width: 0;
	animation: terminal-typing 1.2s steps(30, end) forwards;
  }
  
  /* ---------------------------
	 Maker Body Reveal
  ---------------------------- */
  
  .maker-body-content {
	padding: 2em;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
	z-index: 1;
	position: relative;
  }
  
  .maker-body-content.visible {
	opacity: 1;
  }
  
  /* Return button */
  #exit-maker {
	font-family: 'Source Code Pro', monospace;
	background: black;
	border: 1px dashed white;
	color: white;
	padding: 6px 12px;
	box-shadow: 0 0 10px white;
	cursor: pointer;
	margin-top: 1em;
	display: inline-block;
  }
  
  .project-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
  }

  /* .project-card {
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s;
    background: gray;
  } */

  .project-card {
    width: 100%;
    max-width: 400px; /* or whatever fits your grid */
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: grey;
  }

  .project-card img {
    width: 100%;
    height: 250px;          /* consistent image height */
    object-fit: cover;      /* crop image to fill the space */
    display: block;
  }

  .project-card .content {
    padding: 1rem;
    flex: 1;                /* allows text box to grow evenly */
    display: block;
    flex-direction: column;
    justify-content: space-between;
  }

  .project-card:hover {
    transform: scale(1.02);
  }

  .project-card h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
  }

  .project-card p {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    line-height: 1.4;
	  color: black;

  }

  .project-card ul {
    padding-left: 1rem;
    margin: 0.5rem 0 0 0;
    font-size: 0.9rem;
  }


  #matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9999; /* stays far in the back */
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* allows scrolling & clicking */
}