:root {
    --base: #191724;
    --surface: #1f1d2e;
    --overlay: #26233a;
    --selection: #c4a7e7;
    --text-main: #e0def4;
    --text-bright: #fff;
    --text-muted: #6e6a86;
    --links: #f6c177;
    --accent: #eb6f92;
    --focus: #009ccfd8;
    --border: #31748f;
    --code: #ffbe85;
    --animation-duration: 0.1s;
    --button-base: #21202e;
    --button-hover: #524f67;
    --form-placeholder: #908caa;
    --form-text: #fff;
    --variable: #d941e2;
    --highlight: #eb6f92;
    --chat-border: #31748f;
    --chat-text: #000;
    --chat-background: #fff;
    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E")
}

* {
    box-sizing: border-box;
}

body {
    font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;
    line-height: 1.4;
    max-width: 800px;
    margin: 20px auto;
    margin-top: 5px;
    padding: 0 10px;
    word-wrap: break-word;
    color: var(--text-main);
    background: var(--base);
    text-rendering: optimizeLegibility
}

button,input,textarea {
    transition: background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease;
    transition: background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,box-shadow var(--animation-duration) linear,transform var(--animation-duration) ease
}

h1 {
    font-size: 1.6em;
    overflow: hidden
}

h1,h2,h3,h4,h5,h6,strong {
    color: var(--text-bright)
}

b,h1,h2,h3,h4,h5,h6,strong,th {
    font-weight: 600
}

q::after,q::before {
    content: none
}

blockquote,q {
    border-left: 4px solid var(--focus);
    margin: 1.5em 0;
    padding: .5em 1em;
}

blockquote>footer {
    font-style: normal;
    border: 0
}

address,blockquote cite {
    font-style: normal
}

a>code,a>strong {
    color: inherit
}

::-moz-placeholder {
    color: #a9a9a9;
    color: var(--form-placeholder)
}

:-ms-input-placeholder {
    color: #a9a9a9;
    color: var(--form-placeholder)
}

::-ms-input-placeholder {
    color: #a9a9a9;
    color: var(--form-placeholder)
}

::placeholder {
    color: #a9a9a9;
    color: var(--form-placeholder)
}

a {
    text-decoration: none;
    color: var(--links)
}

a:hover {
    text-decoration: underline
}

code,kbd,samp,time {
    background: #161f27;
    background: var(--overlay)
}

code,samp,time {
    color: #ffbe85;
    color: var(--code);
    padding: 2.5px 5px;
    font-size: 1em
}

pre>code {
    padding: 10px;
    display: block;
    overflow-x: auto
}

var {
    color: #d941e2;
    color: var(--variable);
    font-style: normal;
    font-family: monospace
}

kbd {
    border: 1px solid #526980;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: #dbdbdb;
    color: var(--text-main);
    padding: 2px 4px
}

img,video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 3em auto
}

hr {
    border: 0
}

table {
    border-collapse: collapse
}

table caption,td,th {
    text-align: left
}

td,th {
    padding: 6px;
    vertical-align: top;
    word-wrap: break-word
}

thead {
    border-bottom: 1px solid #526980;
    border-bottom: 1px solid var(--border)
}

hr,tfoot {
    border-top: 1px solid #526980;
    border-top: 1px solid var(--border)
}

tbody tr:nth-child(even) {
    background-color: #161f27;
    background-color: var(--overlay)
}

tbody tr:nth-child(even) button {
    background-color: #1a242f;
    background-color: var(--surface)
}

tbody tr:nth-child(even) button:hover {
    background-color: #202b38;
    background-color: var(--base)
}

::-moz-selection {
    background-color: #1c76c5;
    background-color: var(--selection);
    color: #fff;
    color: var(--text-bright)
}

::selection {
    background-color: #1c76c5;
    background-color: var(--selection);
    color: #fff;
    color: var(--text-bright)
}

details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #1a242f;
    background-color: var(--surface);
    padding: 10px 10px 0;
    margin: 1em 0;
    border-radius: 6px;
    overflow: hidden
}

details[open] {
    padding: 10px
}

details>:last-child {
    margin-bottom: 0
}

details[open] summary {
    margin-bottom: 10px
}

summary {
    display: list-item;
    background-color: #161f27;
    background-color: var(--overlay);
    padding: 10px;
    margin: -10px -10px 0;
    cursor: pointer;
    outline: 0
}

