/* 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." */

/* Salt 'n' Light - Custom Styles */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  background-color: #e0f7fa; /* A pleasant, light sky blue */
  color: #1e3a4c;
  margin: 0;
  padding: 0;
}

/* Center the main content */
body {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

header, footer {
  text-align: center;
  padding: 20px 0;
}

h1, h2, h3 {
  color: #005f73; /* A deep, rich teal for headings */
}

a {
  color: #0a9396; /* A vibrant teal/turquoise for links */
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
  color: #008080; /* Teal on hover */
}

/* About Me Section */
.about-section {
  text-align: center;
  margin-bottom: 40px;
  background-color: rgba(255, 255, 255, 0.5); /* A slightly transparent white background */
  padding: 20px;
  border-radius: 8px;
}

.about-image {
  max-width: 200px;
  height: auto;
  border-radius: 50%; /* Makes the image circular */
  border: 5px solid #48d1cc; /* MediumTurquoise border */
  margin-bottom: 20px;
}

/* Styles for the game showcase */
.game-gallery {
  display: grid;
  gap: 20px; /* Space between game cards */
  margin-top: 20px;
  margin-bottom: 40px;
}

.game-card {
  background: #ffffff; /* White background for cards */
  border: 1px solid #94d2bd; /* A soft teal/turquoise border */
  border-radius: 8px; /* Rounded corners */
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.07); /* A slightly more pronounced shadow */
  text-align: center;
}

.game-card h3 {
  margin-top: 0;
}

footer {
  margin-top: 40px;
  border-top: 1px solid #bde0fe; /* A light sky blue border */
  font-size: 0.9em;
  color: #005f73; /* Match heading color */
}

/* About Me Section */
.about-section {
  text-align: center;
  margin-bottom: 40px;
  background-color: rgba(255, 255, 255, 0.5); /* A slightly transparent white background */
  padding: 20px;
  border-radius: 8px;
}

.about-image {
  max-width: 200px;
  height: auto;
  border-radius: 50%; /* Makes the image circular */
  border: 5px solid #48d1cc; /* MediumTurquoise border */
  margin-bottom: 20px;
}

/* Styles for the game showcase */
.game-gallery {
  display: grid;
  gap: 20px; /* Space between game cards */
  margin-top: 20px;
  margin-bottom: 40px;
}

.game-card {
  background: #ffffff; /* White background for cards */
  border: 1px solid #94d2bd; /* A soft teal/turquoise border */
  border-radius: 8px; /* Rounded corners */
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.07); /* A slightly more pronounced shadow */
  text-align: center;
}

.game-card h3 {
  margin-top: 0;
}

footer {
  margin-top: 40px;
  border-top: 1px solid #bde0fe; /* A light sky blue border */
  font-size: 0.9em;
  color: #005f73; /* Match heading color */
}

/* --- Responsive Design CSS --- */

/* 1. Basic Body and Layout Styling */
body {
  /* Use a variable font size that adapts slightly to the screen width */
  font-size: clamp(16px, 1.5vw, 18px); 
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

main {
  /* Add padding to the main content area */
  padding: 1em;
  /* Set a max-width for better readability on very large screens */
  max-width: 1200px;
  margin: 0 auto; /* Center the main content */
}

header, footer {
  text-align: center;
  padding: 1em;
}

/* 2. Responsive "About Me" Section */
.about-section {
  display: flex; /* Use flexbox for alignment */
  flex-wrap: wrap; /* Allow items to wrap on small screens */
  align-items: center;
  justify-content: center;
  gap: 2em; /* Add space between the image and text */
}

.about-image {
  max-width: 150px; /* Limit the max size of the image */
  height: auto;
  border-radius: 50%; /* Make the image circular */
}

/* 3. Responsive Game Gallery */
.game-gallery {
  display: grid;
  /* Start with a single column for mobile */
  grid-template-columns: 1fr; 
  gap: 1.5em; /* Space between game cards */
}

.game-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1.5em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.2s ease-in-out;
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* --- Media Queries for Larger Screens --- */

/* For tablets and larger (screens wider than 600px) */
@media (min-width: 600px) {
  .game-gallery {
    /* Switch to a 2-column grid */
    grid-template-columns: repeat(2, 1fr);
  }
}

/* For desktops (screens wider than 900px) */
@media (min-width: 900px) {
  .about-section {
    /* Stop wrapping and align text to the left */
    flex-wrap: nowrap;
    text-align: left;
  }
  
  .game-gallery {
    /* Switch to a 3-column grid for more space */
    grid-template-columns: repeat(3, 1fr);
  }
}