/* Static Background */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: black;
            background-image: url('/Index/wave-background.gif');  
            background-size: cover;
            background-repeat: repeat;
            overflow: hidden;
            cursor: url('/collages/green-cursor.png') , auto;
        }
        
        
        
        .threecolumn {
              display: grid;
              grid-template-columns: 1fr 3fr 1fr; /* Left, Center, Right */
              gap: 10px; /* Space between columns */
              width: 100vw;
              margin: 0 auto; /* Center the layout */
              height:100%;
          }
          
      
      
      .draggable {
            position: absolute;
            z-index: 9;
            background: url("toxic-rat.gif")
          }
          
      .draggable-header {
            padding: 10px;
            cursor: move;
            margin-top:100px;
            margin-left:200px;
            z-index: 10;
          }

        /* Central Scrolling Frame */
        .scrolling-frame {
            width: 870px;
            height: 600px;
            margin: 0 auto;
            padding: 5px;
            margin-top:100px;
            position: relative;
            
            background: #595151;
            border-radius: 20px;
            box-shadow: 2px 2px 3px inset #ffffff4d, 2px 2px 13px inset #ffffff, 0px 0px 30px inset #ff0000, 0px 3px 3px #0000004d;
            z-index: auto;
            }
        
        .inner{
            border: 7px double;
            border-color: #6a2478;
            border-width: 3px;
            border-radius: 20px;
            padding: 10px;
            height: 580px;
            z-index: auto;
            }
            
            
        .lace{
            height: 73px;
            background: url('/Index/lace.png') -30px 9px ;
            background-repeat: repeat-x;
            position: relative;
            top: -9px; left: 0px;
            width: 840px;
            z-index: auto;
        }
          
        /* Navigation Bar */
        nav {
            text-align: center;
            margin-bottom: 20px;
            z-index: 15;
            
        }

        nav a {
            margin: 0 15px;
            text-decoration: none;
            color: #333;
            font-weight: bold;
            z-index: 15;
        }

        nav a:hover {
            color: #555;
        }

        /* Section Styling */
        section {
            margin-bottom: 50px;
        }

        /* Heading Styling */
        h1, h2 {
            text-align: center;
            color: #333;
        }

        /* Image Styling */
        .image-section img {
            display: block;
            margin: 0 auto;
            max-width: 100%;
            height: auto;
        }

        /* Footer Styling */
        footer {
            text-align: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            margin-top: 50px;
            border-radius: 10px;
        }
        
        .container {
         position:relative;
         width:100vw;
         height:100vh;
         
        }
        
        #nav-menu {
          background-image: url("collages/pc-tower.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          position:absolute;
          width:270px;
          height:640px;
          margin-left:5px;
          margin-top: 5px;
          padding-bottom:0%;
          padding-top:50px;
          border:4px solid white;
          z-index:5;
          /* border-radius:45px; */
          animation: color-change 16s infinite;
          
        }
        
        
        
        @keyframes color-change {
         
          
           0% { border-color: #e3768f; }
          15% { border-color: #e376c7; }
          30% { border-color: #ca76e3; }
          45% { border-color: #7f76e3; }
          60% { border-color: #7f76e3; }
          75% { border-color: #98c758; }
          100% { border-color: #e3768f; }
        }
        
        .nav-button
        {
          background:#325b35;
          font-size:20px;
          
          position:relative;
          color:#5e705f;
          display:flex;
          flex-wrap:wrap;
          width:163px;
          height:12px;
          margin-left:58px;
          margin-top:10px;
          padding-top:5px;
          padding-bottom:12px;
        
          margin-bottom:17px;
          justify-content:space-evenly;
          
          
          }
        .nav-button:hover
        
        {
         background:#09f719; 
         color:white;
        }
        
        
        .gallary {
          color:red;
          position:absolute;
          right:0px;
          
          background:white;
        
          width:23vw;
          
          z-index:30;
          
          }
          
          .row {
             color:green;
            }
        
        #imac-display {
          
            color:white;
            background: black;
            position:absolute;
            z-index: 2 ;
            margin: 0 auto;
            overflow:visible;
            display: flex;
            flex-direction: column;
            align-items: center;
            left:0;
            right:0;
            width:50%;
            height:70vh;
            margin-top:7vh;
            
        }
        
        #imac-frame {
            height:100%; 
            z-index:3 ;  
            display: block;
            position: absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            pointer-events: none;
           
        }
        
        
        
        #popup-window{
          display:none;
          position:fixed;
          z-index:11;
          color:white;
          background-color: black;
          width:100vw;
          height:100vh;
}

.fullscreen-image{
    width:50vw;
  height:90vh;
}


fullscreen-button{transition: transform 0.2s}
.fullscreen-button:hover {transform: scale(1.5);}

.hide {
  display: none;
  opacity: 0; /* Initially hidden */
  visibility: hidden; /* Prevents the element from affecting layout when hidden */
  transition: opacity 0.3s ease-in-out, visibility 0s 0.3s; /* Fade in effect */
 
}

.fullscreen-button:hover + .hide {
  display: block;
  opacity: 1; /* Make text visible */
  visibility: visible; /* Makes it interactable */
  color: white;
  position:absolute;
  bottom:20px;
}

/* Slideshow container */
.slideshow-container {
  width: 95%;
  height: 100%;
  overflow:hidden;
  transform: rotate(-2deg);
  position: relative;
  margin: auto;
}       
        
/* Hide the images by default */
.mySlides {
  display: none;
}


.mySlides:first-child {
  display: block;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 58vh;
  right:6vw;
  width: auto;
  padding: 16px;
  color: #07fc3c;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  text-shadow: 0 0 2px black, 0 0 4px white ;
}

/* Position the "next button" to the right */
.next {
  right: 2vw;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #fcf23c;
  opacity: 0.7;
  font-size: 17px;
  padding: 0.4em;
  position: absolute;
  top: 62vh;
  width: 100%;
  text-align: center;
  font-family: "Smooch Sans", sans-serif;
  /* font-family: 'Hedvig Letters Sans'; */
  font-style: italic;
  text-shadow: 0 0 2px black, 0 0 4px white ; 
 
}

/* Number text (1/3 etc) */
.numbertext {
  color: #07fc3c;
  font-size: 24px;
  text-shadow: 0 0 2px black, 0 0 4px white ;
  padding: 8px 12px;
  position: absolute;
  bottom: 56vh;
  left: 1.8vw;
 
 
}

.highlight {
  display: inline;
  padding: .25em 0;
  background: black;
  box-shadow: .5em 0 0 black, -.5em 0 0 black; 
} 



/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

#crt-static-overlay {
  position: fixed;
  inset: 0;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

#crt-static-overlay.fade-out {
  opacity: 0;
}

#crt-static-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}