body {
      background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
      background-color: #000000;
      color: #fff;
      font-family: 'times new roman', cursive, sans-serif;
      margin: 0;
      padding: 0;
    }

    .container {
      display: flex;
      padding: 10px;
      margin: auto;
      margin-top: 70px;
      margin-bottom: 20px;
      position:relative;
      left:0;
      right:0;
      top:0;
      bottom:0;
      width: 1200px;
      height: 1000px;
    
    }

  .column {
    border: 3px solid white; 
    padding: 10px; 
}
  .columnone {
    background-color: black;
    position:absolute;
    left:68px;
    right:0;
    top:0;
    bottom:0;
    width: 200px;
    height: 540px;
}
 .columntwo {
    position:absolute;
    left:310px;
    right:0;
    top:0;
    bottom:0;
    width: 600px;
    height: 250px;
}
  .columnthree {
    border: 3px solid white;
    background-color:black;
    display: inline-block;
    margin-left: 20px; 
    margin-top: 50px;
    margin-bottom: 20px;
    position:absolute;
    left:910px;
    right:0;
    top:100px;
    bottom:0;
    width: 250px;
    height: 650px;
}
  .columnfour {
    overflow:auto;
    margin-right: 10px; 
    margin-top: 50px;
    margin-bottom: 20px;
    position:absolute;
    left:910px;
    right:0;
    top:210px;
    bottom:0;
    width: 250px;
    height: 590px;
}

  .columnfive {
    background-color:black;
    overflow:auto;
    margin-right: 10px; 
    margin-top: 50px;
    margin-bottom: 20px;
    position:absolute;
    left:300px;
    right:0px;
    top:270px;
    bottom:0px;
    width: 600px;
    height: 480px;
}

  .columnsix {
    margin-right: 10px; 
    margin-top: 50px;
    margin-bottom: 20px;
    position:absolute;
    left:580px;
    right:0;
    top:260px;
    bottom:0px;
    width: 300px;
    height: 50px;
  }
  
  .columnseven {
    margin-right: 10px; 
    margin-top: 50px;
    margin-bottom: 20px;
    position:absolute;
    left:100px;
    right:0;
    top:600px;
    bottom:100px;
    width: 500px;
    height: 200px;
  }
  
  .columneight {
    background-color:black;
    margin-right: 10px; 
    margin-top: 50px;
    margin-bottom: 20px;
    border:3px solid blue;
    position:absolute;
    left:610px;
    right:0;
    top:600px;
    bottom:100px;
    width: 470px;
    height: 100px;
  }
  
  .columnnine {
    background-color:black;
    margin-right: 10px; 
    margin-top: 50px;
    margin-bottom: 60px;
    border:3px solid blue;
    position:absolute;
    left:610px;
    right:0;
    top:720px;
    bottom:100px;
    width: 470px;
    height: 450px;
  }
    

   a.tilt {
      display: inline-block;
      font-size: 21px;
      color: blue;
      text-decoration: underline;
      transition: transform 0s, color 0.2s;
      line-height: 35px;
    }

    a.tilt:hover {
      transform: rotate(6deg) scale(1.1);
      color: cyan;
      text-decoration: none;
      line-height: 35px;
    }
    
   a.back {
      display:inline-block;
      font-size:21px;
      color:red;
      text-decoration:underline;
      transition: transform 0s, color 0.2s;
      line-height: 35px;
    }
    
    a.back:hover {
        transform: rotate(-7deg) scale(1.1);
        color: orange;
        text-decoration: none;
        line-height: 35px;
    }
    
    .gallery-links a {
      display: inline-block;
      font-size: 35px;
      color: blue;
      text-decoration: underline;
      transition: transform 0s, color 0.2s;
      line-height: 35px;
      margin-left: 10px;
    }

    .gallery-links a:hover {
      transform: rotate(6deg) scale(1.4);
      color: red;
      text-decoration: none;
      line-height: 35px;
    }
    

    .marquee {
      overflow: hidden;
      background-color: black;
    }

    .marquee p {
      display: inline-block;
      white-space: nowrap;
      font-size: 20px;
      color: #fccf03;
      padding-left: 100%;
      animation: scroll-left 10s linear infinite;
      animation-play-state: running;
    }
    
    .marquee p:hover {
      animation-play-state: paused; 
    }

    @keyframes scroll-left {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-100%);
      }
    }
    
   #sentence {
      font-size: 16px;
      color: #fff;
    }
    


     ::-webkit-scrollbar {
      width: 7px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: blue;
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: cyan;
    }

.gallery-links {
    margin-right: 10px; 
    margin-top: 50px;
    margin-bottom: 20px;
    position:absolute;
    left:650px;
    right:0;
    top:230px;
    bottom:0px;
    width: 300px;
    height: 50px;
}


.masonry {
    column-count: 4;
    column-gap: 10px;
    padding: 10px;
}

.masonry img {
  width: 100%;
  margin-bottom: 6px;
  cursor: pointer;
  transition: transform 0.1s;
}
.masonry img:hover {
  transform: scale(1.05);
}

.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  padding-top: 60px;
  text-align: center;
}

.lightbox img {
  max-width: 80%;
  max-height: 70vh;
}

.arrow {
  position: absolute;
  top: 50%;
  font-size: 50px;
  color: white;
  cursor: pointer;
  user-select: none;
  padding: 20px;
}

#lightboxPrev { left: 20px; }
#lightboxNext { right: 20px; }


#lightboxDesc {
  color: white;
  font-size: 18px;
  margin-top: 10px;
}

#closeLightbox {
  position: absolute;
  top: 20px; right: 40px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}



.slideshow-container {
  position: relative;
  max-width: 800px;
  max-height: 250px;
  margin: auto;
  overflow: hidden;
  
}

.slide {
  object-position: center;
  object-fit: cover;
  display: none;
}

.slide img {
  width: 100%;
  height: auto;
  object-position: center;
  object-fit: cover;

}


.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -20px;
  padding: 10px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  border-radius: 3px;
  background-color: rgba(0,0,0,0.4);
  user-select: none;
}

.prev { left: 10px; }
.next { right: 10px; }

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.7);
}


.fade {
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from {opacity: 0.4} 
  to {opacity: 1}
}

.arrow {
  position: absolute;
  top: 50%;
  font-size: 24px;
  color: white;
  cursor: pointer;
  user-select: none;
  padding: 10px 20px;
  text-decoration: underline;
  font-style: italic;
  transition: color 0s;
}

#lightboxPrev {
  left: 20px;
  transform: translateY(-50%); 
}

#lightboxNext {
  right: 20px;
  transform: translateY(-50%);
}


.arrow:hover {
  color: blue;
  text-decoration: none;
}

#tags {
    background-color:black;
    margin-right: 10px; 
    margin-top: 50px;
    margin-bottom: 60px;
    padding-top: 20px;
    border:3px solid white;
    position:absolute;
    left:68px;
    right:0;
    top:530px;
    bottom:100px;
    width: 220px;
    height: 200px;
}

.tag {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  background-color: black;
  font-weight:bold;
  color: blue;
  cursor: pointer;
  text-decoration: underline;
  transition: background-color 0s;
}

.tag:hover {
  color: white;
  background-color: blue;
  text-decoration: none;
}