body {
    /* 1. Set the image file path */
    background-image: url('spacee.jpg');
    
    /* 2. Prevent the image from tiling/repeating (Optional, but usually required) */
    background-repeat: no-repeat;
    
    /* 3. Ensure the image covers the entire screen, cropping if necessary */
    background-size: cover;
    
    /* 4. Keep the image fixed in place so the content scrolls over it */
    background-attachment: fixed;

    /* === ADD THIS LINE === */
    /* Hides any content (like the scaled-up surfer) that spills horizontally */
    overflow-x: hidden; 
}
.rocket-image {
  /* Control the size of the rocket */
  width: 400px; 
  height: auto; 
  display: block; /* Important for margin: auto to work */

  /* Center the rocket horizontally above the box */
position: absolute; 
  right: 100px; /* Stays 50px from the right */
  
  /* **CHANGE:** Decrease the top value to move it higher */
  top: 100px;
  /* 50px top margin, auto left/right, 20px bottom margin */
  transform: rotate(30deg);
}
.my-bordered-box {
  width: 550px;
  height: 350px;
  /* Adjust margin up slightly for better placement, or keep as is */
 margin: 250px auto; 
  
  /* 1. Monochromatic Beveled Border (UNMODIFIED) */
  border: 4px solid #c0c0c0; 
  border-top-color: #ffffff; 
  border-left-color: #ffffff;
  border-bottom-color: #808080; 
  border-right-color: #808080;
  
  /* === CHANGED: Box background is now BLACK === */
  background-color: black; 
  /* === CHANGED: Default text color is now WHITE === */
  color: white; 

  margin-left: auto;
  margin-right: auto;
  
  border-radius: 0; 
  padding: 0; 
  
  box-shadow: 
    inset 0 0 10px rgba(0, 0, 0, 0.5), 
    5px 5px 0px 0px #808080; 
  
  outline: none; 
  outline-offset: 0;
  
  position: relative;
}

/* --- NEW: Title Bar Styling --- */
.title-bar {
    /* Classic blue title bar color */
   background-color: #000080; 
    color: white;
    /* === INCREASED PADDING to make it taller === */
    padding: 15px 30px; /* Increased from 3px 6px */
    font-family: 'Tahoma', sans-serif;
    /* === INCREASED FONT SIZE === */
    font-size: 17px; /* Increased from 14px */
    border-bottom: 1px solid #c0c0c0; 
    margin-bottom: 10px; 
    cursor: grab;
}

/* --- NEW: Close Button Styling --- */
.close-button {
    /* Position the button on the right side of the title bar */
    position: absolute;
    /* === ADJUSTED TOP POSITION to center it vertically === */
    top: 7px; /* Adjusted based on new padding/font size */
    right: 5px;
    
    width: 18px;
    height: 18px;
    line-height: 14px;
    text-align: center;
    font-weight: bold;
    font-family: Arial, sans-serif;
    cursor: pointer;

    /* Beveled button look */
    border: 1px solid #c0c0c0; 
    border-top-color: #ffffff; 
    border-left-color: #ffffff;
    border-bottom-color: #808080; 
    border-right-color: #808080;
    background-color: #c0c0c0;
    color: black;
    
    /* Transition for press effect */
    transition: all 0.05s linear;
}

/* --- NEW: Close Button Hover/Active Effect (Pressed look) --- */
.close-button:hover {
    background-color: #d0d0d0;
}

.close-button:active {
    /* Reverse the bevel for a pressed effect */
    border-top-color: #808080; 
    border-left-color: #808080;
    border-bottom-color: #ffffff; 
    border-right-color: #ffffff;
    
    /* Slightly darker background when pressed */
    background-color: #a0a0a0; 
    
    /* Shift text/content down and right to complete the pressed illusion */
    transform: translate(1px, 1px);
}

/* --- Content Adjustments for Readability --- */

.my-bordered-box p {
    color: white; /* Ensures text is visible against the black background */
    font-family: 'Courier New', Courier, monospace; 
}
.home-icon {
  /* Existing positioning and sizing */
  display: block;
  position: absolute; 
  width: 100px;
  height: 100px;
  top: 10px;
  left: 10px;
  margin: 0;
  
  /* 1. Add smooth transition for the shadow/transform */
  transition: all 0.1s ease; 
  
  /* 2. Create the initial 'un-pushed' depth effect */
  
}

