/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


.photo-button {
  /* Step 1: Add the photo link */
  background-image: url('https://mehatecomputer.com/navigation/ms-button.png'); 
  
  /* Step 2: Prevent the photo from repeating */
  background-repeat: no-repeat; 
  
  /* Step 3: Center the photo inside the button */
  background-position: center; 
  
  /* Step 4: Scale the image to fill the button completely */
  background-size: cover; 
  
  /* Step 5: Clean up default button aesthetics */
  border: 1px; 
  color: #0b1325;
  cursor: pointer;
  
  /* Step 6: Hardcoded 88x31 dimensions */
  width: 88px;
  height: 31px;
  padding: 0;          /* Remove padding to prevent sizing distortion */
  overflow: hidden;    /* Cut off any text that accidentally spills out */
  
  /* Step 7: Typography adjustment for small footprint */
  font-size: 14px;     /* Shrank from 16px to fit the 31px height */
  font-weight: bold;
  font-family:  'Courier New', Courier, monospace;
  text-align: center;
  line-height: 31px;   /* Matches height perfectly to center text vertically */
  
  /* Step 8: Thin white outline around the text */
    text-shadow: 
  -1px -1px 0 #ffffff,  
   1px -1px 0 #ffffff,
  -1px  1px 0 #ffffff,
   1px  1px 0 #ffffff;
  
}

.photo-button:hover {
  opacity: 0.9;
  transform: scale(1.02);
  transition: all 0.2s ease-in-out;
}