body {
      background-color: #000000;
      margin: 0;
    }
    
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-image: url('https://i.pinimg.com/originals/04/18/cb/0418cb63b18512fcdf335c8819059240.gif');
      opacity: 0.2; 
      pointer-events: none;
      z-index: 9999;
      background-repeat: no-repeat; 
      background-size: cover;      
      background-position: center;  
    }

    .image-container {
      position: relative;
      overflow-x: hidden;
      width: 100%;
      height: 100vh;
    }

    .guy {
      position: fixed;
      left: 0;
      bottom: 0;
      transform: translateX(-40%);
      width: 1100px;
      height: auto;
      z-index: 1; 
    }

    .guy-gif {
      z-index: 2; 
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .guy-gif.is-on {
      opacity: 1;
      visibility: visible;
    }


    .svg-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none; 
      z-index: 3; 
    }

    .interactive {
      pointer-events: auto; 
    }

    .interactive path {
      fill: rgba(255, 255, 255, 0);
      cursor: pointer;
    }
    
       
    .text {
      position: fixed; 
      z-index: 999;     
      height: auto;
      pointer-events: none; 
      width: 600px;
    }
    

    .pos-1 { top: 5%;  left: 10%; }
    .pos-2 { top: 18%; left: 60%; }
    .pos-3 { top: 28%; left: 30%; }
    .pos-4 { top: 32%; left: 38%; }
    .pos-5 { top: 42%; left: 55%; }
    .pos-6 { top: 58%; left: 50%; }
    .pos-7 { top: 75%; left: 25%; }
    .pos-8 { top: 68%; left: 70%; }
    
    .back {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 99999; 
      color: #000000; 
      text-decoration: none;
      font-family: ms gothic;
      font-size: 1rem;
      font-weight: bold;
  
    }
    
    .back:hover {
      color: #ff0000;
    }