html {
 background-color: black;
 color:white;
font-family: "A DAY WITHOUT SUN";
font-size: 280%;
    margin-left: 0;
    letter-spacing: 0.2;
}
body{
        
 background-image: url('BGRND2.png');
            background-size: cover;
            background-repeat: repeat;
            background-position: center;
            height: 100vh;
            margin: 0;
            padding: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column; 
    }
   .home-button {
      position: fixed;
      bottom: 5%;
      left: 5%;
      width: 150px;
      height: 150px;
      background-image: url('homebttn.png'); 
      background-size: cover;
      cursor: pointer;
        }
.about-button {
      position: fixed;
      bottom: 5%;
      right: 5%;
      width: 150px;
      height: 150px;
      background-image: url('aboutbnttn.png'); 
      background-size: cover;
      cursor: pointer;
        }
.container {
    text-align: center; 
}

.image-container {
    width: 80px; 
    height: 80px; 
    overflow: hidden; 
    position: relative; 
}
  .gallery-container {
    display: inline-flex;
    grid-template-columns: 1fr; 
    gap: 10px; 
    height: 30%; 
        }
.gallery-wrapper {
    width: 250px;
    height: 250px;
    margin: 0 auto; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.gallery-container img {
    width: 250px; 
    height: 250px; 
}
.image-grid {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
}

.image-link {
    margin: 10px; 
    position: relative; 
}

.image-link img {
    width: 100%;
    max-width: 80px; 
    height: auto; 
    transition: transform 0.3s; 
}

.image-link:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid #ffffff; 
    pointer-events: none; 
}