/* Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body {
  display: flex;
  flex-direction: column;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  min-height: 100vh; /* Takes full height of the screen */
  margin: 0; /* removes default margins */
  color: #333333;
  background-color: #ffffff;
}

/* Header Styling */
header {
  text-align: center;
  padding: 1rem 1.25rem;
  background: #ffffff;
  color: #333;
}

/* Navigation Bar Styling */

nav {
  background: #ffae00;
  padding: 1rem 5%;
  border-radius: 1rem;
  box-shadow: inset 0px -20px 20px 2px #ffe500e6;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: 1.25rem; /* This is 20px (20 / 16 = 1.25) */
  justify-content: center;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

nav a:hover,
nav a:focus {
  color: #007bff;
  outline: none;
}

main {
  flex: 1; /* This "grows" to fill all available space, pushing the footer down */
  text-align: center;
  padding: 1rem;
  background-color: #ffffff;
}

/* Main layouts */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem;
  padding: 2.5rem 5%;
  max-width: 90vw;
  margin: 0 auto;
}

.item {
  background: #fbfff7;
  color: #000000;
  padding: 1.25rem;
  border-radius: 1.5rem;
  box-shadow: 0 0.25rem 0.375rem #c8e5ff;
  text-align: center;
}

.item ul {
  text-align: left;
}

/* Heading Styling */
h1 {
  font-size: clamp(
    1.5rem,
    5vw,
    3rem
  ); /* Minimum 1.5rem, Preferred 5vw, Maximum 3rem */
  line-height: 1.2;
  color: #000746;
}

/* Footer Styling */
footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 1rem 1.25rem;
  background: #ffef77;
  color: #000000;
  /* border-top: 1px solid #4a4a4a; */
  box-shadow: inset -3px 20px 20px 5px #ffffff;
}

footer ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: 1.25rem; /* This is 20px (20 / 16 = 1.25) */
}

footer a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

footer a:hover,
footer a:focus {
  color: #007bff;
}

footer p {
  margin: 0; /*This will keep the footer text aligned with the links */
}