/* styles.css */

/* Define the custom font */
@font-face {
  font-family: 'FieldGuide';
  src: url('/static/fonts/FieldGuide.ttf') format('truetype');
  /* … */
}

html {
    scroll-behavior: smooth;
}

/* Apply the custom font */
body {
    font-family: 'FieldGuide', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}
/* -----------------------------------
   top nav bar
----------------------------------- */
/* keep logo + menu on one line, vertically centered */
/* make logo & menu start at the top of the bar */
#topnav .topnav {
  display: flex;
  flex-direction: row;
  align-items: flex-start;     /* align both at the top */
  justify-content: flex-start;
  flex-wrap: nowrap;
  padding: 20px;
  background: #333;
}

#topnav .logo {
  /* Logo will try to be 8% of the viewport width… */
  width: 6vw;
  /* …but never larger than 150px or smaller than 60px */
  max-width: 160px;
  min-width: 30px;
  /* Maintain aspect ratio */
  height: auto;
}

/* push the menu right and down */
.primary-nav {
  display: flex;
  align-items: center;
  margin-left: 3rem;    /* move right */
  margin-top: 1rem;     /* move down */
}

/* kill the bullet and all margins/padding */
.primary-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
}

/* your link sizing & style */
.primary-nav ul li {
    font-size: 3vw;
}

.primary-nav a {
    color: #fff;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.2s ease;
}

/* on hover, swap to gold */
.primary-nav a:hover {
  color: #ffd700;
}

/* -----------------------------------
   Base header container
----------------------------------- */
header {
  background-color: #333;
  color: #fff;
  /* Take up ~half the viewport height */
  height: 88vh;

  /* Center everything in a vertical stack */
  display: flex;
  flex-direction: column;
  align-items: center;       /* horizontal centering */
  justify-content: center;   /* vertical centering */
  text-align: center;        /* text is centered by default */
}

/* -----------------------------------
   Logo styling
----------------------------------- */
header .logo {
  max-width: 150px;  /* scales down on small screens */
  width: 20%;        /* or pick a % that works for you */
  height: auto;
  margin-bottom: 1rem;
}


/* -----------------------------------
   Site title
----------------------------------- */
header h1 {
  margin: -2rem 0 1.5rem;
  font-size: 10vw;    /* scales with viewport width */
  line-height: 1.5;
}

/* -----------------------------------
   Common nav reset
----------------------------------- */
header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 3rem;
}

/* -----------------------------------
   Social navigation (Discord/YouTube/…)
----------------------------------- */
.social-nav ul li {
    font-size: 3vw;
}

.social-nav a {
    color: #fff;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.2s ease;
}

/* on hover, swap to gold */
.social-nav a:hover {
  color: #ffd700;
}

/* Members Section */
#members {
    padding: 30px;
    text-align: center;
    background-color: #fff;
}

#members h2 {
    font-size: 72px;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
    position: relative;
}

.members {
    margin: 20px 0;
    font-size: 48px;
    color: #333;
}

.members h3 {
    font-size: 36px;
    color: #333;
    text-align: center;
    position: relative;
}

/* About Section */
#about {
    padding: 30px;
    text-align: center;
    background-color: #333;
    font-weight: normal; /* or 400 */
}

#about h2 {
    font-size: 72px;
    margin-bottom: 20px;
    color: #fff;
    text-align: center;
    position: relative;
    font-weight: normal; /* or 400 */
}

.about {
    margin: 20px 0;
    font-size: 48px;
    color: #fff;
    font-weight: normal; /* or 400 */
}

.about h3 {
    font-size: 36px;
    color: #fff;
    text-align: center;
    position: relative;
    font-weight: normal; /* or 400 */
}

/* Games Section */
#games {
    padding: 30px;
    text-align: center;
    background-color: #fff;
}

#games h2 {
    font-size: 72px;
    margin-bottom: 20px;
    color: #333;
}

.game {
    margin: 20px 0;
    font-size: 32px;
    color: #333;
}

.game h3 {
    font-size: 64px;
    color: #333;
}

.game h4 {
    font-size: 48px;
    color: #333;
}

hr {
  border: none;         /* remove default */
  height: 5px;          /* thickness */
  background-color: #333;
  margin: 1em 0;        /* vertical spacing */
}

.changelog-btn {
  padding: 8px 16px;
  font-family: inherit;         /* keep your pixel font */
  font-size: 2.5rem;
  background: #333;          /* match your accent */
  color: #fff;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.changelog-btn:hover {
  background: #ffd700;
  color: #333;               /* or whatever dark color you prefer */
  border-color: #ffd700;
}

/* Footer Section */
footer {
    background-color: #333;
    color: #333;
    padding: 20px;
    text-align: center;
    font-size: 36px;
}

footer ul {
    list-style-type: none;
    padding: 0;
    display: flex;              /* line them up in a row */
    justify-content: flex-start;/* pack them to the left */
    gap: 20px;
}

footer ul li {
    margin: 5px 0;
}

footer ul li a {
    color: #fff;
    text-decoration: underline;
    transition: color 0.2s ease;
}

footer ul li a:hover {
    color: #ffd700;
}