:root {
    --bg-color: white;
    --fg-color: black;
    --link-color: black;
    --selection-bg-color: var(--link-color);
    --selection-fg-color: var(--bg-color);
    --notice-bg-color: var(--bg-color);
    --main-border-thickness: 1px;
}

html {
    background-color: var(--bg-color);
    color: var(--fg-color);
    font-family: monospace;
    font-size: 1.25em;
}

body {
    min-height: 100vh;
    max-width: 900px;
    padding-left: 2%;
    padding-right: 2%;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    text-rendering: optimizeSpeed;
}

header {
    text-align: center;
    font-weight: bold;
}

main {
    flex-grow: 1;
}

footer {
    margin-top: 8%;
    margin-bottom: 2%;
    text-align: center;
}

header, main, footer {
    flex-shrink: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
}

h1 a, h2 a, h3 a {
    color: var(--fg-color);
    text-decoration: none;
}

ul li {
    margin-bottom: 4px;
}

a {
    font-weight: bold;
    color: var(--fg-color);
    text-decoration: solid 2px underline;
    text-decoration-color: var(--link-color);
}

a:hover:not(.post-section-title a, #post-title a) {
    background-color: var(--link-color);
    color: var(--bg-color);
    text-decoration: none;
}

nav a {
    background-color: var(--fg-color);
    color: var(--bg-color);
    text-decoration: none;
    padding: 3px;
    border: 1px solid;
}

.post-section-title a {
    text-decoration: none;
}

img, video {
    max-width: 100%;
    height: auto;
}

.centered {
    margin: 0 auto;
    display: block;
}

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

.full-width {
    width: 100%;
}

.bordered, .notice, .tag, hr {
    border: var(--main-border-thickness) solid var(--fg-color);
}

figure {
    margin:0;
}

figure img {
    margin-bottom: 0;
}

figcaption {
    text-align: center;
    color: var(--fg-color);
    font-variant: all-small-caps;
    margin-bottom: 2%;
}

hr {
    color: var(--fg-color);
}

::selection {
    background-color: var(--selection-bg-color);
    color: var(--selection-fg-color);
}

.image-caption {
    display:block;
    text-align:center;
    font-size: 0.70em;
    font-style:italic
}

#page-title {
    text-align: center;
    text-decoration: none;
}

#post-title {
    margin-top: 2%;
}

#post-summary {
    margin-top: 2%;
}

.post-section-title:before {
    content: '#';
    color: var(--link-color);
    text-decoration: none;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    visibility: hidden;
}

.post-section-title:hover:before {
    visibility: visible;
}

.notice {
    background-color: var(--notice-bg-color);
    padding: 0.5%;
    font-size: smaller;
    display: inline-block;
    border: 1px solid var(--fg-color);
}

#smiley {
    margin-bottom: 1%;
}

#license {
    font-size: 0.8em
}

/*
    Portfolio Styles
*/

#portfolio-project-list {
    list-style-type: none;
}

.portfolio-title {
    text-align: center;
    text-decoration: none;
}

.proj-picture img {
    height: 200px;
    width: 200px;
    border-radius: 9999px;
}

.proj-title {
    font-size: 1.5em;
    font-weight: bolder;
}

.proj-section {
    text-align: center;
    margin: 2%;
}

.proj-section.first {
    margin-top: 10%;
    margin-bottom: 2%;
}

.proj-section.last {
    margin-bottom: 2%;
}

.proj-card {
    --item-margin: 2%;
    --items-per-row: 2;
}

@media (min-width: 768px) {
    #project-wrapper {
        display: flex;
        flex-wrap: wrap;
    }

    .proj-card {
        margin-right: var(--item-margin);
        margin-top: var(--item-margin);
        width: calc(calc(100% / var(--items-per-row)) - var(--item-margin));
    }
}

/*
    Tag styles
*/

.tag {
    color: var(--bg-color);
    padding: 2px;
    background-color: var(--fg-color);
    font-size: smaller;
}