:root {
                --header-image: url("../images/asensis.jpg");
                --background-image: url("../images/gengertile.jpg");
                --primary-color: #fffbea;
                --accent-color: #626b8d;
                --text-color: #151010;
                --secondary-color: #c4baba;
                --grid: 25px;
                --border-width: 2px;
                --font: 14px;
                
            }
            body{
                background-image: var(--background-image);
                background-repeat: repeat-y;
                background-attachment: fixed;
                background-size: cover;
                font-family: "Lucida Console", 'Courier New', Courier, monospace;
            }
            #layout
            {
                display: grid;
                gap: var(--grid);
                grid-template-columns: auto  auto;
                justify-content: center;
            }
            #leftWrapper{
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }
            #leftBar
            {
                --dot-color: var(--secondary-color);
                --dot-size: 1px;

                background-color: var(--primary-color);
                background-image: radial-gradient(
                    circle,
                    var(--dot-color) var(--dot-size),
                    transparent var(--dot-size)
                );

                background-size: var(--grid) var(--grid);
                background-position: -13px -13px;
                border: var(--border-width) solid var(--text-color);
                padding: calc(var(--grid) - 1px) ;
                width: calc(var(--grid) * 6 - 1px);
                height: min-content;
                margin-top: calc(var(--grid) * 15);
                
            }
            #profile{
                --dot-color: var(--secondary-color);
                --dot-size: 1px;

                background-color: var(--primary-color);
                background-image: radial-gradient(
                    circle,
                    var(--dot-color) var(--dot-size),
                    transparent var(--dot-size)
                );

                background-size: var(--grid) var(--grid);
                background-position: -13px -13px;
                border: var(--border-width) solid var(--text-color);
                

                width: calc(var(--grid) * 8 - 3px);
                height: min-content;
                margin-top: calc(var(--grid) * 15);
            }
            #profile img
            {
                width: calc(var(--grid) * 8 - 3px);
                height: calc(var(--grid) * 8);
                border-bottom:  var(--border-width) solid var(--text-color);
                margin-bottom: -4px;
            }
            #profile h1{
                margin-bottom: -1px;
                text-align: center;
            }
            #profile li{
                margin-left: var(--grid);
                margin-right: var(--grid);
            }

            #container {

                display: flex;
                flex-direction: column;
                justify-content: center;
                width: calc(var(--grid) * 28 + 1px);
                margin: 0 auto;

                --dot-color: var(--secondary-color);
                --dot-size: 1px;

                background-color: var(--primary-color);
                background-image: radial-gradient(
                    circle,
                    var(--dot-color) var(--dot-size),
                    transparent var(--dot-size)
                );

                background-size: var(--grid) var(--grid);
                background-position: -12px -12px;
            }
            #headerArea{
                align-items: center;
            }
            #header {
                border: var(--border-width) solid var(--text-color);
                height: calc(var(--grid) * 12 - 2px);

                background-image: var(--header-image);
                background-size: cover;
                background-position: 0% 40%;
                background-repeat: no-repeat;
            }

             #navbar {
                
                border-right: var(--border-width) solid var(--text-color);
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                width: 100%;
                height: calc(var(--grid) * 2 - 2px);;
                text-align: center;
                padding-top: var(--grid);
                border-left: var(--border-width) solid var(--text-color);
   
            }

            #navbar li a {
                color: var(--text-color);
            }
            #navbar li a:hover{
                color: var(--accent-color);
            }

            main {
                padding-left: var(--grid);
                padding-right: var(--grid);
                padding-top: calc(var(--grid) - 1px);
                border: var(--border-width) solid var(--text-color);
            }
            #card
            {
                padding-left: var(--grid);
                padding-right: var(--grid);
                padding-top: calc(var(--grid) - 1px);
                padding-bottom: calc(var(--grid) - 1px);
                border-left: var(--border-width) solid var(--text-color);
                border-right: var(--border-width) solid var(--text-color);
                border-bottom: var(--border-width) solid var(--text-color);
            }
            #feed{
                border-left: var(--border-width) solid var(--text-color);
                border-right: var(--border-width) solid var(--text-color);
                border-bottom: var(--border-width) solid var(--text-color);
                padding-left: var(--grid);
                padding-right: var(--grid);
                padding-top: calc(var(--grid) - 2px);
                padding-bottom: var(--grid)
            }
            footer {
                text-align: center; 
                padding-top: calc(var(--grid) - 1px);
                padding-left: var(--grid);
                padding-right: var(--grid);
                border-left: var(--border-width) solid var(--text-color);
                border-right: var(--border-width) solid var(--text-color);
                border-bottom: var(--border-width) solid var(--text-color);
            }   
            p, h1, h2, h3, a {
                line-height: var(--grid);
                margin-top: 0;
                margin-bottom: var(--grid);
                font-size: var(--font);
                
            }
            ul, li{
                line-height: var(--grid);
                margin-top: 0;
                margin-bottom: 0;
                padding-left: 0;
                margin-left: 0;
                font-size: var(--font);
            }
            ol
            {
                line-height: var(--grid);
                padding-left: var(--grid);
                font-size: var(--font);
            }
            p {
                margin: 0 0 var(--grid);

            }
            span{
                font-size: calc(4 * var(--font));
                float: left;
                margin-right: 0.1em;   
                line-height: calc(2 * var(--grid));
            }
            h1, h2, h3, a{
                color: var(--accent-color);
            }
.footnote-ref {
    position: relative;
    text-decoration: none;
}

.footnote-ref sup {
    position: relative;
    top: -0.4em;
    font-size: 0.75em;
    line-height: 0;
}

@media (max-width: 1000px)
{
    #layout
    {
        display: flex;
        flex-direction: column;
    }
    #container {
        width: calc(var(--grid) * 16 + 1px);
        order: 1;
    }
    #leftWrapper
    {
        order: 2;
    }
    #leftBar{
        order: 2;
    }
    #profile, #leftBar
    {
        margin-top: var(--grid);
    }
    
}