@font-face {
    font-family: "DejaVu Sans Mono";
    src: url('/assets/fonts/DejaVuSansMono/DejaVuSansMono.ttf');
}

@font-face {
    font-family: "DejaVu Sans Mono";
    src: url('/assets/fonts/DejaVuSansMono/DejaVuSansMono-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: "DejaVu Sans Mono";
    src: url('/assets/fonts/DejaVuSansMono/DejaVuSansMono-Oblique.ttf');
    font-style: italic;
}

@font-face {
    font-family: "DejaVu Sans Mono";
    src: url('/assets/fonts/DejaVuSansMono/DejaVuSansMono-BoldOblique.ttf');
    font-weight: bold;
    font-style: italic;
}

:root {
    --col-accent:      hsl(240, 75%, 75%);
    --col-shade-white: hsl(240, 50%, 90%);
    --col-shade-mid:   hsl(240, 20%, 25%);
    --col-shade-black: hsl(240, 20%, 10%);

    --dim-navbar-width: 256px;
    --dim-content-width: min(100vw, 1200px);
    --rad-small: 4px;
}

html {
    width: 100%;
}

body {
    margin: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--col-shade-black);
    color: var(--col-shade-white);
    font-weight: 400;
    font-style: normal;
    display: grid;
    grid-template: 1fr min-content / 1fr var(--dim-navbar-width) calc(var(--dim-content-width) - var(--dim-navbar-width)) 1fr;
}

* {
    font-family: "DejaVu Sans Mono", monospace;
}

hr {
    margin: 16px 0px 16px 0px;
    width: 100%;
    height: 1px;
    border: none;
    background-color: var(--col-shade-mid);
}

a, a:visited {
    text-decoration: none;
    color: var(--col-accent);
    transition: 0.125s;
}

a::before {
    content: '[';
}

a::after {
    content: ']';
}

a:hover {
    background-color: var(--col-accent);
    color: var(--col-shade-black);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--col-accent);
}

h3, h4, h5, h6 {
    margin-top: 16px;
    margin-bottom: 16px;
}

h1 {
    font-size: 32px;
}

h1 a {
    font-weight: normal;
}

p, a, pre {
    font-size: 16px;
}

p {
    margin-bottom: 2rem;
    line-height: 1.5;
}

.highlight {
    border: 1px solid var(--col-shade-mid);
    border-radius: var(--rad-small);
    overflow: scroll;
}

p code {
    padding: 0.125rem 0.25rem 0.125rem 0.25rem;
    font-size: 14px;
    background-color: var(--col-shade-mid);
    border-radius: var(--rad-small);
}

pre {
    margin: 0rem;
}

header {
    padding-top: 32px;
    grid-row: 1 / span 2;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header h1 {
    margin: 1rem 0px 0px 0px;
    font-size: 24px;
}

header nav {
    width: 100%;
}

header nav ul {
    margin: 0px;
    padding: 0px;
    text-align: center;
}

header nav li {
    width: 100%;
    list-style: none;
}

header nav a {
    margin: 0px;
    padding: 0.5rem 0px 0.5rem 0px;
    width: 100%;
    text-decoration: none;
    color: var(--col-shade-white) !important;
    display: inline-block;
}

header nav a:hover {
    background-color: transparent !important;
    color: var(--col-accent) !important;
}

main {
    margin: 2rem 2rem 0px 0rem;
    padding: 1rem 2rem 2rem 2rem;
    grid-row: 1;
    grid-column: 3;
    border: 1px solid var(--col-shade-mid);
    border-radius: var(--rad-small) var(--rad-small) 0px 0px;
}

main h1 {
    margin: 0.5rem 0px 2rem 0px;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--col-shade-mid);
}

time, .timelike {
    font-size: 1rem;
    opacity: 0.5;
    color: var(--col-accent);
}

a {
    border-radius: calc(var(--rad-small) / 2);
}

main h1::before {
    content: '# ';
    opacity: 0.5;
}

main h2::before {
    content: '## ';
    opacity: 0.5;
}

main ul {
    padding-left: 2rem;
}

main ul > * {
    padding-left: 0.5rem;
}

main li::marker {
    content: '—';
    color: var(--col-shade-mid);
}

main img {
    max-width: 100%;
    border: 1px solid var(--col-shade-mid);
    border-radius: var(--rad-small);
}

footer {
    margin: 0px 2rem 2rem 0px;
    padding: 1rem 2rem 1rem 2rem;
    grid-row: 2;
    grid-column: 3;
    color: var(--col-accent);
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: var(--col-shade-mid);
    border-radius: 0px 0px var(--rad-small) var(--rad-small);
}

footer i {
    opacity: 0.5;
}

footer * {
    margin: 0px 0px 0.125rem 0px;
    font-size: 14px;
}

.profile {
    width: 128px;
    aspect-ratio: 1.0;
    border: 2px solid var(--col-shade-mid);
    border-radius: 100%;
    background-color: var(--col-shade-dark);
}

.profile-handle {
    margin: 0.5rem 0px 2rem 0px;
    line-height: normal;
    color: var(--col-accent) !important;
    opacity: 0.5;
}

.profile-handle:hover {
    opacity: 1.0;
    background-color: transparent !important;
}

.profile-handle::before,
.profile-handle::after {
    content: none;
}