/* ===========================
   CSS RESET
   =========================== */
* {
  margin: 0; /* Removes default margin from all elements */
  padding: 0; /* Removes default padding from all elements */
  box-sizing: border-box; /* Makes padding and border included in element's total width/height */
}

/*
.
.
.
*/

/* ===========================
   BODY & BASE STYLES
   =========================== */
body {
  font-family: "Impact", "Arial Black", sans-serif; /* Sets default font for entire page */
  margin: 0; /* Removes default body margin */
  padding: 0; /* Removes default body padding */
  background-color: #967859; /* Sets brown background color */
}

h1,
h2 {
  font-family: "Bungee Inline", sans-serif; /* Sets special font for headings */
  font-weight: 400; /* Sets font weight to normal */
  font-style: normal; /* Ensures text is not italic */
}

/*
.
.
.
*/

/* ===========================
   PAGE LAYOUT CONTAINER
   =========================== */
.page-container {
  display: grid; /* Uses CSS Grid for layout */
  grid-template-rows: auto auto 1fr auto; /* Creates 4 rows: nav, hero, content (flexible), footer */
  min-height: 100vh; /* Makes container at least full viewport height */
}

/*
.
.
.
*/

/* ===========================
   NAVIGATION BAR
   =========================== */
.top-navigation {
  display: grid; /* Uses CSS Grid for navigation layout */
  grid-template-columns: repeat(
    5,
    1fr
  ); /* Creates 5 equal columns for nav buttons */
  gap: 10px; /* Adds 10px space between nav buttons */
  padding: 15px 75px; /* Adds padding: 15px top/bottom, 75px left/right */
  background: #3a3a3a; /* Sets dark gray background */
  position: absolute; /* Positions nav absolutely on page */
  top: 0; /* Places nav at top of page */
  left: 0; /* Aligns nav to left edge */
  right: 0; /* Stretches nav to right edge */
  z-index: 1000; /* Places nav above other elements */
}

.nav-button {
  font-family: "Bungee Inline", sans-serif; /* Determines which font is used here */
  background: #ffffff; /* Sets white background */
  border: 2px solid #999; /* Adds gray border, 2px thick */
  border-radius: 10px; /* Rounds corners by 10px */
  padding: 10px 20px; /* Adds padding: 10px top/bottom, 20px left/right */
  text-align: center; /* Centers text inside button */
  text-decoration: none; /* Removes underline from link */
  color: #000; /* Sets text color to black */
  font-size: 18px; /* Sets font size to 18 pixels */
  font-weight: bold; /* Makes text bold */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); /* Adds shadow below button for depth */
  transition: all 0.2s; /* Smoothly animates all property changes over 0.2 seconds */
}

.nav-button:hover {
  background: teal; /* Changes background to teal on hover */
  border: 2px solid #f5f5dc; /* Changes border color to beige on hover */
  color: #f5f5dc; /* Changes text color to beige on hover */
  transform: translateY(-1px); /* Moves button up 1px on hover */
}

/*
.
.
.
*/

/* ===========================
   HERO SECTION
   =========================== */
.hero-image {
  background-image: url("../images/hero.JPG"); /* Sets background image from images folder */
  background-size: cover; /* Scales image to cover entire area */
  background-position: center; /* Centers the background image */
  height: 1000px; /* Sets fixed height of 1000 pixels */
  position: relative; /* Allows absolute positioning of child elements */
}

.hero-text {
  position: absolute; /* Positions text absolutely within hero section */
  top: 30px; /* Places text 30px from top */
  margin-left: 68px; /* Adds 68px space on left side */
  padding-top: 40px; /* Adds 40px padding at top */
  color: #fff; /* Sets text color to white */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Adds dark shadow for readability */
  font-size: 80px; /* Sets large font size of 80 pixels */
  font-family: "Bungee Inline"; /* Uses Bungee Inline font */
}

.hero-text p {
  font-size: 40px; /* Sets font size for paragraphs to 40 pixels */
  text-align: left; /* Aligns text to left */
  margin-left: 9px; /* Adds 9px space on left */
}

/*
.
.
.
*/

/* ===========================
   CONTENT SECTION
   =========================== */
.content-section {
  background-color: #c8a474; /* Sets tan/beige background color */
  padding: 200px 200px; /* Adds large padding: 200px on all sides */
  display: grid; /* Uses CSS Grid for layout */
  place-items: center; /* Centers content both horizontally and vertically */
  border-radius: 50px; /* Rounds corners by 50px */
  border: #967859; /* Sets border color (note: incomplete, missing style/width) */
  margin: 50px; /* Adds 50px margin on all sides */
}

.welcome-container {
  max-width: 1100px; /* Limits maximum width to 1100 pixels */
  width: 100%; /* Uses full available width up to max-width */
}

.welcome-box {
  background: #3a3a3a; /* Sets dark gray background */
  border: 8px outset #f5f5dc; /* Adds 3D outset border, 8px thick, beige color */
  border-radius: 30px; /* Rounds corners by 30px */
  padding: 50px 70px; /* Adds padding: 50px top/bottom, 70px left/right */
}

