@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

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

:root {
    --terracotta: #945d60;
    --herb: #626e60;
    --chili: #af473c;
    --charcoal: #3c3c3c;
    --pheonic-blue: #328da8;
    --pheonic-white: #fff;
    --pheonic-lightgrey: #f4f4f4;
    --pheonic-orange: #e88302;
    --pheonic-parchment: #f1f1e8;
    --pheonic-gold: #d4af37;
    --max-content-width: 50rem;
}

html, body {
    /* background: #5d6d7e; */
    background: var(--pheonic-lightgrey);
    line-height: 1.4;
    letter-spacing: 1px;
    height: 100vh;
}

main {
    flex: 1 0 auto;
    overflow: scroll;
}

.blockquote {
    padding: 1rem 1rem;
}

.blockquote-content {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 1;
    max-width: 90%;
    margin: auto;
    padding: .5rem;
    border-radius: .35rem;
    background: lightgrey;
}

pre {
    font-size: small;
    background: lightgrey;
    padding: .5rem;
    margin: 1rem 1rem;
    word-wrap: break-word;
    overflow: auto;
    max-height: 40rem;
}

.site-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.container {
    background: var(--pheonic-lightgrey);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    max-width: var(--max-content-width);
}

@media screen and (min-width: 1024px) {
    .container {
        max-width: var(--max-content-width);
    }
}

nav {
    display: flex;
    flex-direction: column;
    background: var(--pheonic-lightgrey);
    align-items: center;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    border-top: 1px solid var(--pheonic-blue);
    border-bottom: 1px solid var(--pheonic-blue);
}

