/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {


  background: linear-gradient(to bottom, #4a412d 39%, #000000 100%);


  color: white;
  font-family: Verdana;
}
  a:link {
  color: #B6954A;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: #40b4db;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: #40b4db;
  background-color: transparent;
  text-decoration: underline;
}

/* CSS Slideshow Container*/

.slideshow-container {
    position: relative;
    width: 800px; /* Set desired width */
    height: 700px; /* Set desired height */
    margin: auto;
    overflow: hidden; /* Ensures images stay within container */
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    /* CHANGE THIS LINE: Forces the image to fit entirely within the 800x700 container */
    object-fit: contain;
}

.slide.active {
    opacity: 1;

}

.slideshow-container {
    position: relative;
    /* The container defines the maximum space on your page */
    width: 500px;
    height: 700px;
    margin: auto;
    overflow: hidden;
    /* Optional: Add a border so you can see the container boundaries */
    /* border: 1px solid red; */
}


  /* --- Base Container & Card Styles --- */
  .project-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
  }

  .project-card {
    /* Initial state: Transparent background color */
    background-color: transparent; 
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 20px;
    text-decoration: none;
    color: inherit;
    flex: 1 1 300px;
    transition: transform 0.3s, box-shadow 0.3s;
    display: block;
    position: relative; 
    overflow: hidden; 
    
  }

  .project-card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    transform: translateY(-5px); 
  }

  /* --- The Fade-In Image Effect --- */
  .project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* Center the image within the card */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* Cover the whole area */
    border-radius: 8px;
    
    /* Initial state: Completely invisible */
    opacity: 0;
    
    /* Add transitions for smooth animation */
    transition: opacity 0.4s ease-in-out; 
    z-index: 1; /* Place image below text */
  }

  .project-card:hover::before {
    /* On hover: Fade in the image */
    opacity: 1;
  }

.project-card p {
    margin-bottom: 0;
    color: white;
    
    }
    
      .project-card h2 {
    margin-top: 0; /* Remove default H2 top margin */
    color: #B6954A ; /* A distinct color for the title */
  }
  


  /* Ensure text is above the image when it appears */
  .project-card h2, .project-card p {
    position: relative;
    z-index: 2; 
    transition: color 0.4s ease-in-out;
  }
  
  .project-card:hover h2, .project-card {
      color: #40b4db; /* Optional: Change text to white when image fades in for contrast */
  }
  
  /* --- Specific Background Images (Set the image paths here) --- */
  
  #card-steamboat::before {
    background-image: url('vlcsnapsteamboatwillie2.png'); 
    background-position: center right;
  }
  
  #card-giraffe::before {
    background-image: url('giraffegamescreenshot.png');
    background-position: bottom left;
  }
  
  #card-demo::before {
    background-image: url('unnamedgame.png');
  }
  
  #card-laserdisc::before {
    background-image: url('policesqaud.png');
    background-position: 10px -95px; 
    
}