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

body {
  background: #1a121c;
  color: #b8a4c4;
  font-family: 'Libre Baskerville', serif;
  overflow-x: hidden;
}

/* AUTHOR TITLE */
.author-title {
  display: block;
  font-family: 'Alice', serif; /* or a serif if preferred */
  font-size: 2rem;
  color: #f3dfe4; /* soft pink-silver from Fredrick's styling */
  margin-bottom: 0.5rem;
}

/* AUTHOR TAGLINE */
.author-tagline {
  font-family: 'Spectral SC', serif; /* or 'Alice' if more formal */
  font-size: 1rem;
  color: #ccc; /* or your soft body text tone */
  line-height: 1.6;
}

/* === Front Page Addons === */
.frontpage-wrapper {
  background-color: #1e1522; 
  padding: 3rem 2rem;
  margin: 3rem auto;
  max-width: 1200px;
  border-radius: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 0;
}

.two-col {
  display: grid;
  grid-template-columns: 32% 1fr; /* left column narrower */
  gap: 3rem;
  align-items: start;
}

@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
}

/* Give each block its own “paper” look */
.author-card,
.links-card,
.text-card {
  background-color: rgba(30, 30, 30, 0.9);
  border: 1px solid #2e625f; /* soft plum instead of bright green */
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}


/* Space between stacked blocks in the left column */
.links-card {
  margin-top: 2rem;
}

/* Make sure columns don’t visually join */
.two-col {
  gap: 2rem; /* you may already have this — ensures space between left & right */
}

.text-card {
  width: 90%;         /* shrink it a little */
  margin-left: auto;  /* push it to the right side of its column */
}

.links-card {
  width: 70%;         /* narrower than the author box */
  margin-left: 0;  /* centre it in the column */
  margin-right: auto;
}

.links-card a {
  color: #f3dfe4; /* soft pink-silver */
  text-decoration: none;
}

.links-card a:hover {
  color: #ffffff;
}

.quick-links a:hover {
  color: #2e625f; /* druid green hover */
}


/* === Welcome Stuff === */

.welcome-title {
  display: block;
  font-family: 'Alice', serif;
  font-size: 1.6rem;
  color: #f3dfe4;
  margin-bottom: 1rem;
  text-align: center;
}

.welcome-body {
  font-family: 'Libre Baskerville', serif;
  font-size: 1rem;
  color: #f3dfe4;
  line-height: 1.6;
  display: block;
  text-align: left;
}

/* === Banners === */
.site-banner {
  text-align: center;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
}

/* == Mobile Banner == */
.mobile-banner {
  display:none;
}

@media (max-width: 768px) {
  .site-banner {
    display: none;
  }
  
  .mobile-banner {
    display: block;
  }
}

/* Make both banners responsive */
.site-banner img,
.mobile-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* === NAVIGATION BAR === */
.navbar {
  background-color: rgba(40, 25, 35, 0.9); /* dusky plum with transparency */
  padding: 1rem 0;
  text-align: center;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline-block;
  margin: 0 1.2rem;
}

.navbar a {
  text-decoration: none;
  color: #f3dfe4; /* soft pink-silver */
  font-family: 'Spectral SC', serif; /* or your preferred font */
  font-size: 1rem;
  transition: color 0.3s ease;
}

.navbar a:hover {
  color: #2e625f; /* optional hover colour — can tweak this */
}