@media screen and (min-width: 768px) {
    nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

nav .logo img {
    display: block;
    height: 6rem;
    max-height: 6rem;
    padding: 1rem 0;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    nav {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    nav .logo {
        float: left;
    }
    nav .logo img {
        margin: 0;
        height: 7rem;
        max-height: 7rem;
        padding-top: 1rem;
        padding-bottom: 0;
    }
    nav .menu {
        float: right;
    }
}

nav ul {
    padding-bottom: 1rem;
    width: 100%;
    max-width: 100%;
    list-style: none;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    background: var(--pheonic-blue);
    padding: .5rem;
    border-radius: .5rem;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: .9rem;
}

nav ul li a:nth-child(n+1) {
    margin-left: .25rem;
}

nav ul li a:hover {
    color: var(--pheonic-gold);
}

.breadcrumbs {
    padding: 0 1rem .5rem 2rem;
    border-bottom: 1px solid var(--pheonic-blue);
}

.breadcrumbs ul {
    list-style: none;
}

.breadcrumbs a {
    color: var(--pheonic-blue);
    text-decoration: none;
}

header .welcome {
    border-radius: .5rem;
    padding: .5rem;
}

header h1 {
    color: var(--pheonic-white);
    font-size: 1.4rem;
    padding: .5rem;
    letter-spacing: 1px;
    background: var(--pheonic-blue);
    font-family: 'Roboto', sans-serif;
    border-radius: .5rem .5rem 0 0;
}

header .welcome .paragraphs {
    background: var(--pheonic-parchment);
    border-radius: 0 0 .5rem .5rem;
    border: 1px solid var(--pheonic-blue);
}

header .welcome p {
    color: var(--charcoal);
    line-height: 1.2rem;
    padding: .5rem;
    border-radius: 0 0 .5rem .5rem;
    font-family: 'Roboto', sans-serif;
}

section .latest-posts {
    display: block;
    gap: .5rem;
    color: var(--charcoal);
    border-radius: .5rem;
    margin: 0 .5rem;
    border: 1px solid var(--pheonic-blue);
}

section .latest-posts h2 {
    font-family: 'Roboto', sans-serif;
    color: var(--pheonic-white);
    background: var(--pheonic-blue);
    padding: .5rem;
    letter-spacing: 1px;
    border-radius: .5rem .5rem 0 0;
    font-size: 1.2rem;
}

section .latest-posts .paragraphs {
    display: block;
    padding: .5rem;
}

section .latest-posts .paragraphs article {
    color: var(--charcoal);
    background: var(--pheonic-parchment);
    border: 1px solid var(--pheonic-blue);
    border-radius: .5rem;
    margin-bottom: .5rem;
    font-family: 'Roboto', sans-serif;
}

section .latest-posts .paragraphs article .home-page-title {
    display: flex;
    flex-direction: column;
    color: white;
    border-bottom: var(--pheonic-blue) 1px solid;
    background: var(--pheonic-blue);
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
    padding: 0 .25rem;
    letter-spacing: 1px;
}

@media screen and (min-width: 768px) {
    section .latest-posts .paragraphs article .home-page-title {
        flex-direction: row;
        justify-content: space-between;
        align-content: center;
        align-items: flex-start;
    }
}

section .latest-posts .paragraphs article .home-page-title time {
    color: white;
    font-size: .8rem;
    font-weight: bold;
}

section .latest-posts .paragraphs article .home-page-title a {
    color: var(--pheonic-white);
    font-size: 1rem;
}

section .latest-posts .paragraphs article .post-excerpt {
    padding: .5rem;
}

section .latest-posts .paragraphs article .post-excerpt h3 {
    padding: .5rem;
}

section .latest-posts .paragraphs article a {
    color: var(--pheonic-blue);
    text-decoration: none;
}

section .latest-posts .more-link {
    text-align: right;
    margin-bottom: 1rem;
    margin-right: .5rem;
}

section .latest-posts .more-link a {
    color: var(--pheonic-white);
    background: var(--pheonic-blue);
    font-style: italic;
    text-decoration: none;
    padding: .5rem;
    border-radius: .5rem;
    border: 1px solid var(--pheonic-blue);
}

.blog-index-container {
    flex: 1 0 auto;
    overflow: scroll;
}
.project-index-container article, .blog-index-container article {
    margin: 0 1rem 1rem 1rem;
    border-radius: .5rem;
    background: var(--pheonic-parchment);
}


.project-index-container article .article-header, .blog-index-container article .article-header {
    background: var(--pheonic-blue);
    padding: .5rem;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
}

.project-index-container article .article-header h2, .blog-index-container article .article-header h2 {
    color: #fff;
    font-size: 1.2rem;
}

.project-index-container article .project-content h3, .blog-index-container article .post-content h3 {
    color: var(--charcoal);
    font-size: 1.1rem;
    padding: .5rem 0 .25rem;
}

.project-index-container article .project-content p, .blog-index-container article .post-content p {
    padding-bottom: 1rem;
    text-indent: 1.5rem;
}

.project-index-container article .article-header h2 a, .blog-index-container article .article-header h2 a {
    color: #fff;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
}


.project-index-container article .project-content a, .project-index-container article .repo-link a, .project-container article .repo-link a, .blog-index-container article .post-content a {
    color: var(--pheonic-blue);
    text-decoration: none;
    font-weight: bold;
}

.blog-index-container article .article-header time {
    color: var(--pheonic-lightgrey);
    font-family: 'Roboto', sans-serif;
    font-size: .8rem;
    font-weight: 600;
}

@media screen and (min-width: 768px) {
    .blog-index-container article .article-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-content: center;
        align-items: flex-start;
    }
}

.project-index-container article .project-content, .blog-index-container article .post-content {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.2rem;
    letter-spacing: .5px;
    border: 1px var(--pheonic-blue) solid;
    border-bottom-left-radius: .3rem;
    border-bottom-right-radius: .3rem;
    padding: .5rem;
}

section .latest-posts .paragraphs article p.read-more-link, .project-index-container article .project-content p.read-more-link, .blog-index-container article .post-content p.read-more-link {
    text-align: right;
    padding: .5rem .5rem .5rem 0;
}

section .latest-posts .paragraphs article p.read-more-link a, .project-index-container article p.read-more-link a, .blog-index-container article .post-content p.read-more-link a {
    color: var(--pheonic-blue);
    text-decoration: none;
}

.project-index-container article .repo-link, .project-container article .repo-link {
    padding-bottom: 1rem;
}

.project-container, .blog-article-container {
    padding: 0 .5rem;
}

.project-container article, .blog-article-container article {
    background: var(--pheonic-parchment);
    border: 1px solid var(--pheonic-blue);
    border-radius: .4rem;
}

.project-container article .project-header, .blog-article-container article .article-header {
    background: var(--pheonic-blue);
    padding: .5rem;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
}

.project-container article .project-header h1, .blog-article-container article .article-header h1 {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
}

.blog-article-container article time {
    color: var(--pheonic-lightgrey);
}

.project-container article .project-content, .blog-article-container article .post-content {
    padding: 0 .5rem .5rem .5rem;
}

.project-container article .project-content h2, .blog-article-container article .post-content h2 {
    font-family: 'Roboto', sans-serif;
    color: var(--charcoal);
    font-size: 1.1rem;
    padding-top: .5rem;
}

.project-container article .project-content h3, .blog-article-container article .post-content h2 {
    font-family: 'Roboto', sans-serif;
    color: var(--charcoal);
    font-size: 1rem;
    padding-top: .5rem;
}

.project-container article .project-content p, .blog-article-container article .post-content p {
    color: var(--charcoal);
    font-family: 'Roboto', sans-serif;
    padding-top: .5rem;
    text-indent: 1.5rem;
}

.project-container article .project-content a, .blog-article-container article .post-content a {
    text-decoration: none;
    color: var(--pheonic-blue);
    font-weight: bold;
    font-style: italic;
}

.project-container article .project-content ul, .project-container article .project-content ol, .project-containter article .project-tags, .blog-article-container article .post-content ul, .blog-article-container article .post-content ol {
    padding: .5rem 1.5em 0 1.5rem;
}

.project-container article .project-tags {
    padding: .5rem 1rem 0 1rem;
    font-family: Roboto, sans-serif;
}

.project-container article .project-tags ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1rem;
    padding-bottom: 1rem;
    padding-top: .5rem;
}

