/*TODO make the background image responsive! keep it pleasingly in frame regardless of size, fully fit to the screen. Perhaps swap image on aspect ratios?*/
body {
    background-image: none;
    background-color: rgba(4,24,15,1) !important;
    font-family: "BalsamiqSans-Regular" !important;
}

.game-showcase-top-section {
    height: 100vh;
    overflow: clip;
}

.top-section-contents {
    display: flex;
    height: 100vh;
    justify-content: center;

    overflow: clip;
}

.top-section-contents div {
    display: block;
}

.game-showcase-body {
    position: static;
    max-width: calc(100vh * (4464/2266));
    width: calc(100%);
    height: 100%;
    background-size: auto 100%; 

    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: revert;
}


/*The Moth Planet background image's dimensions are...... 4464px wide, 2266 tall*/

.mp-left-side {
    position: relative;
    height: 100vh;
    background-image: linear-gradient(to left, rgba(4,24,15,0), rgba(4,24,15,1));
    top: 0;
    left: 35px;
    width: 35px;
    z-index: 2;
    /*overflow: clip;*/ /*Setting all to hidden...... hides the block but not the gradient?*/
}

.mp-sideblock-left {
    position: relative;
    background-color: rgba(4,24,15,1);
    left: -39px;
    height: 100%;
    width: 40px;
    /*overflow: clip;*/
}

.mp-right-side {
    position: relative;
    height: 100vh;
    background-image: linear-gradient(to right, rgba(4,24,15,0), rgba(4,24,15,1));
    top: 0;
    right: 35px;
    width: 35px;
    z-index: 2;
    /*overflow: clip;*/
}

.mp-sideblock-right {
    position: relative;
    background-color: rgba(4,24,15,1);
    right: -34px;
    height: 100%;
    width: 40px;
    /*overflow: clip;*/
}


.moth-planet-body {
    background-image: url("../images/Moth Planet/mothplanet_keyart_final_norobin_mini.png");
}

.logo-container {
    display: flex;
    justify-content: center;
}

.game-showcase-sticky-logo {
    display: block;
    height: auto;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);

    min-width: 200px;
    width: 40%;
}

.game-showcase-robin-overlay {
    position: fixed;
    background-image: url("../images/Moth Planet/mothplanet_keyart_final_robin.png");

    max-width: calc(100vh * (4464/2266));
    width: 100%;
    height: 100vh;
    background-size: auto 100%;

    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    top: 10%;
    z-index: 1;
    opacity: 1;
}



.moth-planet-transition-texture {
    background-color: transparent;

    background-image: linear-gradient(to bottom, rgba(4,24,15,0), rgba(4,24,15,1));
    position: relative;
    bottom: 0;
    z-index: 2;
}



h1, h2, h3, h4, h5, h6 {
    font-family: "PermanentMarker-Regular" !important;
}


.grid-container {
    display: grid;
}

.moth-planet-plain-bg {
    background-color: rgba(4,24,15,1);
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
}

.showcase-contents-container {
    padding-top: 70px;
    padding-bottom: 140px;

    z-index: 2;

    grid-column: 1;
    grid-row: 1;
}

.moth-planet-showcase-banner {
    /*max-height: 225px;*/
    width: 100%;
}





.footer-bar {
    margin-top: -140px;
}

.footer-block {
    font-family: "Orbitron-Regular" !important;
}

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


.modal-fade {
    position: fixed; /* Stay in place */
    display: flex;
    z-index: 300; /* Sit on top */
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */

    justify-content: center;
    align-content: center;
    align-items: center;
}

.modal-body {
    position: relative;
    opacity: 1;

    z-index: 301;

    max-width: 800px;
    width: 80%;
    max-height: calc(95% - 20px);
    overflow-y: scroll;
    scrollbar-width: none;

    background-color: var(--mfg-yellow);
    color: var(--mfg-purple);
}

#sale-body {
    padding: 0 2rem 0.75rem;
    font-size: xx-large;
    text-align: center;
}

#sale-timer {
    font-family: "Orbitron-Bold" !important;
    text-align: center;
    font-size: 4.5rem;
}

#sale-embed-group {
    padding: 0.6rem 1rem;
    grid-column: 1;
    grid-row: 1;
}

.sale-embed-group-large {
    height: calc(380px + 2rem);
    overflow-y: scroll;
    scrollbar-width: auto;
}

.sale-embed-group-large iframe {
    overflow-y: unset;
    min-width: 100%;
}

.grid-container .fade-and-spacer {
    grid-column: 1;
    grid-row: 1;
    margin: 0 1rem;
}

.sale-embed-group-topfade {
    position: relative;
    top: -1px;
    height: 1rem !important;
    background-image: linear-gradient(to top, rgba(238,210,109,0), rgba(238,210,109,1));
    z-index: 400;
    display: none;
}

.grid-container div .sale-embed-group-topfade {
    display: flex;
}

.sale-embed-group-bottomfade {
    position: relative;
    bottom: -1px;
    height: 1rem !important;
    background-image: linear-gradient(to bottom, rgba(238,210,109,0), rgba(238,210,109,1));
    z-index: 400;
    display: none;
}

.grid-container div .sale-embed-group-bottomfade {
    display: flex;
}

.sale-group-spacer {
    z-index: 100;
}


@media screen and (max-width: 800px) {
    #sale-timer {
        font-size: calc(1rem + 5vw);
    }
}

.modal-content {
    padding: 0.5rem 0;
    font-family: "Orbitron-Bold" !important;
}

.modal-decoration {
    max-width: 400px;
    min-width: 150px;
}

@media screen and (max-width: 650px) {
    #sale-body {
        font-size: x-large;
    }
}

@media screen and (max-width: 450px) {
    #sale-body {
        font-size: large;
    }
}

.sale-marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    height: 2.5rem;
    font-family: "Orbitron-Bold" !important;
    color: var(--mfg-pink);
}

.sale-marquee span {
    display: inline-block;
    animation: marquee 8s linear infinite;
}

.sale-popup-close {
    background-color: var(--mfg-orange);
    color: var(--mfg-purple);
    border-width: 1px;

    align-self: center;
    vertical-align: middle;

    padding: 0.5rem;
    margin: 1rem 0;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-50%, 0);
    }
}