body {
  background-color: rgb(227, 223, 207);
  background-image: linear-gradient(rgba(227, 223, 207,0.9), rgba(227, 223, 207,0.9)), url("Images/Background.png");
  color: black;
}


.about-card {
  display: flex;
  max-width: 1000px;
  margin: 50px auto; /* Centers the box on the page */
  border: 1px solid #000; /* Thin retro border */
  
  /* The "Hover" Shadow effect */
  
  /* Adds space inside the box */
  padding: 30px;
  gap: 30px;
  
  background: #c0c0c0; /* Classic grey background */
  border-top: 4px solid #ffffff;
  border-left: 4px solid #ffffff;
  border-right: 4px solid #808080;
  border-bottom: 4px solid #808080;
  box-shadow: 10px 10px 0px rgba(0,0,0,0.2);
  
  /* Keeps the early 2000s "box" look */
  font-family: 'Pixelify Sans', monospace;
}

.about-content {
  flex: 2; /* Gives the text more room */
  line-height: 1.6;
  color: #333;
}

.about-image {
  flex: 1; /* Takes up less room than the text */
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-image img {
  width: 100%; /* Scales to fit the right side */
  height: auto;
  border: 10px double #000; /* Retro double-line border */
}

/* Makes it look good on mobile phones */
@media (max-width: 600px) {
  .about-card {
    flex-direction: column;
    margin: 20px;
  }
}


.top-nav {
    margin-bottom: 20px;
    display: flex;
}

.back-button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: #c0c0c0;
    text-decoration: none;
    color: black;
    font-size: 12px;
    /* The 3D "Raised" Border */
    box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080, 1px 1px 0 0 #000;
}

.back-button img {
    width: 16px;
    height: 16px;
}

/* The "Click" Effect */
.back-button:active {
    box-shadow: inset 1px 1px #000, inset -1px -1px #ffffff;
    padding: 5px 7px 3px 9px; /* Shifts text slightly down/right when clicked */
}

.back-button:hover {
    outline: 1px dotted #000;
}