html {
    scroll-behavior: smooth;
}
body{
    background-color: #F5F5DC;
    font-family: 'Inter', 'inter', sans-serif;
    color: #674F2D;
}

h1 {
    font-size: 3.5rem;
    font-weight: 500;
}
h2 {
    font-size: 2rem;
    font-weight: 700;
}
h3 {
    font-size: 1.5rem;
    font-weight: 500;
}
h4 {
    font-size: 1rem;
    font-weight: 500;
}
p {
    font-size: 1rem;
    font-weight: 300;
    padding: 0 0 1rem 0;
}

strong {
    font-weight: 600;
}
span {
    font-size: 1.3rem;
    font-weight: 200;
}

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

ul {
    font-size: 1rem;
    font-weight: normal;
    list-style: unset;
    padding-bottom: 1rem;
}

ul, ol {
    padding-left: 1.5rem;
}

section{
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    margin: 5vh 10vh;
    overflow: hidden;
}


.quote {
    width: 100%; /* Fill the full width of parent */
    text-align: center; /* Center the text */
    border-left: 4px solid #674F2D; /* Left bar, adjust color/width as needed */
    padding: 10px 20px; /* Space inside box */
    margin: 20px 0; /* Space above/below */
    background-color: #F5F5DC; /* Optional: subtle background for contrast */
    box-sizing: border-box; /* Ensure padding doesn't overflow width */
}


header {
    height: 70px;
    width: 100%;
    padding: 0 2vh;
    font-weight: 600;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    transition: all 0.3s ease;
}
header div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5ch;
}
header div img {
    height: 1.5rem;
}

nav {
    display: flex;
    flex-direction: row;
    gap: 3vh;
}
nav a {
    text-decoration: none;
    color: #674F2D;
    text-underline-offset: 0px;
}
nav a:hover {
    color: #a57430;
}

nav a.active {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.4px;
}


footer {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-top: #674F2D 1px solid;
    background-color: #e0d2b371;
    padding: 2vh;
}
footer a {
    text-decoration: underline;
}

@media (max-width: 1000px) {section {margin: 5vh;}}
@media (max-width: 768px) {
    section{
        margin: 3vh;
    }
    nav {
        display: none;
    }
}