body {
   
background: white;
}


 /* Fixed position for navigation */
 .TOMAIN_stone, .TOABOUT_stone, .Back_arrow, .TOWORKS_stone {
    position: fixed;
    top: 10px;
    z-index: 10;
  }
  
  /* Position and resize the TOMAIN_stone on larger screens */
  .Back_arrow {
    left: 10px;
    
  }
  
  .TOWORKS_stone {
    right: 10px;
  }
  
  .TOMAIN_stone {
    left: 10px;
  }
  
  .TOABOUT_stone {
    right: 10px;
  }
  
  /* Default sizes for larger screens */
  .TOMAIN_stone img, .TOABOUT_stone img, .Back_arrow img , .TOWORKS_stone img {
    width: 189px;
    height: 106px;
  }

  .NOTE_ABOUT {
    position: relative; /* Set relative positioning for NOTE_ABOUT */
    text-align: center; /* Center image horizontally */
    display: block;
    margin: auto;
}




  .NOTE_ABOUT img {
    max-width: 100%;  /* Ensure image doesn't exceed screen width */
    height: auto;     /* Maintain aspect ratio */
    max-height: 90vh; /* Ensure it doesn't exceed 90% of the viewport height */
}

@media (max-width: 600px) {
    .NOTE_ABOUT img {
        max-width: 90%;  /* Slightly smaller image on smaller screens */
    }

   

    footer {
        flex-direction: column;
        text-align: center;
    }
}
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    /* Adjust positioning and size on medium screens */
    .TOMAIN_stone, .TOABOUT_stone, .Back_arrow, .TOWORKS_stone {
      top: 5px;
    }
  
    .TOMAIN_stone img, .TOABOUT_stone img, .Back_arrow img, .TOWORKS_stone img {
      width: 100px; /* Scale down for smaller screens */
      height: auto; /* Maintain aspect ratio */
    }
  }
  



  .content {
    position: absolute; /* Set absolute positioning for the content */
    top: 50%; /* Position at the top of NOTE_ABOUT */
    left: 70%; /* Center horizontally */
    transform: translateX(-50%); /* Offset for proper centering */
    width: 50%; /* Adjust width as necessary */
    z-index: 3; /* Ensure it sits above the NOTE_ABOUT */
    text-align: center; /* Center content */
}

.photoMe img {
    width: 35%; /* Responsive image */
    height: auto; /* Maintain aspect ratio */
    box-shadow: 0 0 30px 1px #222236ad;
}

.eyes {
    position: absolute; /* Position the eyes absolutely */
    top: 50%; /* Adjust as necessary to align with the image */
    left: 50%; /* Center horizontally */
    column-gap: 0.5vw;
    transform: translate(-50%, -50%); /* Offset for proper centering */
    width: 100%; /* Ensure eyes take full width */
    height: 1vw; /* Maintain height */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4; /* Ensure it sits above the image */
}

.eye {
    width: 1vw;
    height: 1vw;
    border-radius: 50%; /* Use 50% for circular shape */
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px 1px #222236ad;
}

.pupil {
    width: 0.5vw;
    height: 0.5vw;
    border-radius: 50%; /* Use 50% for circular shape */
    background-color: #000000;
}


.bottom-left-WORKS {
    
    float: left;
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif;
    bottom: 0;
    
  }
  .bottom-right-WORKS {
    float: right;
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif;
    bottom: 0;
   
  }