summary:focus,summary:hover {
    text-decoration: underline
}

details>:not(summary) {
    margin-top: 0
}

summary::-webkit-details-marker {
    color: #dbdbdb;
    color: var(--text-main)
}

dialog {
    background-color: #1a242f;
    background-color: var(--surface);
    color: #dbdbdb;
    color: var(--text-main);
    border: 0;
    border-radius: 6px;
    border-color: #526980;
    border-color: var(--border);
    padding: 10px 30px
}

dialog>header:first-child {
    background-color: #161f27;
    background-color: var(--overlay);
    border-radius: 6px 6px 0 0;
    margin: -10px -30px 10px;
    padding: 10px;
    text-align: center
}

dialog::-webkit-backdrop {
    background: #0000009c;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

dialog::backdrop {
    background: #0000009c;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

footer {
    text-align: right;
    border-top: 1px solid #526980;
    border-top: 1px solid var(--accent);
    padding-top: 10px;
    color: #a9b1ba;
    color: var(--text-muted)
}

body>footer {
    margin-top: 40px
}

@media print {
    body,button,code,details,input,pre,summary,textarea {
        background-color: #fff
    }

    button,input,textarea {
        border: 1px solid #000
    }

    body,button,code,footer,h1,h2,h3,h4,h5,h6,input,pre,strong,summary,textarea {
        color: #000
    }

    summary::marker {
        color: #000
    }

    summary::-webkit-details-marker {
        color: #000
    }

    tbody tr:nth-child(even) {
        background-color: #f2f2f2
    }

    a {
        color: #00f;
        text-decoration: underline
    }
}

.border {
    border-top: 2px dashed;
    color: var(--code);
    margin: 5px 0 8px
}

header {
    font-size: 1.2em;
}

h1.post-title:after,h1.title:after {
    content: "";
    display: inline-block;
    height: 100%;
    margin-right: -100%;
    width: 100%
}

h1.title:after {
    border-bottom: 6px ridge var(--accent)
}

h1.post-title:after {
    border-bottom: 6px ridge var(--accent)
}

a.bibtex-available,a.pdf-available,a.source-available {
    background-color: var(--base);
    color: var(--text-bright)!important;
    float: right;
    margin: 2px;
    padding-top: 4px;
    transition: .3s
}

a.bibtex-available>img,a.pdf-available>img,a.source-available>img {
    width: 24px
}

a.bibtex-available:hover,a.pdf-available:hover,a.source-available:hover {
    background-color: var(--focus)
}

div.publeft {
    display: flex
}

div.publication {
    display: flex;
    flex-direction: row
}

div.publication>div>a>img {
    display: initial;
    margin: 0
}

div.publeft {
    flex-direction: column;
    flex: auto
}

div.extra {
    width: 100px
}

pre {
    overflow: auto
}

pre table td {
    padding: 0
}

pre table td:nth-of-type(1) {
    text-align: left;
    user-select: none
}

pre mark {
    background-color: var(--base)!important;
    color: var(--text-main);
    display: block!important
}

pre table {
    border-collapse: collapse;
    width: 100%
}

span.meauthor {
    text-shadow: 0 0 4px #eee9e6
}

.aside {
    position: relative;
    padding: 24px 32px;
    margin: 3em;
    border-left: 3px solid var(--focus);
    border-radius: 6px 6px 6px 3px;
    transition: background 350ms ease 0s;
    background: var(--surface)
}

.icon-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(calc(-50% + 2.5px),calc(-50% + 5.5px));
    padding: 4px;
    border-radius: 100%;
    background: var(--base)
}

.headshot {
    float: right;
    width: 22%;
    min-width: 150px;
    text-align: left;
    border: 1px solid var(--code);
    border-radius: 12%;
    margin: 0 15px 5px 15px;
}

div.published {
    display: inline;
    margin: 0;
}

div.last-updated {
    display: inline;
    margin: 0;
}

div.blog-page-dates {
    color: var(--text-muted);
    text-align: right;
}

div.blog-section-date {
    display: inline;
}

div.blog-section-year {
    text-align: right;
    font-size: 1.4em;
}

.top-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 1em;
}

.menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu > li {
    margin: 0 1rem;
    overflow: hidden;
}

.menu-button-container {
    display: none;
    height: 100%;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#menu-toggle {
    display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
    display: block;
    background-color: var(--accent);
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
}

