/*
    As for me, I always used to do things alone.
    That’s why the thought of being a team… doesn’t always sit well with me.
    With that said, if the rest of you feel really strongly about this, then maybe…I better do my part, too. Right?

    inspired by microsounds.github.io and wowana.me
*/

@font-face {
    font-family: Terminus;
    src: url(../fonts/TerminusTTF.woff2);
}

:root {
    --dark-color: #0C0C0C;
    --bright-color: #111111;

    --outline-color: #cbcbcb;
    --sidebar-color: #000000;

    --text-light: #FFFFFF;
    --text-faint: #838383;
    --text-dark: #000000;

    --fonts: "Terminus", "Liberation Serif", "Times New Roman", "Times", serif, "Dejima Mincho";
}


html {
    /* cool fonts to meh fonts */
    font-family: var(--fonts);
    font-size: 18px;


    min-height: 100%;
    background-color: var(--dark-color);
    background: url("../imgs/sky.png") repeat, linear-gradient(180deg, var(--dark-color), var(--bright-color));
    background-blend-mode: screen, screen, normal;
    background-size: auto, 20%, auto;

    color: var(--outline-color);
    scrollbar-color: var(--outline-color) #fff;
    scrollbar-width: thin;
}

body {
    /* display: flex; */
    margin: auto;
    width: 60%;
}

@media only screen and (max-width: 768px),
(orientation: portrait) {

    body {
        /* display: flex; */
        margin: auto;
        width: 100%;
    }
}

@media (max-width: 1280px) {
    body {
        /* display: flex; */
        margin: auto;
        width: 80%;
    }
}

@media (max-width: 768px) {
    body {
        /* display: flex; */
        width: 100%;
    }
}

hr {
    border-color: var(--text-faint);
}

/* main */
.content-container {
    padding: 1em;
}

.content {
    /* max-width: 800px; */
    padding: 0 30px 10px 30px;
    border-top: 5px double var(--outline-color);
    background-color: #0000004d;
    color: var(--text-light);
    text-shadow: 2px 1px var(--text-dark);
}

.content p:not(.ignore p) {
    hyphens: auto;
    text-align: justify;
    text-indent: 1em;
    margin: 0;
}

.content>img {
    max-width: 100%;
    border: 1px solid var(--outline-color);
}

.content img {
    border: 1px solid var(--outline-color);
}

.content>h3,
.content>h2 {
    margin: 0;
}

/* texts */

/* blinking text */
.blink {
    animation: blink 0.8s step-end infinite;
}

.blink-smooth {
    animation: blink 0.5s linear infinite;
}

@keyframes blink {
    50% {
        opacity: 0.5;
    }
}

/* email */
.widget-email a {
    font-size: 2rem;
}


/* webring buttons */
.content li>img,
.content a>img {
    border: 2px solid var(--dark-color);
}

.content li>img:hover,
.content a>img:hover {
    border: 2px solid var(--outline-color);
}

/* sidebar */
.sidebar-container {
    padding: 1em;
    font: .9em var(--fonts);
}

.sidebar {
    position: relative;
    width: 290px;
    background: var(--sidebar-color);
    border: .1em solid var(--outline-color);
    border-radius: .3em;
}

.sidebar>p,
.sidebar>h1 {
    text-align: center;
    padding: 0 0;
    margin: 0;
}

.avatar>img {
    border-radius: .3em .3em 0 0;
    width: 290px;
    height: 290px;
    background-color: var(--sidebar-color);
}

/* sidebar links */
.links ul {
    list-style: none;
    padding: 0;
    margin-top: 0;
}

.links ul li {
    border-top: .1em solid var(--outline-color);
    padding: .2em .4em;
}

/* utils */
.sidebar a:not(.no-link) {
    color: var(--outline-color);
    text-decoration: underline;
}

.no-link,
.sidebar a:hover {
    color: var(--outline-color);
    text-decoration: none;
}

.center,
.quote {
    text-align: center;
}

.faint {
    color: var(--text-faint);
}

#discord-status,
#discord-status-about {
    font-weight: bold;
}

/* indents */
.indent {
    text-indent: 32px;
}

/* links */
a {
    color: var(--outline-color);
    text-decoration: none;
}

a:hover,
a:hover>* {
    text-shadow: 0 0 3px var(--text-faint);
}

/* buttons */
.net-buttons {
    text-indent: 1em;
}


.net-buttons img {
    border: 2px solid var(--dark-color);
}

.net-buttons:hover img {
    border: 2px solid var(--outline-color);
}

/* image flag */
img[src*='#left'] {
    float: left;
}

img[src*='#right'] {
    float: right;
}

img[src*='#center'] {
    display: block;
    margin: auto;
}




/* footer */
.footer {
    font-size: 4mm;
}