.welcome-heading {
  font-size: 80px; /* Sets large font size of 80 pixels */
  color: #ffffff; /* Sets text color to white */
  text-align: center; /* Centers text horizontally */
  margin-bottom: 35px; /* Adds 35px space below heading */
  letter-spacing: 2px; /* Adds 2px space between letters */
}

.welcome-text {
  font-family: "Arial", sans-serif; /* Changes font to Arial */
  font-size: 22px; /* Sets font size to 22 pixels */
  line-height: 1.7; /* Sets line height to 1.7x font size for readability */
  color: #ffffff; /* Sets text color to white */
  text-align: center; /* Centers text horizontally */
  margin-bottom: 35px; /* Adds 35px space below paragraph */
}

.thanks-text {
  font-size: 32px; /* Sets font size to 32 pixels */
  font-weight: bold; /* Makes text bold */
  color: #ffffff; /* Sets text color to white */
  text-align: center; /* Centers text horizontally */
}

/*
.
.
.
*/

/* ===========================
   FOOTER SECTION
   =========================== */
.footer-section {
  font-family: "Bungee Inline", sans-serif; /* Determines which font family is used here */
  background-color: #2a3439; /* Sets dark blue-gray background */
  padding: 35px 40px; /* Adds padding: 35px top/bottom, 40px left/right */
}

.footer-navigation {
  display: grid; /* Uses CSS Grid for layout */
  grid-template-rows: repeat(
    5,
    auto
  ); /* Creates 5 rows with automatic height */
  gap: 12px; /* Adds 12px space between links */
  max-width: 300px; /* Limits maximum width to 300 pixels */
}

.footer-link {
  color: #ffffff; /* Sets text color to white */
  text-decoration: none; /* Removes underline from link */
  font-size: 22px; /* Sets font size to 22 pixels */
  font-weight: normal; /* Sets font weight to normal (not bold) */
  display: flex; /* Uses flexbox for layout */
  align-items: center; /* Vertically centers arrow and text */
  gap: 10px; /* Adds 10px space between arrow and text */
  transition: all 0.2s; /* Smoothly animates all property changes over 0.2 seconds */
}

.footer-link:hover {
  color: teal; /* Changes text color to light blue on hover */
  padding-left: 8px; /* Adds 8px padding on left, creating indent effect */
}

.arrow {
  font-size: 18px; /* Sets arrow symbol size to 18 pixels */
}

/*
.
.
.
*/

/* ===========================
   RESPONSIVE DESIGN
   =========================== */

/* Tablet - 1200px and below */
@media (max-width: 1200px) {
  /* Applies styles when screen is 1200px wide or less */
  .hero-text {
    font-size: 110px; /* Reduces hero text size to 110 pixels */
  }

  .hero-text p {
    font-size: 32px; /* Reduces paragraph size to 32 pixels */
  }
}

/* Tablet - 900px and below */
@media (max-width: 900px) {
  /* Applies styles when screen is 900px wide or less */
  .top-navigation {
    grid-template-columns: repeat(
      3,
      1fr
    ); /* Changes nav to 3 columns instead of 5 */
    padding: 15px 30px; /* Reduces horizontal padding */
  }

  .nav-button {
    font-size: 16px; /* Reduces button text size */
  }

  .hero-text {
    font-size: 90px; /* Further reduces hero text size */
  }

  .hero-text p {
    font-size: 28px; /* Further reduces paragraph size */
  }

  .content-section {
    padding: 100px 100px; /* Reduces content padding */
  }

  .welcome-heading {
    font-size: 60px; /* Reduces heading size */
  }

  .welcome-text {
    font-size: 20px; /* Reduces text size */
  }
}

/* Mobile - 600px and below */
@media (max-width: 600px) {
  /* Applies styles when screen is 600px wide or less */
  .top-navigation {
    grid-template-columns: repeat(2, 1fr); /* Changes nav to 2 columns */
    padding: 15px 20px; /* Further reduces padding */
    gap: 8px; /* Reduces gap between buttons */
  }

  .nav-button {
    font-size: 14px; /* Further reduces button text size */
    padding: 8px 15px; /* Reduces button padding */
  }

  .hero-image {
    height: 400px; /* Reduces hero section height for mobile */
  }

  .hero-text {
    font-size: 60px; /* Further reduces hero text size for mobile */
  }

  .hero-text p {
    font-size: 22px; /* Further reduces paragraph size for mobile */
  }

  .content-section {
    padding: 50px 20px; /* Significantly reduces padding for mobile */
    margin: 20px; /* Reduces margin for mobile */
  }

  .welcome-box {
    padding: 35px 40px; /* Reduces box padding for mobile */
  }

  .welcome-heading {
    font-size: 48px; /* Reduces heading size for mobile */
  }

  .welcome-text {
    font-size: 18px; /* Reduces text size for mobile */
  }

  .thanks-text {
    font-size: 26px; /* Reduces thanks text size for mobile */
  }
}