.home-icon:hover {
  /* 3. The Push-Down Effect */
  
  /* Move the button down slightly */
  transform: translateY(5px); 
  
  /* Remove the shadow to complete the 'pressed' illusion */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); 
  
  /* Optional: Change background/border color to show interaction */
  opacity: 0.9; /* Slightly dim the icon on hover */
}
@media (max-width: 767px) {
.my-bordered-box {
  width: 250px;
  height: 250px;
 margin: 250px auto;
  
  /* 1. Monochromatic Beveled Border (UNMODIFIED) */
  border: 4px solid #c0c0c0; 
  border-top-color: #ffffff; 
  border-left-color: #ffffff;
  border-bottom-color: #808080; 
  border-right-color: #808080;
  
  /* === CHANGED: Box background is now BLACK === */
  background-color: black;
  /* === CHANGED: Default text color is now WHITE === */
  color: white;
  
  margin-left: auto;
  margin-right: auto;
  
  border-radius: 0; 
  padding: 0; 
  
  box-shadow: 
    inset 0 0 10px rgba(0, 0, 0, 0.5),
    3px 3px 0px 0px #808080; 

  outline: none; 
  outline-offset: 0;
  
  position: relative;
}
.my-bordered-box p {
  line-height: 1.4;
  font-size: 11px;
  color: white; /* Ensures text is visible against the black background */
  font-weight: normal; 
  margin-top: 0px;  
  margin-bottom: 0px;  
    
  max-width: 90%;
  box-sizing: border-box;
}

/* ... rest of the media query styles ... */

/* === Title Bar and Button === */

/* Title Bar - Mobile */
.title-bar {
    background-color: #000080; 
    color: white;
    padding: 12px 24px;
    font-family: 'Tahoma', sans-serif;
    font-size: 10px; /* Smaller font for mobile */
    border-bottom: 1px solid #c0c0c0; 
    margin-bottom: 5px; /* Smaller bottom margin */
    cursor: grab;
}

/* Close Button - Mobile */
.close-button {
    position: absolute;
    top: 4px; 
    right: 5px;
    
    width: 14px; /* Smaller size for mobile */
    height: 14px;
    line-height: 12px; /* Adjusted line height */
    text-align: center;
    font-weight: bold;
    font-family: Arial, sans-serif;
    cursor: pointer;

    /* Beveled button look (same as desktop) */
    border: 1px solid #c0c0c0; 
    border-top-color: #ffffff; 
    border-left-color: #ffffff;
    border-bottom-color: #808080; 
    border-right-color: #808080;
    background-color: #c0c0c0;
    color: black;
    
    transition: all 0.05s linear;
}

/* Close Button Hover/Active (Press Effect) - Mobile */
.close-button:hover {
    background-color: #d0d0d0;
}
.close-button:active {
    border-top-color: #808080; 
    border-left-color: #808080;
    border-bottom-color: #ffffff; 
    border-right-color: #ffffff;
    background-color: #a0a0a0; 
    transform: translate(1px, 1px);
}
  .rocket-image {
    display: block;
    position: absolute;
    
    /* Set a reasonable mobile size */
    width: 80px; 
    height: auto;
    
    /* Positioning (adjust these values to place the rocket where you want it) */
    top: 100px; /* Example: 200px from the top */
    left: 80%; /* Center the rocket horizontally */
    
    /* Use translate to truly center the rocket based on its own width */
    transform: translateX(-50%) rotate(10deg); 
  }
  .go-home-link {
  display: block; /* Important for absolute positioning */
  position: absolute; /* Positions relative to the nearest positioned ancestor (or body) */
  
  /* Raise it 20 pixels from the top of the page/container */
  top: 450px; 
  
  /* Place it 20 pixels from the left edge */
  left:125px; 
  
  /* Remove conflicting margin */
  margin: 0; 
  
  /* ... rest of the styling ... */
}
.home-icon {
  /* Existing positioning and sizing */
  display: block;
  position: absolute; 
  width: 70px;
  height: 70px;
  top: 30px;
  left: 10px;
  margin: 0;
  
  /* 1. Add smooth transition for the shadow/transform */
  transition: all 0.1s ease; 
  
  /* 2. Create the initial 'un-pushed' depth effect */
  
}

.home-icon:hover {
  /* 3. The Push-Down Effect */
  
  /* Move the button down slightly */
  transform: translateY(5px); 
  
  /* Remove the shadow to complete the 'pressed' illusion */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); 
  
  /* Optional: Change background/border color to show interaction */
  opacity: 0.9; /* Slightly dim the icon on hover */
}
}