@font-face {
    font-family: 'Bevan';
    src: url('fonts/bevan-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-regular.ttf') format('truetype');
}

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
    padding: 0px;
    margin: 0px;
    font-family: 'Montserrat';

    --header-title-color: #ffe839;

    --nav-link-color: #e6e6ed;
    --nav-hover-color: #f6f6fd;
    
    --body-background: #16161d;
    --menu-background: rgba(22,22,29, 0.8); /*#16161d;*/

    --main-color: #16161d;
    --main-background: #16161d;

    --article-background: #e3e8e9; /*rgba(250,255,255, 0.9);*/
    
    --title-color: #16161d;
    --link-color: blue;
    --hover-color: blue;

    --tags-color: rgb(68,68,68);

    --contact-background: rgba(22,22,29, 0.8);
    --contact-color: #e6e6ed;
}

body {
    background: var(--body-background);
    font-size: 2.4vmin;
    color: var(--main-color);
    margin: 0px;
    padding: 0px;
}

header {
    position: sticky;
    display: block;
    background: var(--menu-background);
    /* filter: blur(5px); */
    top: 0px;
    left: 0px;
    right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 2.5em;
    margin-bottom: 2.5em;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0.425em;
    padding-bottom: 0.575em;
    text-align: center;
    vertical-align: middle;
    z-index: 1000;
}

header h1 {
    color: var(--header-title-color);
    font-size: 1.6em;
    font-family: 'Bevan';
}

nav {
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

nav a {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

nav a, nav a:visited {
    color: var(--nav-link-color);
    text-decoration: none;
}

nav a:hover, nav a:active {
    color: var(--nav-hover-color);
    text-decoration: underline;
}

article {
    display: block;
    background: var(--article-background);
    left: 0px;
    right: 0px;
    z-index: 200;

    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100vh;
}

article:last-child {
    min-height: 96vh;
}

article div {
    padding: 2em;
}

article h1:first-child {
    margin-top: 0px;
}

a.anchor {
    content: '';
    display: block;
    position: relative;
    height: calc(3.75em);
    margin-top: calc(-3.75em);
    visibility: hidden;
}

a.anchor:first-child {
    content: '';
    display: block;
    position: relative;
    height: calc(4.25em);
    margin-top: calc(-4.25em);
    visibility: hidden;   
}

main {
    padding-top: 1em;
    display: block;
    background: var(--article-background);
    z-index: 100;
}

main a, main a:visited {
    color: var(--link-color);
    text-decoration: none;
}

main a:hover, main a:active {
    color: var(--hover-color);
    text-decoration: underline;
}

main h1 {
    color: var(--title-color);
    font-size: 1.6em;
    margin-top: 1.25em;
    padding-bottom: 0.75em;
}

main h2 {
    color: var(--title-color);
    font-size: 1.4em;
    padding-top: 1.25em;
    padding-bottom: 0.75em;
}

main h3 {
    color: var(--title-color);
    font-size: 1.2em;
    padding-top: 1.25em;
    padding-bottom: 0.75em;
}

main h4 {
    color: var(--title-color);
    font-size: 1.1em;
    padding-top: 1.25em;
    padding-bottom: 0.75em;
}

main h5, main h6 {
    color: var(--title-color);
    font-size: 1.0em;
    padding-top: 1.25em;
    padding-bottom: 0.75em;
}

main dl di {
    font-weight: bold;
    font-style: italic;
}
main dl dd {
    padding: 0.75em;
}

main ul {
    margin-left: 2em;
}

main ul li {
}

main span.role, main span.project {
    display: block;
    font-weight: bold;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

main a.tag, main a.tag:hover, main a.tag:active, main a.tag:visited {
    color: var(--tags-color);
}

main span.tags {
    font-size: 0.8em;
    font-style: italic;
    color: var(--tags-color);
    display: block;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

main .nontag {
    font-style: normal;
    color: var(--main-color);
}

main span.inline-tags {
    font-size: 1.0em;
    font-style: italic;
    color: var(--tags-color);
    display:inline-block;
    padding: 0px;
}

main span.tag {
    font-size: 1.0em;
    font-style: italic;
}

main img {
    background: var(--main-background);
    width: 160px;
    height: auto;
    /* max-width: 160px;*/
    max-height: 100px;
    border-radius: 0.2em;
    border: 2px solid rgba(213,217,218,1);
}

main span.portrait {
    display: inline-block;
    width: 100%;
}

main img.portrait {
    display: block;
    background: transparent;
    width: auto;
    height: auto;
    max-height: 16vh;
    border-radius: 2px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 6vw;
    margin-left: 6vw;
    float: right;
}

main p {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

main a:hover img {
    border: 2px solid blue;
}

main a.fullimage {
    display: none;
    position: fixed;
    z-index: 900;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: rgba(22,22,29, 0.8);
    text-align: center;
    vertical-align: middle;
    padding-top: 6.75em;
    padding-bottom: 2.0em;
}

main a.fullimage:target {
    outline: none;
    display: block;
}

main a.fullimage img {
    height: auto;
    width: auto;
    max-width: calc(100% - 2em);
    max-height: calc(100% - 2em);
    display: inline-block;
    border: 0.1em solid rgba(53,54,59, 1.0);
}

footer {
    display: block;
}

footer div {
    display: block;
    width: 50%;
    background: var(--contact-background);
    color: var(--contact-color);
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 2em;
    padding-right: 2em;
}

footer div:first-child {
    text-align: left;
    float: left;
}

footer div:last-child {
    padding-top: 1.5em;
    text-align: right;
    float: right;
}

footer h2 {
    padding-top: 0px;
    color: var(--contact-color);
}