@import url('style.css');
.main-content {
    background-size: contain;
    justify-content: center;
    flex-direction: column; 
}

.shelf{
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: 0;
    padding-bottom: 0;
    transition: opacity 0.3s; /* Smooth fade effect (optional) */
}
.container {
  min-height: 100vh;
}

.side-column {
    height: 125vh;
}

.image-container {
  position: relative; /* Required for absolute positioning inside */
  display: inline-block; /* Adjust as needed */
}

/* hover styles */
.shelf-container {
  position: relative;
  display: inline-block;
}

.resource {
  position: absolute;
  top: 200px; /* Adjust to position on shelf */
  left: 50px; /* Adjust to position on shelf */
}

.resource-icon {
  width: 200px;
  height: auto;
  filter: drop-shadow(10px 5px 5px rgba(255, 244, 249, 0.919));
  transition: transform 0.2s;
}

.resource-icon:hover {
  transform: scale(1.05); /* Optional: slight grow effect */
}

.resource-tooltip {
  position: absolute;
  bottom: -95%; /* Appears above the icon */
  left: -50%;
  transform: translateX(-50%);
  background-color: rgb(219, 242, 255);

  border: solid;
  border-width: 5px;
  border-image: url(border-image2.png) 30 round;

  color: rgb(15, 39, 46) ;
  text-shadow: 4px 4px 6px rgb(209, 126, 159);

  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  opacity: 0;
  transition: opacity 0.3s;
  width: 200px;
  text-align: center;
  pointer-events: none; /* Prevents blocking clicks */
  z-index: 10;
}

.resource:hover .resource-tooltip {
  opacity: 1;
}


#icon-2{
  top: 300px; left: 290px
}

#icon-3{
  top: 300px; left: 525px; size:50%
}

#icon-4{
  top: 44%; left: 7%;
}

#icon-5{
  top: 58%; left: 37%;
}

#icon-6{
  top: 44%; left: 68%;
}


#icon-2-tooltip {
  bottom:200%; left:50%;
}

#icon-3-tooltip {
  bottom:-370%; left:130%;
}

#icon-4-tooltip {
  bottom:-65%; left:-30%;
}

#icon-5-tooltip {
  bottom:150%; left:50%;
}

#icon-6-tooltip {
  bottom:-78%; left:130%;
}