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

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Homemade+Apple&display=swap');

:root{
  --bg: #fefcf9;
  --text: #88304E;
  --muted: #D3756B;
  --card: #FEF5ED;
  --border: #FFC3A1;
  --link: #522546;
  --max: 980px;
}

*{ box-sizing: border-box; }

body{
    background: #fefcf9; 
    color: #88304E; 
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.55; 
    margin: 0;
}

#container {
  max-width: 1050px;
  margin: 20px auto;
  padding: 0 16px;
}

a {
    color: #522546; 
    text-decoration: none;
    border-bottom: 1px dotted #D3756B;
}

a:hover {
    background: #FEF5ED; 
    
}

/* --- HEADER --- */
header {
    text-align: center;
    padding: 16px 8px;
}

mermaid_logo {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%);
}

.site-name {
    margin-top: 10px;
    font-family: 'Homemade Apple', cursive; 
    font-size: 32px; /* Bumped up slightly to match the vibe of the old font */
    letter-spacing: 3px;
    color: #88304E; 
}

.slogan {
    /* Uses common built-in serif fonts */
    font-family: 'Crimson Text', Georgia, serif; 
    font-style: italic;
    font-size: 16px;
    margin-top: 5px;
    color: #D3756B; 
}

/* --- NAVIGATION --- */
nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

nav a {
    color: #D3756B;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid #FFC3A1;
}

nav a:hover {
    background: #f2f4f7; 
    color: #88304E; 
}

active {
  background:#D3E4CD;
  color:#88304E;
}

/* --- LAYOUT & DIVIDERS --- */
#content {
    display: flex;
    align-items: flex-start;
    gap: 16px;;
    margin-top: 20px;
}

.sidebar {
    width: 280px;
    display: flex;
    flex-direction: column;
}

.center-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card{
  background: #FEF5ED;
  border: 1px solid #FFC3A1;
  border-radius: 16px;
  padding: 16px 18px;
  margin: 14px 0;
}

.card h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  border-bottom: 1px dotted #FFC3A1;
  padding-bottom: 5px;
}

.card h3 {
  margin: 0 0 5px;
  font-size: 1.0rem;
}

/* --- LISTS & IMAGES --- */
ul {
    padding-left: 18px; 
    margin-top: 5px;
}

.card-headshot {
    float: left;
    width: 160px; 
    height: 180px;
    object-fit: cover;
    object-position: center top; 
    margin-right: 16px; 
    margin-bottom: 8px;
    border-radius: 8px; 
}

.card::after {
  content: " ";
  display: table;
  clear: both;
}

main {
    flex: 1;
    padding: 0 15px;
    border-left: 1px dotted #FFC3A1;
    border-right: 1px dotted #FFC3A1;
}

/* --- FOOTER --- */
footer {
    text-align: center;
    padding: 22px 0;
    font-size: 0.95rem;
    color: #D3756B;
    margin-top: 20px;
    border-top: 1px dotted #FFC3A1;
}

footer a {border-bottom: none; text-decoration: underline; }

/* --- MOBILE RESPONSIVENESS --- */
@media(max-width: 880px){
    #content {
        flex-direction: column;
    }
    
    .sidebar, .center-column {  /* Removed the semicolon here */
      width: 100%;             /* Added a semicolon here */
    }
}