body {
            margin: 0;
            background-color: #000;
            color: #f8f8ff;
            font-family: 'Courier New', Courier, monospace;
        }

        a {
            color: #f8f8ff;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
        h3 {
            margin: 0;
            
            
        }
        h2 {


            margin-top: 3rem;
            margin-bottom: 1rem;
        }

        .terminal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            border-bottom: 1px solid #f8f8ff;
            background-color: #000;
            box-shadow: 0 0 8px #f8f8ff;
        }

        .terminal-header .title {
            font-size: 1.2rem;
        }

        .terminal-header nav a {
            margin-left: 1.5rem;
        }

        main {
            max-width: 1100px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .terminal-section {
            margin-bottom: 3rem;
        }

        .tag-filters {
            margin-bottom: 1rem;
        }

        .tag-button {
            margin: 0.2rem;
            padding: 0.5rem 1rem;
            background-color: #111;
          border: 2px solid #696969  ;
            color: #f8f8ff ;
            cursor: pointer;
           font-family: 'Courier New', Courier, monospace;
        }

        .tag-button.active {
            background-color: #33ff33;
            color: #0d0d0d;
        }

.projects-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 1.5rem;
}
/* ===================================================================================================================*/
/* ================================================== IMAGE CLASSES ==================================================*/
/* ===================================================================================================================*/
.full-width-image {
    width: 100%;
    height: auto;
    display: block;
}


.small-image {
	       max-width: 300px;
               height: auto;
}


.img-stack{
    display: flex;
    flex-direction: column;
    align-items: center;   /* centers image + button */
    gap: 12px;
  }

  .img-wrap{
    position: relative;
    display: inline-block;
  }

  .base{
    width: 100%;
 
    height: auto;
    display: block;
  }

  .overlay{
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }

  .overlay img{
    width: 100%;
    height: auto;
    display: block;
  }

  /* Default overlays: soft pulse */
  .overlay.on{
    animation: softPulse 0.5s ease-out forwards;
    opacity: 1;
  }
  .overlay.rev{
    animation: softPulse 0.5s ease-out reverse forwards;
    opacity: 1;
  }

  @keyframes softPulse{
    0%   { opacity: 0; }
    40%  { opacity: 0.85; }
    70%  { opacity: 0.65; }
    100% { opacity: 1; }
  }

  /* First overlay: wipe left->right + soft pulse */
  .overlay.wipe-first{
    opacity: 1;                      /* visible, clip controls reveal */
    clip-path: inset(0 100% 0 0);    /* hidden initially */
  }
  .overlay.wipe-first.on{
    animation:
      wipeLR 0.5s ease-out forwards,
      softPulse 0.5s ease-out forwards;
  }
  .overlay.wipe-first.rev{
    animation:
      wipeLR 0.5s ease-out reverse forwards,
      softPulse 0.5s ease-out reverse forwards;
  }

  @keyframes wipeLR{
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  /* Button styling */
  .details-btn{
    background: #35ff00;
    color: #0b0b0b;
     width: 150px;          /* choose once */
    border: 0;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  }
  .details-btn:hover{ filter: brightness(0.95); }
  .details-btn:active{ transform: translateY(1px); }
  .details-btn:disabled{ opacity: 0.6; cursor: not-allowed; }
/* ===================================================================================================================*/
/* ===================================================================================================================*/
/* ===================================================================================================================*/

.project-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #111;
    border: 2px solid #696969  ;
    padding: 0.5rem;
    height: 170px;
    /* remove box-shadow for more ASCII look */
}

  .project-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    height:140px;
    padding-right: 1rem;
    min-width: 250px;
}

.project-image {
    position: relative;
    max-width: 150px;
}

.project-image img {
    width: 100%;
    height: auto;
    display: block;
}

.project-image::after {
    content: "";
    position: absolute;
  
    background: 
linear-gradient(to top,    #111 0%, rgba(17,17,17,0.1) 15%, rgba(17,17,17,0.1) 85%, #111 100%),
        linear-gradient(to left,   #111 0%, rgba(17,17,17,0.1) 15%, rgba(17,17,17,0.1) 85%, #111 100%);
    
    pointer-events: none;
}

        .project-tags span {
            display: inline-block;
            margin-right: 0.5rem;
            color: #f8f8ff;
            font-size: 0.9rem;
        }

        footer {
            text-align: center;
            padding: 1rem;
            border-top: 1px solid #f8f8ff;
            color: #999;
        }
        

.project-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.project-link:hover {
    text-decoration: none;
}

.main-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 1200px; /* optional: to match your site's content */
    margin: 0 auto;
    gap: 2rem; /* space between HOME link and main */
}

.home-link {
    font-family: 'Courier New', Courier, monospace;
    color: #f8f8ff;
    text-decoration: none;
    font-size: 20px;
    padding: 21px 8px;
    
    flex-shrink: 0; /* so it doesn't get squished */
}

.home-link:hover {
    text-decoration: none;
}

main {
    max-width: 1100px;
    flex-grow: 1;
    margin-top: 0rem; /* keeps alignment consistent */
}

 /* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 75px;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
} 


.column img {

    width:75px;
}
#profilePicture{

    float:right;
    border-radius: 50%;
    margin-left: 50px;
}



@media (min-width: 20em)
{
	.image-left, .image-right
	{
		display: flex;
		align-items: center;
	}
 
	.image-left img
	{
 
		margin-right: 1em;
		float: left; /* fallback */
	}
 
	.image-right img
	{
		order: 1;
		margin-left: 1em;
		float: right; /* fallback */
	}
	
	/* clearfix for fallback */
	.image-left::after,
	.image-right::after
	{
		content: "";
  	display: block;
		clear: both;
	}
}
 
@media (min-width: 30em)
{
	.image-left img, .image-right img
	{
		flex-shrink: 0;
	}
}



#about {
  display: block;   /* overrides your display:grid */
}


/* clearfix so the section’s height includes the float */
.terminal-section::after {
  content: "";
  display: block;
  clear: both;
}

/* mobile: drop the float and center */
@media (max-width: 700px) {
  #about .profile-float {
    float: none;
    display: block;
    margin: 0 auto 1rem;
  }
}

/* CSS for tooltips start */
/* Fixed-size box so different image sizes don't move the tooltip */
.cert {
  position: relative;
  width: 75px;
  height: 75px;
  display: grid;
  place-items: center;
}

/* Keep images centered and contained */
.cert img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Tooltip container */
.tooltip { position: relative; display: inline-block; }

/* Tooltip BELOW the icon */
.tooltip .tip {
  position: absolute;
  top: calc(100% + 8px);        /* below the 75px box */
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #f8f8ff;
  border: 1px solid #696969;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 10;
}


/* Show on hover or keyboard focus */
.tooltip:hover .tip,
.tooltip:focus-within .tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* CSS for tooltips END */