/* includes the header for all pages using this style */

:root {
    --header: #dddddd;
    /* red */
    --text: #222222;
    /* cream */
    --highlight: #a8dadc;
    /* teal */
    --dark: #1d3557;
    --background: #eeeeee
        /* navy */
        --yellow: #f4a261;
    /* warm yellow */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


body {
    font-family: 'oswald', sans-serif;
    background-color: var(--accent);
    color: var(--background);
    /* line-height: 1.6; */

}

h1 {
    margin-bottom: .5rem;
}

h3 {
    margin-bottom: 0;
}

ul.project-list {
    list-style: inside;
    padding: 0;
    margin-bottom: .5rem;
}


ul.project-list li {
    color: var(--dark);
    padding: 0px;
    margin-bottom: 8px;
    font-size: 1rem;
    transition: transform 0.2s ease-in-out;
}


ul.project-list a {
    color: var(--dark);
    padding: 12px;
    text-decoration: none;
    font-size: 1rem;
    transition: transform 0.2s ease-in-out;
}

ul.project-list a:hover {
    color: #ac2f87;
}

header {
    height: 44px;
    background-color: var(--header);
    display: flex;
    align-items: center;
    padding: 22px 48px 16px 16px;
    font-size: 20px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--text);
}

.header-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text);
}
.header-link :visited {
    color: var(--text);
}

 .project-name {
    margin-left: auto;
    font-weight: bold;
 }

main {
    padding: 20px;
    font-size: 1rem;
    margin: 1rem;
}

footer {
    background-color: var(--highlight);
    color: var(--dark);
    padding: 10px 16px;
    text-align: center;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    header {
        font-size: 0.9rem;
        padding: 0 12px;
    }

    main {
        padding: 16px;
        font-size: 0.95rem;
    }

    footer {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
}