/* Style for the entire body */
body {
    margin: 0; /* Remove default margin */
    height: 100vh; /* Set height to viewport height */
    overflow: hidden; /* Hide content that overflows the viewport */
    background-color: #f0f0f0; /* Light gray background color */
    user-select: none; /* Disable text selection */
    font-family: 'Roboto Mono', monospace;
}

/*Link button*/
.breadcrumb-link-block {
    margin: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #ffffff;
    box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.132);
    border: 0px solid #00000044;
    border-radius: 3px;
    text-decoration: none;
    position: absolute;
    z-index: 999;
    color: #000000;
    font-size: 14px;
    font-weight: 400;
  }
  
  .breadcrumb-link-text{
opacity: 60%;
color: #0000ff;

  }

  .breadcrumb-link-text:hover{ 
    text-decoration: underline;
    opacity: 100%;
}

  .breadcrumb-link-arrow,
  .breadcrumb-link-description {
    
    word-wrap: break-word;
  }

/* Style for the draggable image container */
.image-container {
    position: absolute; /* Position absolutely within the viewport */
    cursor: move; /* Change cursor to 'move' when hovering */
    resize: both; /* Enable resizing in both directions */
    overflow: auto; /* Enable scrolling for overflow */
    border: 1px dashed #616161; /* Dashed border for visibility */
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    backdrop-filter: blur(.8px);
    opacity: 0; /* Start with opacity 0 */
    transition: opacity 0.1s ease; /* Add smooth transition */
}

/* Add a class for loaded images */
.image-container.loaded {
    opacity: 1;
}

/* Style for the images within the container */
.image-container img {
    width: 100%; /* Restrict image width to container width */
    height: 100%; /* Restrict image height to container height */
    display: block; /* Ensure the image is block-level for proper resizing */
}