/*Main body styling*/
body {
    background-color: black;
    margin: 0px;
    padding: 0px;
}
/*Additional body styling*/
.footer {
    position: fixed;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    color: darkgray;
    text-size-adjust: auto;
}

    .footer::before {
        position: absolute;
        z-index: -1;
        opacity: .8;
        background-color: #363940;
    }
/*Forehead*/
.forehead {
    padding: 0%;
    position: relative;
    background-color: rgba(51,51,51,0.3);
    overflow: hidden;
}

    .forehead a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        font-family: Calibri;
    }

        .forehead a:hover {
            background-color: #5304e5;
            color: white;
        }

        .forehead a.active {
            background-color: #e5048f;
            color: white;
        }

.forehead-centered a {
    float: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.forehead-right {
    float: right;
}

@media screen and (max-width: 600px) {
    .forehead a, .forehead-right {
        float: none;
        display: block;
    }

    .forehead-centered a {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
    }
}
/*Fonta families*/
@font-face {
    font-family: Calibri;
    src: url(fonts/calibri.ttf);
}
/*Text styling*/
h1 {
    text-align: center;
    font-family: Calibri;
    color: cornflowerblue;
}
h2 {
    text-align: center;
    font-family: Calibri;
    color: white;
}
h3 {
    color: cornflowerblue;
    padding-left: 1%;
    padding-top: .5%;
}
p {
    color: white;
    text-align: center;
    font-family: Calibry;
}
/*additional text styling*/
    p.footie { /*Footer text*/
        color: grey;
        font-family: Calibri;
    }
p.plaintext {
    text-align: left;
    padding-left: 1.5%;
    padding-right: 1.5%;
    font-family: Calibri;
}
/*header*/
span.h1 {
    display: inline;
    text-align: center;
    font-family: Calibri;
    font-size: 36px;
}
.head1 {
    position: relative;
    top: 8%;
    width: 100%;
    text-align: center;
}
/*divs*/
.container { /*container*/
    position: relative;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 2%;
    width: 90%;
    font-family: Calibri;
}
    .container::before {
        content: "";
        background-color: darkgrey;
        position: absolute;
        width: 90%;
        height: 100%;
        opacity: .30;
        z-index: -2;
        border-radius: 12px;
    }
/*Stuff stack - widget to send user to somewhere else fancy style*/
.stuff-stack {
    color: white;
    position: relative;
    padding-left: 3%;
    padding-right: 3%;
}

    .stuff-stack::before {
        content: "";
        background-color: darkgrey;
        position: absolute;
        width: 94%;
        height: 100%;
        opacity: .40;
        z-index: -1;
        border-radius: 12px;
    }
    /*promo links*/
h3.stst-h3-white {
    color: white;
    font-family: Calibri;
    padding-left: 2%;
    padding-top: 1%;
}
.stuff-stack-twitch {
    color: white;
    position: relative;
    padding-left: 3%;
    padding-right: 3%;
}

    .stuff-stack-twitch::before {
        content: "";
        background-color: rgb(169, 112, 255);
        position: absolute;
        width: 94%;
        height: 100%;
        opacity: .40;
        z-index: -1;
        border-radius: 12px;
    }
.stuff-stack-discord {
    color: white;
    position: relative;
    padding-left: 3%;
    padding-right: 3%;
}

.stuff-stack-discord::before {
    content: "";
    background-color: rgb(112, 64, 254);
    position: absolute;
    width: 94%;
    height: 100%;
    opacity: .40;
    z-index: -1;
    border-radius: 12px;
}

h3.stst-h3 {
    color: deepskyblue;
    font-family: Calibri;
    padding-left: 2%;
    padding-top: 1%;
}

p.stst-plaintext { /*plain text style (required to move text to left because main <a> is centered)*/
    color: white;
    text-align: left;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 1%;
    font-family: Calibri;
}

a.stst-redirect {
    text-decoration: none;
}

    a.stst-redirect:visited {
        color: none;
        text-decoration: none;
    }
h3.article-header {
    color: mediumpurple;
    text-align: center;
    font-family: Calibri;
}