.project-link {
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 12px;
    color: #c2c2c2c1;
    text-decoration: none;
    opacity: 0;           /* Initially hidden */
    transition: opacity 0.2s ease-in-out; /* Smooth fade */
    font-family: Arial, sans-serif;
    
    display: inline-flex;         /* Use flexbox for alignment */
    align-items: center;       /* Vertically center the icon */
}

.draggable:hover .project-link {
    opacity: 0.7;         /* Visible on hover */
}

.project-link:hover {
    opacity: 1;           /* Fully visible on link hover */
}

.project-link .material-symbols-outlined {
    font-size: inherit;      /* Inherit font-size from .project-link */
    color: inherit;         /* Inherit color from .project-link */
    /* Add any additional styling if needed */
    margin-left: 5px;       /* Spacing between text and icon */
}

.overlay-text {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to pass through */
    z-index: 100; /* Ensure it's on top */
    text-align: center;
    font-size: 100px;
    font-weight: bold;
    color: white; /* Default color */
    mix-blend-mode: difference; /* Blend color with background */
    background-color: rgba(128, 128, 128, 0.2); /* Greyish background */
    filter: blur(5px); /* Add blur */
}

.draggable {
    position: absolute;
    z-index: 9;
    /*background-color: #f1f1f1;*/
    text-align: center;
    /*border: 1px solid #d3d3d3;*/
  }

  #div1 {
    top: 50vh;
    left: 50vw;
    }

  #div2 {
    top: 75vh;
    left: 40vw;
    }

  #div3 {
    top: 49vh;
    left: 45vw;
    }

  #div4 {
    top: 75vh;
    left: 60vw;
    }

  #div5 {
    top: 50vh;
    left: 70vw;
    }

  #div6 {
    top: 70vh;
    left: 30vw;
    }
  
  .draggable #div1header,  /* Specificity - target headers within draggable divs */
  .draggable #div2header,
  .draggable #div3header,
  .draggable #div4header,
  .draggable #div5header,
  .draggable #div6header {
    /*padding: 10px;*/
    cursor: move;
    z-index: 10;
    /*background-color: #ffffff;*/
    color: #fff;
    /*border-radius: 10px;*/

  }

.draggable img { /* Style for images within draggable divs */
    border: 1px solid #c2c2c2; /* You can adjust the border style, width, and color */
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #7a7a7a;
    box-shadow: 0px 0px 2px 1px #949494 inset;
    cursor: grab;

  }