*{
    font-family: monospace;
    color: white;
    text-align: justify;
}

p, .ascii, .ascii-subtitle, .banner-link, .line, a, ul{
    background-color: rgba(0, 0, 0, 0)
}

html{
    height: 100%;
    /* https://grabient.com/HQBgrAzANKAsAcMT0cAjLAnDNYDsOsATDEUSKWicGWlBMHmtA3kS8AGybSjJRo+0QSBC8QRTkA */
    /*
    background: linear-gradient(90deg, #0d0e11 0.000%, #111216 8.333%, #16171a 16.667%, #1a1b1e 25.000%, #1e1f22 33.333%, #222326 41.667%, #26272a 50.000%, #292a2e 58.333%, #2c2d31 66.667%, #2f3034 75.000%, #313236 83.333%, #333439 91.667%, #34353a 100.000%);
    */
    background: rgba(0, 0, 0, 9.8);
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.99) 45%, rgba(138, 43, 226, 1) 100%);
}


.wrapper{
    width: 100%;
    max-width: 960px;
    margin: 2% auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 200px auto;
}

header, nav, main, footer{
    background-color: rgba(0, 0, 0, 1);
    font-family: "Pixelify Sans", sans-serif;
    color: blueviolet;
    border: white 2px solid;
    border-radius: 5px;
    height: max-content;
    padding: 10px;
    box-shadow: 2px 2px whitesmoke;
}

header{
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}

.header-image{
    width: 15%;
    margin: 5px 5px 5px 5px;
}

nav{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: 500px;
    overflow-y: auto;
}

main{
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    height: 500px;
}

footer{
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    padding: 0%;
}

.ascii{
    color:crimson;
    text-align: center;
    font-size: 10px;
}

.ascii-subtitle{
    font-size: 10px;
}

.ftt{
    color:blueviolet;
    font-family: "Pixelify Sans", sans-serif;
    font-size: 10px;
    text-align: center;
}

.pixelify-sans{
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.line{
    border: white 1px dashed;
}

ul, ol{
    padding-left: 20px;
}

.imgs{
    display: block;
    margin: 0 auto;
    width: 50%;
}

a{
    transition: color 0.3 ease;
    text-decoration: none;
}

a:hover{
    color:blueviolet;
}

.banner-link{
    color: blueviolet;
    text-decoration: none;
}

.nav-text{
    text-align: left;
}

.main-text{
    height: 460px;
    overflow-y: auto;
    padding-right: 10px;
}