body {
    background-color: black;
    overflow: auto;
}

pre {
    font-family: "Consolas", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Monaco", "Courier New", Courier, monospace;
    font-size:0.75vw;
    
    /*position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}

a {
    font-size: 12px;
    color: #b366b3;
}

p {
    font-family: "Consolas", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Monaco", "Courier New", Courier, monospace;
    color: #e6cce6;
} 

.grid-container {
    display: grid;
    grid-template-columns: [hline1] 1% [hline2] auto  [hline3] 1% [hline4];
    grid-template-rows: [vline1] 1% [vline2] auto [vline3] 1% [vline4];
}

.grid-item{
text-align: center;
}

.left{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}

.center{
    grid-column-start: 2;
    grid-column-end: 3;
    align-self: center;
    /*position: relative;*/
    
}

.right{
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

.ascii {
    position: absolute;
    top: 50;
    left: 50;
    bottom: 0;
    z-index: -1;
    margin: auto;
    color:#800080;
}

.asciiShadow {
        text-shadow:-40px 65px #b366b3, -80px 130px #800080, -120px 195px #4d004d, -160px 260px #1a001a;
        color: #e6cce6;
        position: relative;
        z-index: -1;
        padding-left: 160px;
}

.asciiMenu {
    color: #e6cce6;
    position: absolute;
    top: 50;
    left: 50;
    bottom: 0;
    z-index: 0;
    margin: auto;
}