/* General */

@font-face {
    font-family: "BalsamiqSans-Regular";
    src: url("../fonts/BalsamiqSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "PermanentMarker-Regular";
    src: url("../fonts/PermanentMarker-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Orbitron-Regular";
    src: url("../fonts/Orbitron-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Orbitron-Bold";
    src: url("../fonts/Orbitron-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "SpaceGrotesk-Regular";
    src: url("../fonts/SpaceGrotesk-Regular.ttf") format("truetype");
}

:root {
    --mfg-yellow: #EED26D;
    --mfg-pink: #D483A4;
    --mfg-purple: #4F4A6D;
    --mfg-white: #E6E0C8;
    --mfg-orange: #E1A878;
}

html {
    min-height: 100%; /* Look, it's not fixed anymore! */
    display: flex;
    flex-direction: column;
}

body {
    position: absolute;
    height: 100%;
    width: 100%;
    flex-grow: 1;
    /*background-image: linear-gradient(black, black); TODO replace this background image with a real texture url('../images/mfg_website_tile2f.png');
    background-repeat: repeat;
    background-size: 100% 100%;
    background-origin: content-box;*/

    background-image: url('../images/mfg_website_tile1.png');

    background-repeat: repeat;
    background-size: 450px 450px;
    background-origin: content-box;
    background-color: #1A1921 !important;
    background-blend-mode: overlay;

    margin: 0;
    padding: 0;
    color: var(--mfg-white) !important;

    font-family: "SpaceGrotesk-Regular" !important;
    font-size: large !important;
}

@media screen and (max-width: 1200px) {
    body {
        font-size: medium !important;
    }
}

h4, h5, h6 {
    font-family: "Orbitron-Regular" !important;
}

h1, h2, h3 {
    font-family: "Orbitron-Bold" !important;
}

/* Header Components */

.header-bar {
    position: fixed;
    top: 0;
    left: 0;
    /*height: 170px;*/
    width: 100%;
    display: flex;
    z-index: 6;
    pointer-events: none;

    font-family: "Orbitron-Bold" !important;
}

    .header-bar div {
        position: relative;
        pointer-events: auto;
    }

.header-bar-large {

}

.header-bar-small {
    width: 100%;
    background-color: var(--mfg-purple);
    /*padding: 0 0 12px 0;*/
    border-width: 5px;
    border-bottom-style: solid;
    border-color: var(--mfg-pink);
}

.header-dropbar{
    /*position: relative;*/
}


#mobile-navlinks {
    display: none;
    background-color: var(--mfg-purple);
    position: relative;
    height: fit-content;
    width: 100%;
    z-index: 99;
}

.header-logo {
    z-index: 6;
    height: 100%;
    max-width: 170px;
    max-height: 185px;
    background-color: var(--mfg-purple);
    padding: 4px 4px 12px 0;
    border-bottom-right-radius: 20px;
    border-width: 5px;
    border-bottom-style: solid;
    border-right-style: solid;
    border-color: midnightblue;
}



.header-logo-small {
    z-index: 6;
    height: 100%;
    max-width: 150px;
    max-height: 50px;
    background-color: var(--mfg-purple);
    margin: 4px;
}

.mfg-navbar-large {
    z-index: 6;
    height: 50px;
    width: 110%;
    background-color: var(--mfg-purple);
    display: flex;
    left: -5px;
    margin-right: -20px;
    border-bottom-style: solid;
    border-bottom-color: midnightblue;
    border-bottom-width: 5px;
    border-bottom-left-radius: -50px;

    /*text-align: center;
    vertical-align: middle;*/
    /*justify-self: center;
    justify-content: center;
    justify-items: center;*/
}

    .mfg-navbar-large a {
        text-decoration-line: none;
        color: var(--mfg-white);
    }

.mfg-navbar-small {
    z-index: 6;

    width: 100%;

    display: flex;

    overflow: hidden;

    /*text-align: center;
    vertical-align: middle;*/
    /*justify-self: center;
    justify-content: center;
    justify-items: center;*/
}

    .mfg-navbar-small a {
        text-decoration-line: none;
        color: var(--mfg-white);
    }

    #mobile-navlinks div a {
        text-decoration-line: none;
        color: var(--mfg-white);
    }

/*TODO REFACVTOR TO INCLUDE THESE*/
.mfg-navbar-small-mainbar {
    width: 100%;
}
.mfg-navbar-small-navlinks {

}



.header-navbutton {
    height: /*50px;*/ calc(100%);
    line-height: calc(100%);
    color: var(--mfg-white) !important;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

    min-width: 50px;
    max-width: 250px;
    padding: 1rem 2rem;
}

.header-navbutton-salenow {
    right: 0;
    cursor: pointer;
}

    .header-navbutton-salenow:hover {
        background-color: var(--mfg-orange);
    }

.header-navbutton-salenow-mothplanet {
    background-color: rgba(4,24,15,1);
    font-family: "PermanentMarker-Regular" !important;
}

.header-navbutton-mobile {
    width: 130px;
    font-size: 1.1rem;
    padding: 1rem;
}

.header-navbutton-uncollapsed {
    width: 100%;
    padding: 0.5rem 2rem;
    display: inline-block;
}

.navbutton-not-current {
    /*Intentionally left blank for the current iteration, open to restyling*/
}

    .navbutton-not-current:hover {
        cursor: pointer;
        background-color: var(--mfg-orange);
    }


.navbutton-current {
    cursor: default;
    background-color: var(--mfg-yellow);
    color: var(--mfg-purple) !important;
}

.navbutton-storerenav {
    background-color: var(--mfg-pink); /*Formerly seagreen*/
    color: var(--mfg-purple) !important;
}

    .navbutton-storerenav:hover {
        cursor: pointer;
        background-color: var(--mfg-orange);
        color: var(--mfg-white) !important;
    }





.contents-container {
    /*background-image: url('../images/mfg_website_tile1b.png');*/ /*1b, 2b, or 2f?*/
    /*background-repeat: repeat;
    background-size: 450px 450px;
    background-origin: content-box;
    background-color: rgba(0,0,0,0.8);
    background-blend-mode: darken;*/

    min-height: calc(100% - 50px);

    margin-top: 70px;
    margin-bottom: 15px;
    padding-bottom: 140px;
}

.center-horizontally { /*THIS only kinda works such as when centering divs of a row container. and...*/
    justify-content: center;
}

.center-vertically { /*... THIS does not work at all?*/
    align-content: center;
}



/* Footer Components */

.footer-bar {
    position: relative;
    width: 100%;
    height: 140px;
    margin-top: -155px;

    bottom: 0;
    left: 0;
    display: flex;

    z-index: 2;
}

.footer-block {
    display: block;
    margin: 20px 1.75rem;

    font-family: "Orbitron-Regular" !important;
}

.our-links {
    font-family: "Orbitron-Regular" !important;
}

.copyright {
    font-weight: lighter !important;
    font-size: x-small !important;
    font-family: "SpaceGrotesk-Regular" !important;
}



/* Responsive Styling; For Thinner Screens, 900px or smaller */

@media screen and (max-width: 900px) {
    .header-bar-large {
        display: none;
    }

    .mfg-navbar-large {
        display: none;
    }

    .contents-container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .showcase-contents-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}



/* Responsive Styling; For Wider Screens, 901px or larger, BUT less than 1200px */
@media screen and (min-width: 901px) and (max-width: 1200px) {
    .header-navbutton {
        max-width: 220px;
        padding: 1rem 1.5rem;
    }
}

/* Responsive Styling; For Wider Screens, 901px or larger */
@media screen and (min-width: 901px) {
    .header-bar-small {
        display: none;
    }

    .mfg-navbar-small {
        display: none;
    }

    .header-logo img {
        max-height: 85px;
        max-width: 85px;
    }

    .contents-container {
        padding-left: calc(16% - 20px); /*calc(10% - 20px)???*/ /*100px?*/
        padding-right: calc(16% - 20px);
    }

    .showcase-contents-container {
        padding-left: calc(16% - 20px);
        padding-right: calc(16% - 20px);
    }
}

/* Responsive Styling; For Wider Screens, 1201px or larger */

@media screen and (min-width: 1201px) {
    .header-logo img {
        max-height: 170px;
        max-width: 170px;
    }

    .contents-container {
        padding-left: calc(16% - 37px); /*calc(10% - 37px)???*/ /*185px?*/
        padding-right: calc(16% - 37px);
    }
    .showcase-contents-container {
        padding-left: calc(16% - 37px);
        padding-right: calc(16% - 37px);
    }
}



















/* Social Logos */

.social-logo {
    display: flex;
    max-width: 40px;
    width: 10vw;
    aspect-ratio: 1 / 1;

    background-repeat: no-repeat;
    background-size: contain;
}


/**/
.tumblr {
    background-image: url('../icons/Tumblr_Logos_2018.03.06_t Icon Black.png');
}

.neocities {
    background-image: url('../icons/neocitieslogo.svg')
}

.bluesky {
    background-image: url('../icons/bluesky_media_kit_logo.svg');
}

.twitch {
    background-image: url('../icons/TwitchGlitchPurple.svg');
}

.youtube {
    background-image: url('../icons/yt_icon_mono_light.png');
}

.mastodon {
    background-image: url('../icons/mastodon-logo-black.svg');
}

.discord {
    background-image: url('../icons/Discord-Symbol-Black.svg');
}

.kofi {
    background-image: url('../icons/kofi_symbol.svg');
}

.instagram {
    background-image: url('../icons/Instagram_Glyph_Black.svg');
}

.website {
    background-image: url('../icons/world-wide-web-svgrepo-com.svg');
}
/**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/
.contrast.tumblr {
    background-image: url('../icons/Tumblr_Logos_2018.03.06_t Icon Black.png');
}

.contrast.neocities {
    background-image: url('../icons/neocitieslogo.svg')
}

.contrast.bluesky {
    background-image: url('../icons/bluesky_media_kit_logo contrast.svg');
}

.contrast.twitch {
    background-image: url('../icons/TwitchGlitchPink.svg');
}

.contrast.youtube {
    background-image: url('../icons/yt_icon_mono_lazypink.png');
}

.contrast.mastodon {
    background-image: url('../icons/mastodon-logo-pink.svg');
}

.contrast.discord {
    background-image: url('../icons/Discord-Symbol-Pink.svg');
}

.contrast.kofi {
    background-image: url('../icons/kofi_symbol_pink.svg');
}

.contrast.instagram {
    background-image: url('../icons/Instagram_Glyph_Pink.svg');
}

.contrast.website {
    background-image: url('../icons/world-wide-web-pink.svg');
}
/**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/

.bluesky.footer-social {
    background-image: url('../icons/bluesky_media_kit_logo purple.svg');
}

.twitch.footer-social {
    background-image: url('../icons/TwitchGlitchMFGPurple.svg');
}

.youtube.footer-social {
    background-image: url('../icons/yt_icon_mono_lazypurple.png');
}

.mastodon.footer-social {
    background-image: url('../icons/mastodon-logo-purple.svg');
}

.discord.footer-social {
    background-image: url('../icons/Discord-Symbol-Purple.svg');
}


/* MFG Brand Colors */

.mfg-primary {
    background-color: var(--mfg-purple);
    border-color: var(--mfg-pink);
    color: var(--mfg-yellow);
}

.mfg-secondary {
    background-color: var(--mfg-pink);
    border-color: var(--mfg-yellow);
    color: var(--mfg-purple);
}

.mfg-bright {
    background-color: var(--mfg-yellow);
    border-color: var(--mfg-pink);
    color: var(--mfg-purple);
}





.game-screenshot {
    width: 95%;
    padding: 2.5%;
    height: auto;
    object-fit: contain;
}

.image-container-centered {
    display: flex;
    justify-content: center;
    padding-bottom: 2rem;
}

.link-mfg-colors:link {
    color: var(--mfg-yellow);
}

.link-mfg-colors:visited {
    color: var(--mfg-orange);
}

h1 {
    color: var(--mfg-pink) !important;
}