body {
    background-image: url("images/starry_sky.png");
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color:aqua;
}

a:visited {
    color:#737AFF;
}

a:hover {
    color: white;
}

.container {
    display: grid;
    grid-template-areas:
      "header header header"
      "nav content about"
      "nav comments about"
      "footer footer footer";
    grid-template-columns: 10% auto 10%;
    gap: 5px;
    padding: 5px;
}

.container > div{
    background-color: #FFFFFF20;
    color: white;
    overflow-wrap: break-word;
    padding: 0px;
}

.container > div.header{
    grid-area: header;
}

.container > div.nav{
    grid-area: nav;
    overflow: auto;
}

.container > div.content{
    grid-area: content;
}

.container > div.comments{
    grid-area: comments;
}

.container > div.about{
    grid-area: about;
}

.container > div.footer{
    grid-area: footer;
}

.site_logo{
    width:30%;
    padding: 15px;
}

.about_pfp{
    width: 100%;
}

.section_title{
    background-color: #FFFFFFAA;
    color: black;
    margin: 0px 0px 10px 0px;
    padding: 10px 10px;
    font-size: larger;
    font-weight: bold;
}

.section_subheading{
    background-color: #FFFFFF80;
    color: black;
    margin: 10px 0px 10px 0px;
    padding: 5px 10px;
    font-weight: bold;
}

.content_box{
    margin: 10px;
}

.article_list{
    & a{
        color: white;
    }
}

.list_heading{
    display: inline;
}

.article_list ul{
    line-height: 300%;

    & a:hover{
        color:#00FFFF;
    }
}

.navlist{
    line-height: 150%;
    list-style-type: "↪ ";

    & a{
        color:#FFF;
        text-decoration: none;
    }

    & a:hover{
        text-decoration: underline;
    }

    & .current{
        font-weight: bold;
    }
}

.m{
    font-size: smaller;
    color: #ffffff0b;
    text-decoration: none;   
}

.m:visited{
    color: #ffffff0b;
}

.m:hover{
    color: #ffffff0b;
}

.l{
    color:#737AFF;
}

.e{
    display: inline-block;
    opacity: 0;
    color: #FFFFFF10;
    font-size: small;
}

.e:hover{
    opacity: 1;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #00000000;
}

::-webkit-scrollbar-thumb {
    background: #FFFFFF80;
    border-radius: 8px;
    width: 1px;
}