:root{
    --bg:#000000;
    --text:#ffffff;
    --link:#ff3cff;
    --heading:#00ffcc;
}

*{
    box-sizing:border-box;
    font-family:"Courier New", Courier, monospace;
}

html,
body{
    background:var(--bg);
    color:var(--text);
}

body{
    margin:0;
    padding:20px;
    line-height:1.2;
}

.container{
    margin:0 auto;
}

a,
a:visited,
a:hover{
    color:var(--link);
    text-decoration:none;
    text-shadow:0 0 3px #ff3cff;
}

h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--heading);
    font-weight:bold;
    margin:1px 0 0.5em 0;
    text-shadow:0 0 4px #00ffcc;
}

p{
    margin:0 0 0.5em 0;
}

ul{
    margin:0 0 0.5em 20px;
    padding:0;
}

li{
    margin:0;
}

pre{
    color:var(--text);
    white-space:pre-wrap;
    margin:0 0 0.5em 0;
}

nav{
    margin:0.5em 0;
}

.nav-item{
    display:inline;
    margin-right:8px;
}

.site-title a{
    color:var(--heading);
    text-decoration:none;
    text-shadow:0 0 4px #00ffcc;
}

.prompt{
    font-weight:bold;
    color:var(--text);
}

footer{
    margin-top:1em;
}

/* STATUS.CAFE */

#statuscafe{
    display:block;
    margin-bottom:12px;
}

#statuscafe-username{
    color:var(--heading);
    margin-bottom:4px;
    text-shadow:0 0 4px #00ffcc;
}

#statuscafe-content{
    color:var(--text);
}

/* MY BUTTONS */

.my-buttons{
    margin:0.5em 0;
}

.my-buttons img{
    width:100px;
    height:auto;
    margin-right:4px;
    margin-bottom:4px;
    vertical-align:middle;
}

/* WEBRINGS */

.webrings{
    margin:0.5em 0;
}

/* SITE BUTTONS */

.site-buttons{
    margin:0.5em 0;
}

.site-buttons img{
    width:100px;
    height:auto;
    margin-right:4px;
    margin-bottom:4px;
    vertical-align:middle;
}

/* CRT SCANLINES */

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9999;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.45) 0px,
            rgba(0,0,0,0.45) 1px,
            transparent 1px,
            transparent 3px
        );
}

/* CRT FLICKER OVERLAY */

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:10000;
    background:rgba(255,255,255,0.02);
    animation:crt-flicker 0.25s infinite;
}

@keyframes crt-flicker{
    0%{
        opacity:0.03;
    }

    50%{
        opacity:0.01;
    }

    100%{
        opacity:0.03;
    }
}