:root {
    --text:#c8edff;
    --bg:#070B2E;
    --link:#f5d1ff;
    --button:#353ab5;
    --button-hover:#8a55ff;
    --header:white;
    --box-shadow:#070B2E;
    --bq:rgba(0,0,0,0.4);
  }

body {
    font-size:1em;
    line-height:1.5em;
    font-family:'Inconsolata', monospace;
    color:var(--text);
    background: rgb(53,58,181);
    background: linear-gradient(180deg, rgba(53,58,181,1) 0%, rgba(138,85,255,1) 35%, rgba(200,164,255,1) 71%, rgba(209,220,255,1) 100%);
    min-height:100vh;
    background-attachment:fixed;
}

b, strong {
    color:var(--header);
}

a:hover, a:active {
    cursor:crosshair;
}

#sitetitle {
    border:1px solid;
    padding:5px 10px;
    text-align:right; 
    font-size:1.1em;
    font-family:'Kode Mono', monospace;
    background-color:var(--bg);
    border-radius:8px 8px 0px 0px;
}

#sitetitle a {
    text-decoration:none;
    text-transform:lowercase;
    color:var(--header);
    text-shadow: 0px 0px 8px var(--header);
}

#banner {
    height:250px;
    background-image:url('/img/layout/s9-banner.png');
    background-position:center;
    border-right:1px solid var(--text);
    border-left:1px solid var(--text);
}

#menulinks {
    padding:5px 0;
    border:1px solid;
    background-color:var(--bg);
    border-radius:0 0 8px 8px;
}

#menu details {
    padding:5px 10px;
    border:1px solid;
    background-color:var(--bg);
    border-radius:0 0 8px 8px;
}

#menu summary {
    font-size:1.1em;
    font-family:'Kode Mono', monospace;
    color:var(--header);
    text-shadow: 0px 0px 8px var(--header);
}

#container {
    margin:40px auto;
    max-width:800px;
}

#topblock {
    box-shadow: 0 4px 30px var(--box-shadow);
}

.navmenu {
    text-align:center;
}

.navmenu {
    margin-left:-35px;
    margin-top:0px;
    margin-bottom:0px;
}

.navmenu li {
    display:inline;
    list-style-type:none;
    padding:0 5px 0 0;
    line-height:3.3em;
}

.navmenu li a, .navmenu li a:visited, .charalink a, .charalink a:visited {
    font-size:1.1em;
    text-transform:lowercase;
    padding:8px;
    border:1px solid var(--text);
    text-decoration:none;
    background-color:var(--button);
    color:var(--header);
    transition:1s;
    text-shadow: 0px 0px 5px var(--header);
    border-radius:8px;
}

.navmenu li a:hover, .navmenu li a:active, .charalink a:hover, .charalink a:active {
    background-color:var(--button-hover);
    transition:0.5s;
}

main {
    padding:0 15px;
    border:1px solid;
    margin-top:20px;
    background-color:var(--bg);
    box-shadow: 0 4px 30px var(--box-shadow);
    border-radius:8px;
}

main img {
    max-width:100%;
    height:auto;
    border:1px solid var(--text);
    border-radius:8px;
}

main a, main a:active, footer a, footer a:active {
    color:var(--link);
    transition:0.5s;
    text-shadow: 0px 0px 5px var(--link);
}

main a:hover, main a:active, footer a:hover, footer a:active {
    color:white;
    transition:0.5s;
}

footer {
    text-align:center;
    margin-top:20px;
    padding:0 15px;
    border:1px solid;
    background-color:var(--bg);
    box-shadow: 0 4px 30px var(--box-shadow);
    border-radius:8px;
}

h1 {
    font-family:'Kode Mono', monospace;
    margin: 0 -15px 0 -15px;
    padding:15px;
    border-bottom:1px solid var(--text);
    text-align:right;
    text-transform:lowercase;
    color:var(--header);
    text-shadow: 0px 0px 8px var(--header);
}

h2 {
    font-family:'Kode Mono', monospace;
    border-left:1px solid var(--text);
    border-bottom:1px solid var(--text);
    padding:8px 10px 10px 10px;
    text-transform:lowercase;
    color:var(--header);
    text-shadow: 0px 0px 8px var(--header);
    border-radius:0px 0px 0px 8px;
}

h3 {
    font-size:1.4em;
    color:var(--header);
    text-shadow: 0px 0px 8px var(--header);
}

h3:before {
    content: '→ ';
}

#updates {
    border:1px solid;
    max-height:250px;
    overflow:auto;
    padding:0 10px;
    margin:10px 0 20px 0;
    border-radius:8px;
}

/* responsive grids*/

.two-column {
    display:block;
}

.two-column > * {
    margin:1rem;
}

.three-column {
    display:block;
}

.three-column > * {
    padding:1rem;
}

@media (min-width:768px) {
    .two-column {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .three-column {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.tabwrap section {
	display: none;
}

.tabwrap section:target {
	display:block;
}

hr {
    height:1px;
    border:none;
    background-color:var(--text);
    margin:20px 0 10px 0;
}

.charagallery img {
    border:1px solid var(--text);
}

.charalink {
    text-align:center;
    margin:30px;
}

ul {
    margin-left:-10px;
    line-height:1.7em;
    margin-bottom:20px;
}

ul li {
    padding-left:10px;
}

.buttons {
    text-align:center;
}

.buttons img {
    border:none;
    border-radius:0px;
}

pre, code {
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

main details {
    border:1px solid var(--text);
    padding:10px 15px;
    border-radius:8px;
}

main summary {
    font-weight:bold;
    color:var(--header);
    text-shadow: 0px 0px 8px var(--header);
}

blockquote {
    border:1px solid var(--text);
    margin: 20px 1px;
    padding:1px 20px;
    border-radius:8px;
}

main li::marker {
    color: var(--header);
}

main ul {
    list-style-type: square;
}