.pxl {
    image-rendering: pixelated;
}

body {
    background-color:#222;
    font-family: monospace;
    color:#aaa;
    font-size: larger;
    padding-left:80px;

    display:grid;
    grid-auto-columns: 800px 40px max-content;
    /* grid-auto-rows: auto auto auto 800px; */

    padding-bottom:800px;
}

img {
    max-width:100%;
}

#back_to_top {
    grid-column:1;
}

#header_image {
    image-rendering: pixelated;
    width:492px;
    grid-column: 1;
}

section {
    scroll-margin-top:800px;
    grid-column: 1;
    grid-row: 3;
}

section:target::after {
    grid-column: 1;
}

section:not(:target)
{
pointer-events: none;    
}

section:not(:target) .contents
{
display: none;
pointer-events: none;
}

.contents {
    grid-column:1;
    background-color:#999;
    color:#222;
    padding:20px;
    grid-column: 1;
}

div.header {
    padding:20px;
    grid-column: 1;
}

a:link,a:visited,a:hover,a:active { color:#fff; }

.index {
    grid-column: 3;
    grid-row-start:2;
    grid-row-end:5;
}

.index div {

    background-color: #333;
}

.quote {

    border: 1px solid black;
    background-color:#cca;
    padding:2px;
}

pre {
    display:block;
    border: 1px solid black;
    background-color:#cca;
    padding:2px;
    overflow-x:scroll;
}

code {
    color:#222;
    display:inline;
    background-color:#cca;
    border: 1px solid black;
    padding:2px;
}

pre code {
    border:none;
    padding: none;
}

@media only screen and (max-width: 1100px) {
    .index {
        grid-column: 1;
        grid-row-start: 2;
        grid-row-end:2;
    }

    body {
        padding-left: 0;
        grid-auto-columns: 100%;
    }

    
}

@media only screen and (max-width: 492) {
    #header_image {
        width:unset;
    }
}