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

/* --- Global Page Feel --- */
/* --- Global Page Feel --- */
body {
    margin: 0;
    padding: 0;
    background-color: #dcd6c8;   /* darker desk tone */
    color: #2f2a24;              /* softer ink */
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.65;
}

/* --- Centered Paper Sheet --- */
.container {
    max-width: 820px;
    margin: 80px auto;
    background-color: #f2efe6;   /* warmer paper */
    padding: 56px;
    border: 1px solid #d4ccbc;   /* subtle paper edge */
}

/* --- Header --- */
header {
    text-align: center;
    margin-bottom: 56px;
}

header h1 {
    font-size: 2.6em;
    font-weight: normal;
    margin: 0;
    letter-spacing: 0.5px;
}

header p {
    margin-top: 14px;
    font-style: italic;
    color: #5a5248;
}

/* --- Navigation --- */
nav {
    text-align: center;
    margin-top: 36px;
}

nav a {
    margin: 0 14px;
    text-decoration: none;
    color: #5c4632;  /* warm brown accent */
    border-bottom: 1px solid transparent;
    transition: 0.2s ease;
}

nav a:hover {
    border-bottom: 1px solid #5c4632;
}

/* --- Section Content --- */
section {
    margin-top: 48px;
}

section p {
    margin-bottom: 22px;
}

/* --- Subtle Section Divider (optional use) --- */
hr {
    border: none;
    border-top: 1px solid #d4ccbc;
    margin: 60px 0;
}

/* --- Footer --- */
footer {
    margin-top: 72px;
    font-size: 0.9em;
    color: #6a6258;
    text-align: center;
}

/* --- Design Diary Section Styling --- */

/* Project Sections */
.diary-section {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid #d4ccbc; /* subtle divider between projects */
}

/* Project Headings */
.diary-section h2 {
    font-size: 1.8em;
    margin-bottom: 16px;
    font-weight: normal;
    letter-spacing: 0.5px;
}

/* Status Tags */
.diary-section .tag {
    display: inline-block;
    font-size: 0.75em;
    padding: 3px 8px;
    margin-left: 8px;
    border-radius: 12px;
    background-color: #e4dfd4;  /* paper-friendly muted */
    color: #3a342c;
    border: 1px solid #d0c7b8;
    vertical-align: middle;
}

/* Project Entries List */
.diary-section ul {
    margin: 12px 0 28px 20px;
    padding: 0;
}

.diary-section ul li {
    margin-bottom: 12px;
}

/* Date Highlight (optional) */
.diary-section ul li strong {
    font-weight: 600;
    color: #5a5248; /* muted date ink */
}

/* Optional subtle hover for clarity */
.diary-section ul li:hover {
    background-color: #f7f5ef;
}

/* --- Game Entry Figures --- */
.game-entry {
    display: flex;
    flex-direction: row;  /* image left, text right */
    align-items: flex-start;
    margin-bottom: 30px;

}