body{
  background-color: #000000; /* Fallback color if the image doesn't load */
  background-image: url('bg.png'); /* Replace with your image URL */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center top; /* Centers horizontally, aligns to top vertically */
  background-attachment: fixed; /* Keeps the background image in place when scrolling */
  background-size: cover; /* This is key for responsiveness */
}

@font-face {
  font-family: 'MrSelfDestruct';
  src: url('/MrSelfDestruct.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
 
#all{
width: 625px;
height: 545px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
 
#left{
float: left;
width: 385px;
height: 545px;
}
 
#right{
float: right;
width: 230px;
height: 545px;
}
 
#leftbox{
background-color: #111512;
border-radius: 10px;
width: 365px;
height: 525px;
padding: 10px;
}
 
#leftcontent{
width: 365px;
height: 525px;
border-radius: 10px;
background: #111512;
box-shadow: inset -5px -5px 9px #070807,
            inset 5px 5px 9px #1b221d;
}

 
#contentbox{
width: 345px;
height: 385px;
padding: 10px;
}
 
#content{
width: 312px;
height: 355px;
border-radius: 10px;
background: #111512;
box-shadow: inset -5px -5px 9px #070807,
            inset 5px 5px 9px #1b221d;
border: 2px solid #111512;
color: #728175;
font-size: 14px;
text-align: justify;
padding: 15px;
overflow: scroll;
overflow-x: hidden;
}

h1{
 font-family: 'MrSelfDestruct', serif; 
}
 
#content h1{ 
margin: 0px;
border-bottom: 2px dotted #a4b9a8;
color: #a4b9a8;
text-align: right;
font-weight: normal;
font-size: 26px;
}
 
#imgbox{
padding: 10px;
}
 
#img{
width: 345px;
height: 100px;
border-radius: 10px;
background: #111512;
box-shadow: inset -5px -5px 9px #070807,
            inset 5px 5px 9px #1b221d;
background-image: url('https://i.imgur.com/NPayVe9.png'); /*345x100*/
background-size: 100%;
}

 
#righttop{
width: 198px;
height: 160px;
border: 6px solid #111512;
border-radius: 10px;
background: #111512;
box-shadow: inset -5px -5px 9px #070807,
            inset 5px 5px 9px #1b221d;
margin-bottom: 10px;
background: #111512;
box-shadow: inset -5px -5px 9px #070807,
            inset 5px 5px 9px #1b221d;
padding: 10px;
}
 
#righttopimg{
width: 198px;
height: 160px;
background-color: #a2d5d5;
border-radius: 5px;
background: #111512;
box-shadow: inset -5px -5px 9px #070807,
            inset 5px 5px 9px #1b221d;
background-image: url('https://i.imgur.com/eeO0X9w.png'); /*198x160*/
background-size: 100% 100%;
}
 
#rightmiddle{
width: 198px;
height: 90px;
border: 6px solid #111512;
border-radius: 10px;
background: #111512;
box-shadow: inset -5px -5px 9px #070807,
            inset 5px 5px 9px #1b221d;
padding: 10px;
margin-bottom: 10px;
font-size: 16px;
letter-spacing: 1px;
}
 
#nav{
padding-top: 2px;

}
 
#nav a:hover{
color: #67947b;
border-radius: 2px;
background: linear-gradient(315deg, #121613, #0f1310);
box-shadow:  -5px -5px 9px #070807,
             5px 5px 9px #1b221d;
}
 
.link1{
padding: 1px 1px 1px 1px;
display: inline-block;
margin-bottom: 2px;
border-radius: 2px;
background: #111512;
box-shadow: inset -5px -5px 9px #070807,
            inset 5px 5px 9px #1b221d;
width: 95px;
text-align: center;
float: left;
}
 
.link2{
padding: 1px 1px 1px 1px;
display: inline-block;
margin-bottom: 2px;
border-radius: 2px;
background: #111512;
box-shadow: inset -5px -5px 9px #070807,
            inset 5px 5px 9px #1b221d;
width: 95px;
text-align: center;
float: right;
}
 
#rightbottom{
width: 198px;
height: 182px;
border: 6px solid #111512;
border-radius: 10px;
background: #111512;
box-shadow: inset -5px -5px 9px #070807,
            inset 5px 5px 9px #1b221d;
padding: 10px;
color: #728175;
font-size: 14px;
text-align: justify;
overflow: visible;
overflow-x: visible;
}

 
#rightbottom h1{
margin: 0px;
border-bottom: 2px dotted #a4b9a8;
color: #a4b9a8;
text-align: right;
font-weight: normal;
font-size: 26px;
}
 
a{
color: #7ecca1;
text-decoration: none;
}
 
a:hover{
color: #a2d5d5;
}
 
::-webkit-scrollbar{
width: 7px; 
}
 
::-webkit-scrollbar-track{
background-color: transparent;
border-radius: 10px;
}
 
::-webkit-scrollbar-thumb{
background-color: #a4b9a8;  
border-radius: 10px;
}
 
#credit{
font-size: 13px;
position: fixed;
bottom: 0;
right: 0;
}
 
#credit a{
color: #e7f0f0;
}
 
#credit a:hover{
color: #e7f0f0;
}

/* Gallery Styles */
#gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Creates a responsive grid of thumbnails */
  gap: 10px;
  padding: 10px;
}

.gallery-item {
  cursor: pointer;
  border: 2px solid #a4b9a8;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.2s ease-in-out;
}

.gallery-item:hover {
  transform: scale(1.05); /* Slightly enlarge thumbnail on hover */
  border-color: #728175;
}

.gallery-item img {
  width: 100%;
  height: 100px; /* Fixed height for thumbnails */
  object-fit: cover; /* Ensures images cover the area without distortion */
  display: block;
}

/* Image Overlay (Lightbox) Styles */
#image-overlay {
  display: none; /* Make sure it's hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* Dark transparent background */
  justify-content: center; /* These apply when it's visible */
  align-items: center;    /* These apply when it's visible */
  z-index: 1000; /* Ensure it's on top of everything */
}

#image-overlay.visible {
  display: flex; /* Only show when the 'visible' class is added by JS */
}

#image-overlay img {
  max-width: 90%;
  max-height: 90%;
  border: 5px solid #728175;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

#image-overlay .close-button {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

#image-overlay .close-button:hover {
  color: #728175;
}