@font-face {
    font-family: "SF Pro Text";
    src: url("/font/SF-Pro-Text-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "SF Pro Text";
    src: url("/font/SF-Pro-Text-RegularItalic.otf") format("opentype");
    font-style: italic;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "SF Pro Text";
    src: url("/font/SF-Pro-Text-Bold.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "SF Pro Text";
    src: url("/font/SF-Pro-Text-BoldItalic.otf") format("opentype");
    font-style: italic;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "SF Mono";
    src: url("/font/SF-Mono-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "SF Mono";
    src: url("/font/SF-Mono-RegularItalic.otf") format("opentype");
    font-style: italic;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "SF Mono";
    src: url("/font/SF-Mono-Bold.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "SF Mono";
    src: url("/font/SF-Mono-BoldItalic.otf") format("opentype");
    font-style: italic;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}
:root {
    --content-width: min(50rem, calc(100vw - 4.6rem));
    --animation: cubic-bezier(0, 1, 1, 1);
}

html {
    font-family: "SF Pro Text";
    background-color: #111111;
    color: white;
}

h1 {
    font-size: 5rem;
    /* line-height: 3rem; */
    margin: 0 0 0.5rem 0;
}

p {
    font-size: 1rem;
}

time {
    color: #8e8e8e;
}

a {
    color: #5070ff;
}

.post {
    display: grid;
    grid-template-columns: 1fr var(--content-width) 1fr;
}

.post-content {
    grid-row: 2;
    grid-column: 2;
}

body {
    margin: 0;
}

main {
    display: flex;
    margin: 0;
    flex-direction: column;
    min-height: calc(100vh);
    color: #f0f0f0;
    -webkit-text-size-adjust: 100%;
    visibility: hidden;
}

footer {
    text-align: center;
    color: #505050;
    width: 100%;
    margin-top: auto;
}

.post-content img,
.post-content video {
    border-radius: 0.5rem;
    display: block;
    margin: auto;
    max-width: 100%;
}

.post-head {
    align-items: end;
    grid-row: 1;
    grid-column: 2;
}

.material-icons.md-custom {
    font-size: 6rem;
}

.back-button-wrapper {
    grid-row: 1;
    grid-column: 1;
    margin-left: auto;
    margin-top: auto;
}

.back-button {
    color: #3e3e3e;
    text-decoration: none;
    transition: all 200ms var(--animation);
}

.back-button-wrapper:hover .back-button {
    color: white;
}

pre {
    border-radius: 0.5rem;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

pre::-webkit-scrollbar {
    display: none;
}

code {
    color: #a0a0a0;
    font-size: 1rem;
    font-weight: bold;
}

pre code {
    color: #f0f0f0;
    margin: 1rem;
    font-size: 0.8rem;
    font-weight: normal;
}

.line {
    margin: 0 1rem 0 1rem;
}

.splash {
    align-self: center;
    margin: auto;
    grid-row: 2;
}

.logo {
    width: 10rem;
    display: block;
    margin: auto;
}

.icon {
    height: 0.5rem;
    display: inline;
    margin: auto;
}

.menu.inline {
    display: flex;
    flex-direction: horizontal;
    justify-content: space-between;
}

.menu .external,
.menu .internal {
    padding: 1rem;
    display: flex;
    cursor: pointer;
}

.external {
    justify-content: center;
}

.menu-item a {
    text-decoration: none;
    transition: all 200ms var(--animation);
    margin: 0;
    font-family: "SF Mono";
}

.menu-item .inactive {
    color: #505050;
}

.menu-item-aux.active {
    opacity: 1;
}

.menu-item-aux {
    margin: 0;
    display: inline;
    color: #505050;
    opacity: 0;
    font-family: "SF Mono";
}

.menu-item:hover a.inactive {
    color: white;
}

.menu-item:hover .menu-item-aux {
    opacity: 1;
    color: #505050;
}

header {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #111111d0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
}

.post-neck {
    display: flex;
    flex-direction: row;
}

.tag {
    display: flex;
    flex-direction: row;
    color: #505050;
    margin: 0 0.2rem;
    text-decoration: none;
}

.tag p {
    margin: auto;
    transition: all 200ms var(--animation);
}

.tag:hover p {
    background-color: white;
    color: #111111;
}

.post-neck {
    align-items: center;
}

.post-neck time {
    margin: auto 0;
    margin-right: 1rem;
}

.post-listing {
    margin-bottom: 1rem;
}

.post-listing-head {
    display: flex;
    flex-direction: row;
    align-items: end;
    margin: 0 0 1rem 0;
}

.post-listing-head h2 {
    margin-bottom: 0;
}

.post-listing-head a {
    margin: auto 1rem 0.1rem 0;
    text-decoration: none;
}

.post-listing-head .tag {
    margin: 0.25rem 0.25rem 0.1rem 0;
    text-decoration: none;
}

.post-name {
    color: #e0e0e0;
    text-decoration: none;
    margin: auto 0;
    margin-right: 1rem;
    transition: all 200ms var(--animation);
}

.menu-item a.active {
    color: white;
}

.menu-item:hover a.inactive.projects,
.menu-item a.active.projects,
.post-listing:hover .post-name.projects {
    color: #6060ff;
}

.menu-item:hover a.inactive.blog,
.menu-item a.active.blog,
.post-listing:hover .post-name.blog {
    color: #a0ffa0;
}

.menu-item a.inactive.unlisted,
.menu-item a.active.unlisted,
.post-listing:hover .post-name.unlisted {
    color: #ff4040;
}

.summary {
    color: #808080;
    text-decoration: none;
    transition: all 200ms var(--animation);
}

.post-listing:hover .summary {
    color: #d0d0d0;
}

.github {
    margin-left: auto;
    padding-left: 0.5rem;
    height: 2rem;
}

.mermaid {
    margin: auto;
    text-align: center;
}

.gallery {
    display: flex;
    overflow: auto;
    border-radius: 0.5rem;
    margin-top: 1rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.gallery::-webkit-scrollbar {
    display: none;
}

.post-content video,
.post-content img {
    max-height: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
}

.gallery img {
    margin-left: 0;
    margin-right: 1rem;
    margin-top: 0;
    height: calc(var(--content-width) / 2);
}

.featured {
    color: #ffd740;
    text-shadow: #ffd74080 0 0 1rem;
    transition: all 200ms var(--animation);
}

.post-listing:hover .featured {
    text-shadow: #ffd74080 0 0 0;
}

.under-construction {
    margin: auto;
    color: red;
    font-family: "SF Mono";
}

blockquote p {
    font-style: italic;
    color: #808080;
}

.four-o-four {
    margin: auto;
    color: red;
    font-family: "SF Mono";
    text-align: center;
}

.tags {
    display: flex;
    flex-wrap: wrap;
}

.invalid,
.unsafe {
    color: #ff4040;
    text-shadow: #ff4040 0 0 5rem;
}
.safe {
    color: #40ff40;
    text-shadow: #40ff40 0 0 5rem;
}

.DENY,
.error {
    color: #ff4040;
}

.warning {
    color: #ffe040;
}

.OK {
    color: #40ff40;
}

@media only screen and (max-width: 70rem) {
    h1 {
        font-size: 2rem;
    }

    .back-button-wrapper {
        display: none;
    }

    .post-listing-head {
        flex-direction: column;
        align-items: start;
        margin-bottom: 0.5rem;
    }
}

@media only screen and (max-width: 40rem) {
    header {
        position: relative;
    }

    .menu {
        flex-direction: column;
        padding: 1rem;
    }

    .menu .external,
    .menu .internal {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
    }
}
/* Fixes iOS font sizing anomaly */
code {
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* Background */
.bg {
    background-color: #1e1e1e;
}
/* PreWrapper */
.chroma {
    background-color: #1e1e1e;
}
/* Other */
.chroma .x {
}
/* Error */
.chroma .err {
}
/* CodeLine */
.chroma .cl {
}
/* LineLink */
.chroma .lnlinks {
    outline: none;
    text-decoration: none;
    color: inherit;
}
/* LineTableTD */
.chroma .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0;
}
/* LineTable */
.chroma .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
/* LineHighlight */
.chroma .hl {
    background-color: #d8d8d8;
}
/* LineNumbersTable */
.chroma .lnt {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #7f7f7f;
}
/* LineNumbers */
.chroma .ln {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #7f7f7f;
}
/* Line */
.chroma .line {
    display: flex;
}
/* Keyword */
.chroma .k {
    color: #fb4833ff;
    font-weight: bold;
}
/* KeywordConstant */
.chroma .kc {
    color: #fa9d0e;
    font-weight: bold;
}
/* KeywordDeclaration */
.chroma .kd {
    color: #fb4833ff;
    font-weight: bold;
}
/* KeywordNamespace */
.chroma .kn {
    color: #007020;
    font-weight: bold;
}
/* KeywordPseudo */
.chroma .kp {
    color: #8e8e8eff;
}
/* KeywordReserved */
.chroma .kr {
    color: #007020;
    font-weight: bold;
}
/* KeywordType */
.chroma .kt {
    color: #fabd2eff;
}
/* Name */
.chroma .n {
}
/* NameAttribute */
.chroma .na {
    color: #83a598ff;
}
/* NameBuiltin */
.chroma .nb {
    color: #fabd2eff;
}
/* NameBuiltinPseudo */
.chroma .bp {
}
/* NameClass */
.chroma .nc {
    color: #fabd2eff;
}
/* NameConstant */
.chroma .no {
    color: #fa9d0e;
}
/* NameDecorator */
.chroma .nd {
    color: #555;
    font-weight: bold;
}
/* NameEntity */
.chroma .ni {
    color: #d55537;
    font-weight: bold;
}
/* NameException */
.chroma .ne {
    color: #007020;
}
/* NameFunction */
.chroma .nf {
    color: #fbeb00;
}
/* NameFunctionMagic */
.chroma .fm {
}
/* NameLabel */
.chroma .nl {
    color: #002070;
    font-weight: bold;
}
/* NameNamespace */
.chroma .nn {
}
/* NameOther */
.chroma .nx {
}
/* NameProperty */
.chroma .py {
}
/* NameTag */
.chroma .nt {
    color: #062873;
    font-weight: bold;
}
/* NameVariable */
.chroma .nv {
    color: #83a598ff;
}
/* NameVariableClass */
.chroma .vc {
}
/* NameVariableGlobal */
.chroma .vg {
}
/* NameVariableInstance */
.chroma .vi {
}
/* NameVariableMagic */
.chroma .vm {
}
/* Literal */
.chroma .l {
}
/* LiteralDate */
.chroma .ld {
}
/* LiteralString */
.chroma .s {
    color: #98bb05ff;
}
/* LiteralStringAffix */
.chroma .sa {
    color: #98bb05ff;
}
/* LiteralStringBacktick */
.chroma .sb {
    color: #98bb05ff;
}
/* LiteralStringChar */
.chroma .sc {
    color: #98bb05ff;
}
/* LiteralStringDelimiter */
.chroma .dl {
    color: #98bb05ff;
}
/* LiteralStringDoc */
.chroma .sd {
    color: #808080;
}
/* LiteralStringDouble */
.chroma .s2 {
    color: #98bb05ff;
}
/* LiteralStringEscape */
.chroma .se {
    color: #98bb05ff;
    font-weight: bold;
}
/* LiteralStringHeredoc */
.chroma .sh {
    color: #98bb05ff;
}
/* LiteralStringInterpol */
.chroma .si {
    color: #98bb05ff;
}
/* LiteralStringOther */
.chroma .sx {
    color: #98bb05ff;
}
/* LiteralStringRegex */
.chroma .sr {
    color: #98bb05ff;
}
/* LiteralStringSingle */
.chroma .s1 {
    color: #98bb05ff;
}
/* LiteralStringSymbol */
.chroma .ss {
    color: #98bb05ff;
}
/* LiteralNumber */
.chroma .m {
    color: #d3869bff;
}
/* LiteralNumberBin */
.chroma .mb {
    color: #d3869bff;
}
/* LiteralNumberFloat */
.chroma .mf {
    color: #d3869bff;
}
/* LiteralNumberHex */
.chroma .mh {
    color: #d3869bff;
}
/* LiteralNumberInteger */
.chroma .mi {
    color: #d3869bff;
}
/* LiteralNumberIntegerLong */
.chroma .il {
    color: #d3869bff;
}
/* LiteralNumberOct */
.chroma .mo {
    color: #d3869bff;
}
/* Operator */
.chroma .o {
    color: #8e8e8eff;
}
/* OperatorWord */
.chroma .ow {
    color: #8e8e8eff;
}
/* Punctuation */
.chroma .p {
}
/* Comment */
.chroma .c {
    color: #808080;
}
/* CommentHashbang */
.chroma .ch {
    color: #808080;
}
/* CommentMultiline */
.chroma .cm {
    color: #808080;
}
/* CommentSingle */
.chroma .c1 {
    color: #808080;
}
/* CommentSpecial */
.chroma .cs {
    color: #808080;
}
/* CommentPreproc */
.chroma .cp {
    color: #808080;
}
/* CommentPreprocFile */
.chroma .cpf {
    color: #808080;
}
/* Generic */
.chroma .g {
}
/* GenericDeleted */
.chroma .gd {
    color: #a00000;
}
/* GenericEmph */
.chroma .ge {
    font-style: italic;
}
/* GenericError */
.chroma .gr {
    color: #f00;
}
/* GenericHeading */
.chroma .gh {
    color: #000080;
    font-weight: bold;
}
/* GenericInserted */
.chroma .gi {
    color: #00a000;
}
/* GenericOutput */
.chroma .go {
    color: #888;
}
/* GenericPrompt */
.chroma .gp {
    color: #c65d09;
    font-weight: bold;
}
/* GenericStrong */
.chroma .gs {
    font-weight: bold;
}
/* GenericSubheading */
.chroma .gu {
    color: #800080;
    font-weight: bold;
}
/* GenericTraceback */
.chroma .gt {
    color: #04d;
}
/* GenericUnderline */
.chroma .gl {
    text-decoration: underline;
}
/* TextWhitespace */
.chroma .w {
    color: #bbb;
}