<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>{{ partial "title.txt" . }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="canonical" href="{{ .Permalink }}">
    {{ range .AlternativeOutputFormats -}}
    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
    {{ end -}}
    <link rel="stylesheet" href="{{ .Site.BaseURL }}css/normalize.css">
    <style>
        html {
            background-color: black;
            color: #dfdfdf;
        }

        /* ubuntu-font */
        @font-face {
            font-family: "UbuntuMono";
            src: local('UbuntuMono-B'),
            url("{{ .Site.BaseURL }}fonts/UbuntuMono-Bold.ttf");
            font-weight: bold;
        }

        @font-face {
            font-family: "UbuntuMono";
            src: local('UbuntuMono-RI'),
            url("{{ .Site.BaseURL }}fonts/UbuntuMono-Italic.ttf");
            font-style: italic;
        }

        @font-face {
            font-family: "UbuntuMono";
            src: local('UbuntuMono-R'),
            url("{{ .Site.BaseURL }}fonts/UbuntuMono-Regular.ttf");
        }

        #background {
            position: fixed;
            z-index: -1;
            background-color: rgb(47, 41, 41);
            /*rgb(153, 34, 13);*/
            width: 100%;
            height: 100%;
        }

        @keyframes backgroundFallin {
            00% {
                height: 0%;
            }

            10% {
                height: 0%;
            }

            50% {
                height: 100%;
            }

            65% {
                height: 80%;
            }

            80% {
                height: 100%;
            }

            90% {
                height: 90%;
            }

            100% {
                height: 100%;
            }
        }

        @keyframes headspin {
            0% {
                transform: rotate(-760deg) scale(0, 0);
            }

            100% {
                transform: rotate(0deg) scale(1, 1);
            }
        }

        @keyframes dealfall {
            0% {
                transform: translateY(-2000%)
            }

            1% {
                transform: translateY(-200%)
            }

            100% {
                transform: translateY(0%)
            }
        }

        body {
            font-family: 'UbuntuMono';
            display: flex;
            flex-flow: row;
            text-align: center;
            font-size: 20px;
        }

        body>header {
            width: 100%;
            position: absolute;
            text-align: center;
            align-content: center;
            display: flex;
            flex-flow: row;
        }

        body>header h1 {
            display: flex;
            flex-flow: row;
            margin: 0;
        }

        #main {
            flex: auto;
            min-height: 100vh;
            overflow: hidden;

            display: flex;
            flex-flow: column;
            align-items: center;
        }

        #main>nav,
        #main>main,
        #main>footer {
            padding: 15px;
        }

        #main>main {
            flex: 1;
            margin: auto;
        }

        #main>footer {
            padding-top: 50px;
        }

        @media (prefers-color-scheme: dark) {
            html {
                background-color: black;
                color: #dfdfdf;
            }

            article img:not([src$=".jpg"]):not([src$=".jpeg"]) {
                /* prevent transparent images from showing the black background */
                background-color: white;
                border: 5px solid white;
                box-sizing: border-box;
            }
        }

        /* Article list */
        .article-list {
            max-width: 45em;
            width: 90vw;
        }

        .article-list article {
            margin: 1.2em 0 0 0;
        }

        .article-list article>header {
            display: flex;
            flex-flow: row;
            align-items: center;
            margin-bottom: 0;
        }

        .article-list article time {
            color: grey;
        }

        .article-list article h3 {
            display: inline-block;
            margin: 0.5em;
        }

        .article-list .summary {
            text-align: justify;
            margin: 0 1em;
        }

        .article-list article small {
            font-weight: normal;
            color: gray;
        }

        a,
        a:visited {
            color: inherit;
        }

        article>header {
            text-align: center;
            margin-bottom: 2em;
        }

        article>header time {
            color: gray;
        }

        article {
            max-width: 45em;
            width: 90vw;
            text-align: justify;
        }

        table {
            margin: auto;
            width: 90%;
            background: #221d1d;
        }

        table,
        th,
        td {
            padding: 15px;
            text-align: left;
            border-color: #4c4c4c;
            border-collapse: collapse;
            border: 1px solid black;
        }

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

        article img[src$='#center'] {
            display: block;
            margin: 0.7rem auto;
        }

        article img[src$='#floatleft'] {
            float: left;
            margin: 0.7rem;
        }

        article img[src$='#floatright'] {
            float: right;
            margin: 0.7rem;
        }

        .image-row {
            display: flex;
            justify-content: center;
            gap: 1rem;
            /* space btwn images */
            margin: 1rem 0;
        }

        .image-row img {
            max-width: 100%;
            height: auto;
        }

        article .footnotes {
            font-size: 0.75em;
            clear: inline-end;
        }

        pre {
            background-color: #272822;
            color: #f8f8f2;
            padding: 15px;
            overflow: auto;

            tab-size: 2;
            -moz-tab-size: 2;
        }

        p code,
        li code {
            color: #930d72;
        }

        .centerdiv {
            margin: 0;
            position: absolute;
            display: flex;
            width: 100%;
            height: 90%;
            z-index: -1;
        }

        .logo_anim {
            margin: auto;
            max-height: 60%;
            max-width: 60%;
        }
    </style>
    <link rel="shortcut icon" type="image/x-icon" href="{{ .Site.BaseURL }}\img\favicon.ico" />
</head>

<body>