:root{
  --light-link: #6a7f4d; /* A softer, lighter dark green */
  --light-header: #3a4e34; /* Muted deep green */
  --light-background: #f0e1c6; /* Warm, creamy off-white */
  --light-card: #f2a597; /* Soft peachy-pink */
  --light-text: #4e2a1f; /* Grounded deep brown */
  --accent: #e1794c; /* Muted orange for accents */
  --dark-background: #2d2d2d;
  --dark-text: #f0f0f0;
  --dark-header-bg: #1b1b1b;
  --dark-link: #e1794c;
}
*{
  font-family: Garamound, serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-align:center;
}
body{
  background-color: var(--light-background);
  color:var(--light-text);
  transition: background-color 0.3s, color 0.3s;
}
body.dark-mode {
  background-color: var(--dark-background);
  color: var(--dark-text);
}
h1,h2 {
  color: white/*var(--light-header);*/
}
h1.dark-mode,h2.dark-mode {
  color: var(--dark-text);
}
h2{
  background-color: var(--light-text);/*rgb(162, 107, 87);*/
  border: black solid;
  border-width: 1px;
}
h3 {
  color: var(--light-header);
}
a {
  text-decoration:none;
  color: var(--light-link);
}
a:hover {
  color:var(--light-card);
}
header {
  background-color: var(--light-header);
  padding: 20px 0;
}
header h1 {
  text-align:center;
  color: #ffff;
}
header h2{
  padding: 5px;
}
nav ul{
  display: flex;
  justify-content: center;
  list-style: none;
  margin-top: 10px;
}
nav ul li{
  margin: 0 15px;
}
nav ul li h2{
  color: #ffffff;
}
section {
  padding: 20px 0;
}
.container {
  width: 80%;
  margin: 0px auto;
  max-width: 1200px;
}
.section h2 {
  text-align: center;
  margin: 10px 0;
}
.projects{
  display:flex;
  justify-content: space-between;
  gap: 20px;
}
.project{
  background-color: var(--light-card);
  padding: 20px;
  border-radius:8px;
  width: 30%
  margin: 10px auto;
}
.project p {
  font-size: 1rem;
  color: var(--light-text);
}
#aboutsec{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33%;
    margin: 0 auto;
}
footer {
  background-color: var(--light-text);
  color: white;
  text-align: center;
  padding: 20px 0;
}
#laurenPic {
    display: block;
    margin: 0 auto;
}
#resPic {
    display: block;
    margin: 0 auto;
    border: solid black;
}
a.dark-mode {
  color: var(--dark-link);
}
a.dark-mode:hover {
  color: var(--light-card);
}
header.dark-mode, footer.dark-mode {
  background-color: var(--dark-header-bg);
}
.project.dark-mode {
  background-color: var(--light-link);
}

.toggle-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: var(--light-text);
  border: none;
  padding: 7px 7px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border-radius: 20px;
}

.toggle-btn.dark-mode {
  background-color: var(--light-card);
}