:root {
    --antique-white: #fff5ee;
    --slate-blue: #2F5779;
    --focus-blue: ##5766FF;
    --yellow: #ffeb78;
    --pink: #ffcbd3;
    --blockstepped: "Blockstepped", sans-serif;
    --handjet:  "Handjet", monospace;
}

@font-face {
    font-family: 'Handjet-Regular';
    src: url("/fonts/handjet/static/Handjet-Regular.ttf") format('truetype');
    font-weight: 400; /* Normal weight */
    font-style: normal; /* Normal style */
    font-display: swap; /* Prevents invisible text during loading */
}
@font-face {
    font-family: 'Blockstepped';
    src: url("/fonts/blockstepped/Blockstepped.ttf") format('truetype');
    font-weight: 400; /* Normal weight */
    font-style: normal; /* Normal style */
    font-display: swap; /* Prevents invisible text during loading */
}
body {
    display: flex;
    flex-flow: column;
    justify-content: center;
    font-family: 'Handjet-Regular';
    max-width: 100%!important;

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Blockstepped';
    }
    span.logo a {
        font-size: 64px;
        font-weight: normal;
        text-decoration: none;
        font-family: 'Blockstepped';
        color: var(--slate-blue);
    }

    nav {
        border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAslJREFUeF7tnNtyhDAMQ5f//2j6WswMZzRSgG3VVyd2fCI73Lrbvu/75+Jv27btyk626d/1R/GmPZ0f+sMBBXrYI+SFAwq0QH8TSAsG/VGPIzv1rLt7proeyk+2yxOgBZA/9VBxx9N64nbXoaoIF5A6381Pni9PqEIPl5EnfqSwaZ89kTZEVdTq8XioDMGo408X7aqDAj3e+BToKAmqQKrYAl0NlHqYW+LUUig+2d3rXjc/+cGHG7BAhyQK9LpGqtCwYP7doUTX3XTKU48u0PGAvUDp2Ac7nQlkP12XUgnQhawa0Mw/Pp3WT/YTH5pAdtoQ6jlxQqYiaT3EY6MBZC/QcS9PwMheoAV6eG2utiQS2Knk6RCiHvM2xRIANR/Mj+6t1R3EgOZraRVAgarEFp/qtJzThlWhhOzaju+UPPffP9ttEfLTpu9HJipO7PkFuvrx3V9XIOV3e8m7ASmhp+1ufnLJuwGfBkbx3fwK9Oke6u4gKeRpu5tfFVqFrtVwFRrmW6AFGiYQdleFFmiYQNhdFVqgYQJhd1VogYYJhN1VoQUaJhB2V4UWaJhA2F0VWqBhAi9z1wfM4Q0p0AINEwi7w0/C3Xjuqfm2+Phx3eqEV/sn4On4BQr/2EUbMu0FejdQ2gH1k/B0iakKovHq+mg8fnBLDtILJn9pu5ofjS9QsQUUKEiaAKktEBVqOxQ/oU6XtOqPAOOpPvLFW081oHqIqQDS49X8ZvyZb4GKP0BQoGZPjZe82lPVkqQFq/5IQeSPWgDNx5IvUO1HvQt0KKYKhRpUrzriQKmn0c/wuD2MelTaTgBVHvHfbSpQ6CEESN3BtMJcf1WoS1A8hFTB4DsldQepx6qHRJjfh/JRLxNP/ijAansaGPmjfAqUCIolXqBvB0qnOq1fbeLkz7WrJU7xMD8cID4wTvujBMleoERItBeoCIyG3w30ByQcoCGL9sPJAAAAAElFTkSuQmCC') 28 /  28px / 0 round;
        border-width:  28px;
        border-style:  solid; 
        background-color: black;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        vertical-align: middle;

        ul {
            display: flex;
            flex-flow: row;
            gap: 20px;

            li {
                list-style: none;
                align-content: end;
                a {
                    font-size: 24px;
                    color: var(--slate-blue);
                    font-weight: normal;
                }
            }
        }
    }

    main {
        padding-top: 2rem;
    }

    div.body-content {
        display: flex;
        flex-flow: row;
        padding: 2rem 0;
        gap: 2rem;
        box-sizing: border-box;

        aside {
            border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABoUlEQVRYR+2Z25KDIAyGy+5tXd//MV32dm0DloKBkHRGA87gHVbLx58DJJobuqZpfuB7mmNrF1OaL7t5OVBqZWepmwvkDGtugYNUVBv0Di4XYVaA/PKaZKCUybWAw/xhvgBeAf2HdXy/LdwKFIOb6Q5RDpoHoO2BB4x/vSX8GKxgl3I0HuWzGCwHfaWjPSgGj+OjwKi0SHEYbiX49wHKWJZV9CwFZaaPsdI5qCCPaqWloCwXK+/NYAYfcftBuLoFpVbW1kcLpg9AQdkWirrdfXkd87KEj5XECmoBi320+aFkhq16XWHrtnHrTk9P3Er63pmSQ0jfoInkAxRFbdkFo89eZwvlgqm7hI/Tk1b+3OfxSnqiEn4bULqy6KZc5lxwgH4ahEPRTxXjni8qCh0G+7f1E4aPcgrKqtDKCV/rEMKD/oDhBW1HkSKudkgrQtFL9YfIlg61sv39ral63BX7n1TpQ9ZMnCmOg5T903VAfQ1VCSZ8mnEtarHhSz7ruq3gNXLHSWZLSiLyfe7rCIY/Ia68ZuTHBpkH6T8lt4g+227GJ6BNEEl+Ig5YAAAAAElFTkSuQmCC') 14 /  14px / 0 round;
            border-width:  14px;
            border-style:  solid; 
            padding: 10px;
            box-sizing: border-box;
            background-color: white;
            border-radius: 10px;
            
            ul {
                display: flex;
                flex-flow: row;
                gap: 20px;

                li {
                    font-weight: normal;
                    list-style: none;
                    align-content: end;
                }
            }
        }

        article {
            padding: 20px;
            background: white;
            border: 5px dashed black;
            /* width: 100%; */
        }

    }

    footer {
        color: white;
        margin-top: 2rem;
    }

    h1 {
        font-size: 48px;
        font-weight: normal;
    }
    h2 {
        font-size: 36px;
        font-weight: normal;
    }
    h3 {
        font-size: 32px;
        font-weight: normal;
    }
    h4 {
        font-size: 28px;
        font-weight: normal;
    }
    h5 {
        font-size: 22px;
        font-weight: normal;
    }
    h6 {
        font-size: 18px;
        font-weight: normal;
    }
    p, li, a {
        font-size: 20px;
    }

}