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

/* ----------------------
   GLOBAL STYLES
----------------------- */

body {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  background-color: #0f1a14;   /* dark green background */
  color: #e8f5e9;              /* light text */
}

h1, h2, h3 {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 2px;
}

a {
  text-decoration: none;
  color: #a5d6a7;
  transition: 0.3s ease;
}

a:hover {
  color: #66bb6a;
}

/* ----------------------
   HEADER + NAV
----------------------- */

header {
  background-color: #13231a;
  padding: 20px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #1f3a2a;
}

header h1 {
  margin: 0;
  font-size: 28px;
  color: #81c784;
}

nav a {
  margin-left: 30px;
  font-size: 14px;
  text-transform: uppercase;
}

/* ----------------------
   HERO SECTION
----------------------- */

.hero {
  text-align: center;
  padding: 100px 20px;
}

.hero h2 {
  font-size: 40px;
  margin-bottom: 10px;
  color: #a5d6a7;
}

.hero p {
  font-size: 18px;
  opacity: 0.8;
}

/* ----------------------
   PORTFOLIO GRID
----------------------- */

#portfolio {
  padding: 60px;
}

#portfolio h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 28px;
  color: #81c784;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.gallery-item {
  overflow: hidden;
  border-radius: 8px;
  background-color: #1c2e24;
  transition: transform 0.4s ease;
}

.gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
  opacity: 0.85;
}

/* ----------------------
   CONTACT SECTION
----------------------- */

#contact {
  text-align: center;
  padding: 60px 20px;
  background-color: #13231a;
  border-top: 1px solid #1f3a2a;
}

#contact a {
  font-weight: bold;
  color: #66bb6a;
}

/* ----------------------
   FOOTER
----------------------- */

footer {
  text-align: center;
  padding: 20px;
  font-size: 12px;
  background-color: #0c140f;
  color: #6b8f75;
}