/*
   This CSS positions all the text inside a larger, centered box
   and adds the back.jpg image to the full page background.
*/

/* Load the 8-bit font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
  /* Set the full-page background image */
  background-image: url('back.jpg');
  background-size: cover;          /* Make the image cover the entire viewport */
  background-position: center;     /* Center the background image */
  background-attachment: fixed;    /* Fix the background image on scroll */
  
  color: black;
  font-family: 'Press Start 2P', cursive;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* Disable font smoothing for the pixelated effect */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

/* Style for the centered content box */
.content-box {
  width: 640px;
  height: 480px;
  
  padding: 40px;
  position: relative; /* This is crucial for positioning the pfp image */
  
  /* Use the windows-window.png image as the background for the box */
  background-image: url('windows-window.png');
  background-size: 100% 100%;      /* Set background size to match the box dimensions exactly */
  background-position: center;     /* Center the background image */
  background-repeat: no-repeat;
  
  /* Semi-transparent overlay to ensure text is readable */
  background-color: transparent;
  
  /* Box styling */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #333; /* Dark text color for readability */
}

/* Style for the profile picture */
.pfp {
  position: absolute;       /* Position the image relative to the content-box */
  bottom: 30px;             /* Changed to 40px to move it up a little more */
  left: 50%;                /* Move the image to the horizontal center */
  transform: translateX(-50%); /* Adjust the position to be perfectly centered */
  width: 120px;              /* The image is now bigger */
  height: auto;
}

/* Optional: Add styles to make the links and headings more readable */
h1 {
  color: #333;
}

a {
  color: #007bff;
  text-decoration: none;
}