/* === BASIC RESET === */
@font-face {
  font-family: Butterfly-Regular;
  src: url(/fonts/ButterflyRegular-DOwE0.ttf);
}
@font-face {
  font-family: Monarch;
  src: url(/fonts/MonarchPersonalUseBold-PKLwd.ttf);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === COLORS & VARIABLES === */
:root {
    /*All of these colors are temporary and subject to change*/
    --bg-color: #f0d6a6; /*#121212;*/
    --card-bg: #edbe84;/*#1e1e1e;*/
    --text-color: #f5f5f5;
    --accent-color: #4f8dff;
    --muted-color: #aaa;
}

/* === GENERAL PAGE STYLE === */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  text-align: center;
  padding: 1rem;
}

/* === HEADER / NAVIGATION === */
header {
  background-color: var(--card-bg);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-top: -1rem;
}

#logo {
  width: 40px;
}
nav {
  display: flex;
  justify-content: left;
  padding-left: 2rem;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
nav a {
    text-decoration: none;
}

#logo {
  height: 60px;
  width: 60px;
  /* float: left; */
  /* margin-left: 0px; */
}

nav a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}

nav a:hover,
nav #active {
  color: var(--accent-color);
}

h1 {
  font-family: 'Monarch';
  color: white;
}
#types h2 {
  margin-top: 3rem;
  color: rgb(185, 102, 240);
}
#mission-purpose h2 {
  color: rgb(185, 102, 240);
  border-bottom: solid 1px black;
}
h3 {
  color: purple;
}
#types h3 {
  margin-top: 1rem;
}
h4 {
  color: rgb(49, 0, 128);
}

.split-family {
  margin: 1.5rem auto;
  border: black solid 1px;
  width: 600px;
}

#split-page  {
  margin: 4rem auto 2rem;
  width: 1200px;
  border: black solid 1px;
}

#hero-banner {
  /* background-color: black; */
  /* background-image: url(/images/30730637487-monarch-danaus-plexippus.jpg); */
  width: min-content;
  margin: 0 auto;
  /* height: ; */
}
#hero-banner img {
  width: 800px;
  /* opacity: 0.5; */
  border-radius: 25px;
}

#mission-purpose {
  width: 800px;
  margin: 0 auto;
}


#family-img {
  width: 400px;
  /* margin-bottom: -2.5rem; */
}
.family {
  width: 400px;
}
#cycle-img {
  width: 400px;
}
.button {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: justify; */
  border-radius: 25px;
  width: fit-content;
  padding: 0px 2rem;
  height: 50px;
  background-color: #edbe84;
}
.button a {
  font-family: 'Monarch';
  /* text-decoration: none; */
  color: beige;
  font-size: 1.5rem;
}
.button-container {
  background-color: #edbe84;
  width: 800px;
  margin-top: -1.2rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 25px;
  padding: 2rem;
}
.button-container p {
  font-size: 1.2rem ;
}

#types section {
  margin: 0 auto;
  width: 1000px;
}

.features {
  width: 400px;
  list-style: outside;
  text-align: center;
  margin: -1.5rem auto;
}

table {
  margin: .5rem auto;
  /* line-height: 2rem; */
  border-collapse: collapse;
}
table th {
  color: #fb9658;
  font-size: 1.2rem;
  background-color: #edbe84;
}
table tr td:first-child {
  color: #f48def;
  font-weight: bolder;
}
/* table tr {
  border-bottom: solid black 1px;
} */
table tr td {
  margin: 2rem
}
th, td {
  border: 1px solid black; /* Sets a 1px solid black border for cells */
  padding: 10px;
}

/* === FOOTER === */
footer {
height: min-content;
  background-color: var(--card-bg);
  padding: 3rem;
  margin-top: 1rem;
  display: flex;
  flex-direction:column;
  justify-content: center;
  gap: 1.5rem;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: -1rem;
}

footer a {
  color: var(--text-color);
  text-decoration: none;
}

footer a:hover {
  color: var(--accent-color);
}