.menu-button::before {
    content: '';
    margin-top: -8px;
}

.menu-button::after {
    content: '';
    margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
}

@media (max-width: 700px) {
    .menu-button-container {
        display: flex;
    }

    .menu {
        position: absolute;
        top: 0;
        margin-top: 50px;
        left: 0;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    #menu-toggle ~ .menu li {
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #menu-toggle:checked ~ .menu li {
        border-bottom: 2px solid #403d52;
        height: 6em;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        align-items: center;
    }

    .menu > li {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0.5em 0;
        width: 100%;
        background-color: var(--overlay);
    }
}

/* Taken from */
/* https://codepen.io/Founts/pen/AJyVOr */
/* chat rules */

.chatbox {
    padding: 5% 5%;
}

.talk-bubble {
    margin: 28px;
    display: inline-block;
    position: relative;
    width: auto;
    height: auto;
    background-color: var(--chat-background);
}

.sent {
    margin-left: 8em;
    float: right;
}

.received {
    margin-right: 8em;
}

.talk-bubble.border{
    border: 2px solid var(--chat-border);
}

.round{
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
}

.tri-right.border.left-top:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -40px;
    right: auto;
    top: -8px;
    bottom: auto;
    border: 32px solid;
    border-color: var(--chat-border) transparent transparent transparent;
}
.tri-right.left-top:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    right: auto;
    top: 0px;
    bottom: auto;
    border: 22px solid;
    border-color: var(--text-bright) transparent transparent transparent;
}

/* Right triangle, left side slightly down */
.tri-right.border.left-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -40px;
    right: auto;
    top: 30px;
    bottom: auto;
    border: 20px solid;
    border-color: var(--chat-border) var(--chat-border) transparent transparent;
}
.tri-right.left-in:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    right: auto;
    top: 38px;
    bottom: auto;
    border: 12px solid;
    border-color: var(--text-bright) var(--text-bright) transparent transparent;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -8px;
    right: auto;
    top: auto;
    bottom: -40px;
    border: 32px solid;
    border-color: transparent transparent transparent var(--chat-border);
}
.tri-right.btm-left:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    right: auto;
    top: auto;
    bottom: -20px;
    border: 22px solid;
    border-color: transparent transparent transparent var(--text-bright);
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left-in::before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 36px;
    right: auto;
    top: auto;
    bottom: -26px;
    border: 13px solid;
    border-color: var(--chat-border) transparent transparent var(--chat-border);
}
.tri-right.btm-left-in:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 38.5px;
    right: auto;
    top: auto;
    bottom: -20px;
    border: 12.5px solid;
    border-color: var(--text-bright) transparent transparent var(--text-bright);
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: 35px;
    bottom: -26px;
    border: 13px solid;
    border-color: var(--chat-border) var(--chat-border) transparent transparent;
}
.tri-right.btm-right-in:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: 37.5px;
    bottom: -20px;
    border: 12.5px solid;
    border-color: var(--text-bright) var(--text-bright) transparent transparent;
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -8px;
    bottom: -40px;
    border: 20px solid;
    border-color: var(--chat-border) var(--chat-border) transparent transparent;
}
.tri-right.btm-right:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: 0px;
    bottom: -20px;
    border: 12px solid;
    border-color: var(--text-bright) var(--text-bright) transparent transparent;
}

/* Right triangle, right side slightly down*/
.tri-right.border.right-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -40px;
    top: 30px;
    bottom: auto;
    border: 20px solid;
    border-color: var(--chat-border) transparent transparent var(--chat-border);
}
.tri-right.right-in:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -20px;
    top: 38px;
    bottom: auto;
    border: 12px solid;
    border-color: var(--text-bright) transparent transparent var(--text-bright);
}

/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -40px;
    top: -8px;
    bottom: auto;
    border: 32px solid;
    border-color: var(--chat-border) transparent transparent transparent;
}
.tri-right.right-top:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -20px;
    top: 0px;
    bottom: auto;
    border: 20px solid;
    border-color: var(--text-bright) transparent transparent transparent;
}

.talktext{
    padding: 1em;
    text-align: left;
    line-height: 1.5em;
    color: var(--chat-text);
}
.talktext p{
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
}

div.right {
    text-align: right;
}

div.right > a > img {
    display: inline;
    margin: auto;
}