html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inconsolata", monospace;
  color: #000;
  /* Added a background color for the body to help visualize the 'page' */
  background-color: #f0f0f0;
}

header {
  text-align: center;
}
header a {
  color: #252525;
  text-decoration: none;
}
header a:hover {
  color: #0000cd;
}

.grid {
  background-image: url("../img/texturedPaper.jpg");
  /* Changed background-size to cover for better scaling */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid rgba(53, 56, 57, 0.2);

  /* --- Desktop Page Simulation --- */
  /* Use max-width so it can still shrink if the desktop window is narrow */
  max-width: 8.5in;
  /* Keep the fixed height for the 'page' look on desktop */
  height: 11in;
  width: 95%; /* Ensures it doesn't overflow the viewport */

  margin: 2rem auto; /* center horizontally with spacing on top/bottom */
  padding: 5rem;
  box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.4); /* subtle drop shadow */
  display: grid;
  gap: 10px;
  grid-template-columns: 2.5fr 5fr;
  grid-column-gap: 10px;
  /* Keep original row definitions for desktop */
  grid-template-rows: 0.5fr 0.5fr 0.5fr 2fr;
}

@page {
  size: A4;
  margin: 0;
}
.title {
  grid-column: 1/3;
  text-align: left;
  font-weight: 500;
}
.col-1-row-2,
.col-1-row-1,
.col-1-row-3 {
  font-weight: 600;
}
.col-1-row-1,
.col-1-row-2 {
  padding-left: 10px;
  padding-top: 10px;
}
.col-1-row-3 {
  padding-left: 10px;
}
.justify-end {
  display: flex;
  justify-content: flex-end;
  grid-column: 1/3;
}
.mt-20 {
  text-align: left;
}
.contact-info a {
  color: #372528; /* Or whatever color you want */
  text-decoration: none;
}

/* Optional: Add a hover effect for better UX */
.contact-info a:hover {
  color: #ed2100;
  text-decoration: underline;
}

/* --- Media Query for Mobile Devices (e.g., screens smaller than 768px) --- */
@media (max-width: 768px) {
  .grid {
    /* Override the fixed height for mobile; allows content to flow */
    height: auto;
    /* Switch to a single-column layout */
    grid-template-columns: 1fr;
    /* Let rows size automatically based on content */
    grid-template-rows: auto;
    /* Reduce padding and margin for smaller screens */
    padding: 1.5rem;
    margin: 1rem auto;
  }

  /* Ensure elements span the full width of the single column */
  .title,
  .justify-end {
    grid-column: 1;
  }

  /* Optional: Align contact info to the start on mobile */
  .justify-end {
    justify-content: flex-start;
  }

  /* Remove side padding from labels on mobile */
  .col-1-row-1,
  .col-1-row-2,
  .col-1-row-3 {
    padding-left: 0;
    padding-top: 10px;
  }
}