body {
        background-color: black; 
        background-image: url(https://i.imgur.com/RWR1WeX.jpeg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        display: flex;
        justify-content: center;
        font-family: "VT323", serif
}

h1{
        text-align: center;
}

#landing-container
{
        display: grid;
        width: 99vw;
        height: 99vh;
        position: relative;
        grid-template-areas: ". landing-header ." ". . ." "nav landing ." "nav landing ." ". . .";
        grid-template-rows: 10% 3% 30% 52% 5%;
        grid-template-columns: 20% 60% 20%;
}

#landing
{
        background-image: url("images/bg_314.gif");
        font-size: 13px;
        box-shadow: black 0 5px 10px;
        background-color: black;
        padding: 20px;
        color: white;
        text-align: center;
        grid-area: landing;
}

#landing-header
{
        font-family: monospace;
        text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
        font-variant: small-caps;
        font-size: 40px;
        text-align:center;
        vertical-align: middle;
        line-height: 75px;
        letter-spacing: 0.4rem;
        grid-area: landing-header;
}

#nav{
        grid-area: nav;
        margin: 10px;

}

#nav-menu{
        list-style: none;
}

.nav-header{
        color:black;
        opacity: 1;
        border: solid;
        background-color: purple;
        border-color: pink;
        border-radius: 5px;
}

.nav-button{
        display: block;
        color: black;
        padding: 10px;
        border: solid;
        border-color: pink;
        background-color: purple;
        text-decoration: none;
        margin-top: 3px;
        width: 140px;
}

.nav-button:hover{
        background-color: rgb(185, 68, 185);
}

#main-container{
        display: grid;
        width: 99vw;
        height: 99vh;
        position: relative;
        grid-template-areas: ". landing-header ." ". . ." "nav main-content ." ". main-content test";
        grid-template-rows: 10% 3% 82% 5%;
        grid-template-columns: 20% 60% 20%;
}

#main-content{
        font-size: 13px;
        padding: 20px;
        min-width: 500px;
        color: white;
        text-align: left;
        overflow: auto;
        grid-area: main-content;
        scrollbar-color: pink purple;
        scrollbar-width: thin;
}
#main-post{
        background-image: url("images/bg_314.gif");
        font-size: 13px;
        min-height: 300px;
        box-shadow: black 0 5px 10px;
        background-color: black;
        padding: 20px;
        color: white;
        text-align: left;
}
#sphere{
        position: fixed;
        right:-150px;
        bottom:-150px;
        width: 500px;
        height: 500px;

}

#return-link{
        font-family: monospace;
        font-variant: small-caps;
        font-size: 20px;
        grid-area: return-link;
        color:yellow;
        text-align: center;
        vertical-align: middle;
        line-height: 60px;
        text-shadow: 0 0 1em black, 0 0 0.7em white;
        background-image: url("images/bg_314.gif");
}

.static-overlay{
        opacity: 0.8;
        z-index: 10;
        background: 
        repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 0/2500px 2500px,
        repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 60% 60%/2500px 2500px;
      background-blend-mode: difference;
      animation: b .2s infinite alternate;
}

@keyframes b{
100% {background-position: 50% 0, 60% 50%}
}

.vt323-regular {
        font-family: "VT323", serif;
        font-weight: 400;
        font-style: normal;
      }