/* 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." */

@font-face {
  font-family: 'OCRAStd'; /* Your chosen name */
  src: url('https://interconnection.neocities.org/OCRAStd.otf');
  font-weight: normal;
  font-style: normal;
}

body {
  /* background-color: black; */
  background-color: black;
  background-size: cover; /* Adjust as needed */
  color: white;
  font-family: 'OCRAStd';
  padding: 20;
}

.head-piece h1{
   text-shadow: 23px -14px 6px rgba(255, 255, 255, 0.3);
}

.gif-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gif-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    min-width: 0;  /* this is key - allows grid items to shrink below content size */
    aspect-ratio: 1 / 1;
}

.fndBtn {
  padding: 15px 30px;
  border: 2px dotted white;
  background-color:black;
  color: white;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  display: inline-block;
}

.fndBtn:hover {
  color: black;
  background-color:white;
  text-decoration: none !important;
}

quote {
  font-style: italic;
  font-size: 1.1rem;
}

.head-piece{
  margin-top:60px;
  margin-bottom:60px;
}


.jumbotron{
  max-width: 600px;
}

/* The Grid Container */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
    gap: 20px; /* Space between grid items */
    max-width: 1200px;
    margin: 0 auto; /* Centers the container */
}

/* The Card (Link) Styling */
.card {
    display: block; /* Makes the link behave like a box */
    text-decoration: none; /* Removes default link underline */
    background-color: black;
    border-radius: 8px 8px 0 0;
    overflow: hidden; /* Ensures image stays within rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: white; /* Default text color */
    border-bottom: 2px solid #636363;
}

/* Hover Effects */
.card:hover {
    transform: translateY(-5px); /* Moves card up slightly */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-bottom: 2px solid #d3d3d3 ;
}

/* Image Styling */
.card img {
    width: 100%;
    height: 200px; /* Enforces consistent height */
    object-fit: cover; /* Crops image cleanly to fit dimensions */
    display: block; /* Removes weird whitespace under images */
}

/* Title Styling */
.card-title {
    padding: 15px;
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}

.container-small {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
    gap: 20px; /* Space between grid items */
    max-width: 1200px;
    margin: 0 auto; /* Centers the container */
}

.card-small {
    display: block; /* Makes the link behave like a box */
    text-decoration: none; /* Removes default link underline */
    background-color: black;
    border-radius: 8px 8px 0 0;
    overflow: hidden; /* Ensures image stays within rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: white; /* Default text color */
    border-bottom: 2px solid #636363;
}

/* Hover Effects */
.card-small:hover {
    transform: translateY(-5px); /* Moves card up slightly */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-bottom: 2px solid #d3d3d3 ;
}

/* Mobile Responsiveness: Stacks columns on small screens */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    .jumbotron {
      max-width:20px;
    }
    .gif-grid {
        grid-template-columns: 1fr;  /* stacks into 1 column */
    }
}