#fullscreenOverlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        #fullscreenOverlay img {
            max-width: 80%;
            max-height: 80%;
        }

        .control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2em;
            color: white;
            cursor: pointer;
            user-select: none;
        }

        #leftControl {
            left: 40px;
            color: white;
        }

        #rightControl {
            right: 40px;
            color: white;
        }

     
        #closeControl {
          position: absolute;
          top: 40px; /* Adjusted margin to move the 'X' down */
          right: 40px;
          color: white;
          cursor: pointer;
          user-select: none;
      }
   

    #leftControl:hover,#rightControl:hover,#closeControl:hover{
      color: rgb(154, 255, 199);

    }
 img{
     cursor:pointer;
 }

 @media (min-width: 1540px) {
    .control {
        font-size: 3em;
    }
    #leftControl {
        left: 80px;
    }

    #rightControl {
        right: 80px;
    }

 
    #closeControl {
      top: 60px; /* Adjusted margin to move the 'X' down */
      right: 80px;
  }
  }
  
  @media only screen and (max-width: 700px) {
   
    .control {
        font-size: 1.5em;
    }
    #leftControl {
        left: 20px;
    }

    #rightControl {
        right: 20px;
    } 
    #closeControl {
        top: 40px; /* Adjusted margin to move the 'X' down */
        right: 20px;
        font-size: 2em;
    }
    }