.project-container article .project-tags li:before {
    display: inline-block;
    content: '-';
    width: 1rem;
}

.project-container article .repo-link {
    padding: .5rem;
    text-align: right;
}
.blog-article-container article .post-content .blog-article-table {
    padding: 1rem 0;
}

.blog-article-container article .post-content .blog-article-table table {
    border-collapse: collapse;
    margin: 0 auto;
    /* text-align: left; */
}

@media screen and (min-width: 768px) {
    .blog-article-container article .post-content .blog-article-table table {
        width: 0;
    }
}



.blog-article-container article .post-content .blog-article-table table thead {
    border-bottom: 1px solid var(--charcoal);
    border-top: 1px solid var(--charcoal);
}

.blog-article-container article .post-content .blog-article-table table tbody {
    border-bottom: 1px solid var(--charcoal);
}

.blog-article-container article .post-content .blog-article-table table thead th, .blog-article-container article .post-content .blog-article-table table tbody td {
    padding-left: 1rem;
}

.blog-article-container article .post-content .blog-article-table figcaption {
    font-family: 'Roboto', sans-serif;
    font-size: .9rem;
    font-weight: bold;
    text-align: center;
    padding-top: .3rem;
}

.topical-index-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    border-radius: .3rem;
    border: 1px var(--pheonic-blue) solid;
    max-width: var(--max-content-width);
    color: var(--charcoal);
    background: var(--pheonic-lightgrey);
}

.topical-index-container header {
    color: #fff;
    background: var(--pheonic-blue);
    border-top-left-radius: .4rem;
    border-top-right-radius: .4rem;
}

.topical-index-container header .page-title h1 {
    text-align: center;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
}

.topical-index-container .topic-cards {
    display: flex;
    flex-direction: column;
    border-bottom-left-radius: .3rem;
    align-self: top;
}

@media screen and (min-width: 768px) {
    .topical-index-container .topic-cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-items: last baseline;
    }
}

.topical-index-container .topic-cards article {
    margin: .5rem;
    border: 1px solid var(--pheonic-blue);
    border-radius: .4rem;
    font-family: 'Roboto', sans-serif;
    background: var(--pheonic-parchment);
}

.topical-index-container .topic-cards article h3 {
    color: #fff;
    background: var(--pheonic-blue);
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
    padding: .2rem;
}

.topical-index-container .topic-cards article ul {
    list-style: none;
    padding: .5rem 1.5rem;
}

.topical-index-container .topic-cards article ul li a {
    color: var(--pheonic-blue);
    text-decoration: none;
}

footer {
    color: var(--charcoal);
    background: var(--pheonic-lightgrey);
    text-align: center;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    font-size: .8rem;
    border-top: solid 1px var(--pheonic-blue);
    overflow: auto;
    color: var(--charcoal);
    padding: .5rem 0 1rem;
    flex-shrink: 0;
    justify-self: flex-end;
    margin: auto;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .footer {
        border-radius: .4rem;
    }
}


.center-div {
    display: flex;
    justify-content: center;
}

center-text {
    text-align: center;
}

.center-image {
    text-align: center;
}

.center-image img {
    display: block;
    width: 50%;
    height: auto;
    margin: 1rem auto;
    border-radius: 7px;
}

@media screen and (min-width: 768px) {
    .center-image img {
        width: 25%;
    }
}

.page-nav {
    font-family: 'Roboto', sans-serif;
    margin-bottom: .5rem;
}

.page-nav ul li {
    display: inline;
}

.page-nav ul li a {
    text-decoration: none;
    font-weight: bold;
    color: var(--pheonic-white);
    background: var(--pheonic-blue);
    padding: .3rem;
    border: 1px solid var(--pheonic-blue);
    border-radius: .5rem;
}

.image-container {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
}

.image-container img {
    display: block;
    max-width: 90%;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .image-container img {
        max-width: 40%;
    }
}

.image-container figcaption {
    text-align: center;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    font-size: .9rem;
    padding-top: .5rem;
}

.aria-current {
    background-color: var(--pheonic-blue);
}