/* FONTS : start */
@font-face {
    font-family: DotGothic16;
    src: url(../fonts/DotGothic16-Regular.ttf);
    /* font-style: normal; */
}

@font-face {
    font-family: Redaction35;
    src: url(../fonts/Redaction35-Regular.ttf);
    /* font-style: normal; */
}
@font-face {
    font-family: Redaction35;
    src: url(../fonts/Redaction35-Italic.ttf);
    font-style: italic;
}
@font-face {
    font-family: Redaction35;
    src: url(../fonts/Redaction35-Bold.ttf);
    font-weight: bold;
}

/* Redaction50 */
@font-face {
    font-family: Redaction50;
    src: url(../fonts/Redaction50-Regular.ttf);
}
@font-face {
    font-family: Redaction50;
    src: url(../fonts/Redaction50-Italic.ttf);
    font-style: italic;
}
@font-face {
    font-family: Redaction50;
    src: url(../fonts/Redaction50-Bold.ttf);
    font-weight: bold;
}

/* Inconsolata */
@font-face {
    font-family: Inconsolata;
    src: url(../fonts/Inconsolata-Regular.ttf);
}
@font-face {
    font-family: Inconsolata;
    src: url(../fonts/Inconsolata-Light.ttf);
    font-weight: light;
}
@font-face {
    font-family: Inconsolata;
    src: url(../fonts/Inconsolata-Medium.ttf);
    font-weight: medium;
}
@font-face {
    font-family: InconsolataVariable;
    src: url(../fonst/Inconsolata-Variable-wdth-wght.ttf);
    /* font-width: 0;
    font-weight: 100; */
}
/* FONTS : end */


/* constants and default styling used throughout any tags/elements on the page */
/* :root is the same as html, basically. */
/* html {} */
:root {
    --maxw: 2000px;
    --maxWidth: 1600px;
    --maxWidth2: 76vw;
    --measure: 120ch; /*68ch;*/
    --gap: 3rem;
    --footer-h: 256px;
    --bgart-height: 1450px;
    --bgart-min-height: 100vh;
    --bgart-fade-height: 256px;

    color: white;/*so default text/foreground color is set*/
    --unhover-color: #808080;
    --hover-color: #ffffff;
    --hover-bg-color: #454584;
    --selected-color: #ff6291;
    --muted-color: #9f9f9f;
    --link-color: mediumturquoise;
    --link-button-color: #454584;
    --main-heading-color: #e4e1df;
    --main-text-color: #d0d0d0;
    --footer-text-color: #d0d0d0;

    --prose-border-color: #909090;
    --prose-border-width: 1px;

    --project-wrapper-border-color: #2f2f41;
    --project-wrapper-bg-color: #8d8d8d65;
    
    --footer-bg-color: #222;
    --header-bg-color: var(--footer-bg-color);
    --site-bg-color: #242424;
    --main-bgart-top-color: #181818;
    --headline-bg-color: #111;
}

/* body {
    background: #e0e0e0;
} */

/* Styling for the main <body> tag's background element and default foreground color */
.main-body {
    display: block;
    position: relative;
    min-height: 100%;
    top: 0px;
    border: 0px;
    margin: 0;
    padding: 0;
    background-color: var(--site-bg-color);
    /* background-image: url(../img/background.webp); */
    /* background-image: linear-gradient(#39325d,#141e1e, #141e1e, #141e1e,#141e1e,#141e1e, #39325d); */
    /* background-repeat: no-repeat; */
}

/* Zeroed position and dimensions to  */
body:after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    /* Preload common images/content here for (usually animated) elements
    which you want to prevent popping artifacts upon first playback. */
    content: url(../img/mg_home_layer_nametext.png) url(../img/mg_logo.png) url(../img/mg_home_layer_gaoler.png)
    url(../img/mg_home_layer_moon.png) /*keep adding more images here to "preload" them when the page is loaded.*/
    url(../img/moongaol-logo-scene-layer-0.png)
    url(../img/moongaol-logo-scene-layer-1.png)
    url(../img/moongaol-logo-scene-layer-2.avif)
    url(../img/moongaol-logo-layer_brandtext.png)
    url(../img/icon_twitter_solid.webp)
    url(../img/icon_fab_solid.svg)
    url(../img/icon_ig_solid.webp)
    url(../img/icon_yt_solid.webp)
}

#body-content-wrapper {
    /*
    -webkit-box-pack: center;
    -webkit-box-align: center;
    */
    overflow-y: hidden;
}

.site-bg-color {
    background-color: var(--site-bg-color);
}

/* MAIN CONTENT STYLE <main> */
.main-content {
    /* display: flex; */
    /* position: relative; */
    /* top: 0px; */
    width: 100%;
    /* max-width: var(--maxw); */
    /* min-height: calc(100vh - var(--footer-h)); */
    /* min-height: 100vh; */
    min-height: calc(150vh - 60px);
    margin-inline: auto;
    /* padding-inline: none; */
    /* padding-inline: clamp(1.25rem, 5vw, 2.5rem); */
    /*background-color: rgba(49, 62, 69, 0.6);*/
    
}
.main-content .main-section {
    display:flex; 
    min-width:100%; 
    max-width: var(--maxw);
    justify-content:center; 
    align-items:center;
}
/* MAIN CONTENT STYLE <main> */

#bgart-wrapper {
    display: block;
    position: absolute;
    top: 0px;

    /* min-width: 1920px; */
    width: 100%;
    min-height: var(--bgart-min-height);
    /* min-height: calc(var(--bgart-height) + var(--bgart-fade-height)); */

    overflow-y: hidden;
    background-color: var(--site-bg-color);
    background-color: var(--main-bgart-top-color);
    /* background-color: #756; */
    z-index: -1000;
}

.bgart-layer {
    position: absolute;
    top: 0px;

    width: 100%;
    height: 1450px;
    /* height: var(--bgart-height); */
    /* min-height: var(--bgart-min-height); */
    /* min-width: 2000px; */
    
    background-size: 150vh, cover;
    mask-size: 150vh, cover;

    background-position-x: center;
    background-position-y: top;

    background-repeat: no-repeat;
    overflow-y: hidden;
}
#bgart-top {
    /* background-clip:content-box; */
    /* mask-size: cover; */
    mask-position: center top;
    mask-repeat: no-repeat;
    /* mask-type: alpha;
    mask-mode: alpha; */
}


label {
    cursor: pointer;
    background: var(--text);
    color: var(--bg);
    display: flex;
    align-items: center;
    border-radius: 6px;
    box-shadow: 0 2px var(--bg), 0 4px var(--text);
    user-select: none;
}
/* END of Light/Dark mode styling logic, using a toggle checkbox */
.link {
    cursor: pointer;
    color: var(--link-color);
    text-decoration: underline;
}
.link-button {
    display: flex;
    cursor: pointer;
    background-color: var(--link-button-color);
}
.link-text {
    color: var(--link-color);
    font-family: Redaction50, Courier, monospace;
    font-size: 1.2rem;
    letter-spacing: 0.02rem;
}

/* FOREGROUND COLOR STYLES */
.muted { color: var(--muted-color); }

.clickable { cursor: pointer; }

/* SPECIFIC ID STYLES */
#curnav { color: var(--selected-color); }
.curnav { color: var(--selected-color); }

/* GENERIC TEXT STYLES */
.t-l { text-align: left; }
.t-r { text-align: right; }
.t-c { text-align: center; }
h1 {
    /* font-family: DotGothic16; */
    font-family: Redaction35;
    font-size: 2.2rem;
    letter-spacing: 0.1em;
    font-weight: 800;
}
h2 {
    font-family: Redaction35;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    line-height: 4rem;
    /*font-weight: 600;*/
    /*text-decoration: underline;*/
}
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.label-p {
    color: var(--muted-color);
    /* font-family: Redaction35, Courier, monospace; */
    font-family: Inconsolata, Courier, monospace;
    font-size: 0.9em;
    font-weight: 800;
    /* word-spacing: 0em; */
    /* text-align: left; */
    /* text-decoration: solid; */
    line-height: 3em;
    /* font-style: normal; */
    letter-spacing: 0.25em;
    /* margin-bottom: 1.2em; */
}
.label-p2 {
    color: var(--muted-color);
    /* font-family: Redaction35, Courier, monospace; */
    font-family: Inconsolata, Courier, monospace;
    font-size: 1rem;
    font-weight: 800;
    /* word-spacing: 0em; */
    /* text-align: left; */
    /* text-decoration: solid; */
    /* line-height: 1em; */
    /* font-style: normal; */
    letter-spacing: 0.1rem;
    /* margin-bottom: 1.2em; */
}
.main-h3, h3 {
    color: var(--main-heading-color);
    /* font-family: 'Inconsolata', Courier, monospace; */
    font-family: "Redaction35", Courier, monospace;
    font-size: 1.8em;
}
/* Styling for main paragraphs */
.main-p, p {
    color: var(--main-text-color);
    /* font-family: 'Courier New', Courier, monospace; */
    /* font-family: "Redaction35", Courier, monospace; */
    font-family: 'Inconsolata', Courier, monospace;
    font-size: 1.2em;
    /* font-weight: 0; */
    font-style: normal;
    text-align: left;
    text-decoration: solid;
    /*margin: 1em;*/
    line-height: 1.6rem;
    letter-spacing: 0.02em;
    word-spacing: 0.04em;
    padding-top: 0;
    padding-bottom: 0.8em;
}

.team-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.team-member-div {
    display: flex;
    padding: 40px;
    margin: 30px;
    /* width: 25vw; */
    width: 400px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #334;
    border-radius: 5px;
    box-shadow: 3px 6px #161616;
}
.team-image {
    width: 200px;
    height: 200px;
    background-color: #111;
    background-position: center;
    background-size: cover;
    border-color: #d0d0d0;
    border-color: #454584;
    border-style: solid;
    border-width: 3px;
    border-radius: 90px;
    margin-bottom: 14px;
    box-shadow: 3px 6px #161616;
}

/* Styling for hidden tags meant to be seen only by screen-readers */
.screen-reader, .screen-reader-text {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* MAIN HEADER STYLE <header> */
.site-header {
    position: sticky;
    top: 0;
    z-index: 2;
    /*display: flex;*/
    padding: 0 calc(var(--gap) / 2);
    /* margin: 0 0 var(--gap) 0; */
    margin: 0;
    /* --star-seed: 12345; */
    /* --star-count: 100; */
    /* --star-size-base: 1px; */
    /* --star-color: var(--color-white); */
    border-bottom: 1px solid #676767;
    background-color: #1d1d1df0;
}

.mg-site-header .mg-logo {
    transition: 0s;
    flex: 1;
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mg-logo-image {
    width: 300px;
    height: 4rem;
    background-image: url(../img/mg_home_layer_nametext.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    mix-blend-mode: normal;
    -ms-interpolation-mode: nearest-neighbor;/*IE, only works on <img> tags*/
    image-rendering: crisp-edges;/*Firefox*/
    image-rendering: pixelated;/*Chromium+Safari*/
}

.site-footer {
    display: block;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    height: var(--footer-h);
    flex-direction: row;
    padding: 0 var(--gap);
    /* padding: 0 calc(var(--gap) / 2);
    margin: 0 0 var(--gap) 0; */
    background-color: #303030;
    border-top: 1px solid #676767;
}
.site-footer p {
    /* color: var(--text-color); */
    /*font-family: 'Courier New', Courier, monospace;*/
    font-family: Redaction35, Courier, monospace;
    font-size: 1em;
    font-weight: 100;
    font-style: normal;
    text-align: left;
    text-decoration: solid;
    margin: 1em;
    line-height: 1.5em;
    letter-spacing: 0.16em;
    word-spacing: 0em;
}
.nav-footer {
    position: sticky;
    width: 100%;
    bottom: 0;
    display: flex;
    /* flex: 1; */
    flex-direction: column;
    overflow-x: clip;
    padding-inline: 1px;
    /* justify-content: space-between; */
    /* align-items: top; */
}

/* NAVIGATION STYLES */
nav {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    /* background-color: #fff; */

    /* width: fit-content; */
}
.logo {
    display: flex;
    align-items: center;
}
.logo a {
    cursor: pointer;
}
.logo img {
    width: 300px;
    /* background-image: url(../img/mg_home_layer_gaoler.png); */
    /* background-size: 100px 100x; */
    /* background-color: linear-gradient(#ffffff00, #ffffffff, #ffffff00); */
    /* background-clip: content-box; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* mix-blend-mode: normal; */
    -ms-interpolation-mode: nearest-neighbor;/*IE, only works on <img> tags*/
    image-rendering: crisp-edges;/*Firefox*/
    image-rendering: pixelated;/*Chromium+Safari*/
}
.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
}
.nav-links a {
    display: block;
    padding: 16px 30px;
    /* padding: 2rem 1rem; */
    color: var(--unhover-color);
    background-color: #00000000;
    text-decoration: none;
    font-size: 20px;
    font-family: Redaction50;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    transition: all ease-in-out 60ms;
    cursor: pointer;
}
.nav-links a:hover {
    background-color: var(--hover-bg-color);
    color: var(--hover-color);
}
.nav-links .nav-cta-button {
    padding: 10px 18px;
    margin-left: 16px;
    border: #808080 solid 1px;
    border-radius: 8px;
}
.nav-links .nav-cta-button:hover {
    /* background-color: #714fd8; */
    background-color: var(--hover-bg-color);
    color: var(--hover-color);
}

#site-footer .nav-footer #footer-nav-links li:nth-child(2) {
    box-sizing: border-box;
    border-left: 1px solid #808080;
}
#site-footer .nav-footer #footer-nav-links li:nth-child(3) {
    box-sizing: border-box;
    border-left: 1px solid #808080;
}

.hamburger {
    display: none;
    cursor: pointer;
    width: 34px;
}
.hamburger .bar {
    flex-basis: 100%;
    height: 4px;
    background-color: #808080;
    margin: 3px;
}




.text-rainbow-anim {
    /*font-family:*/
    background-image:linear-gradient(to right, rgb(255, 100, 100),rgb(255, 190, 68)
        ,rgb(255, 255, 70),rgb(86, 255, 86),rgb(117, 158, 255) 
        ,rgb(198, 118, 255),violet, rgb(255, 100, 100));
    /*--c1: #303030;
    background-image:linear-gradient(to right,var(--c1),var(--c1),gold,var(--c1)); 
    */
    background-clip: inherit;
    font-weight: 800;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.1);
    animation: rainbow-animation 800s linear infinite;
}
@keyframes rainbow-animation {
    to {
        background-position: 2000rem;
    }
}

.mg-prose {
    max-width: var(--measure);
}

.prose-border {
    border-width: var(--prose-border-width);
    border-style: solid;
    border-color: var(--prose-border-color);
    padding: 0.1em 2.4em;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.mg-prose p {
    margin: 0 0 1.5rem;
    font-family: 'Inconsolata', Courier, monospace;
    /*font-family: "DotGothic16";*/
    font-size: 1.2em;
    font-weight: 100;
    font-style: normal;
    text-align: left;
    text-decoration: solid;
    /*margin: 1em;*/
    line-height: 1.3em;
    /* letter-spacing: 0.08em; */
    /* word-spacing: 0.06em; */
}


/* Styling for the games list section */
.project-wrapper {
    /* min-width: 60ch; */
    /* background-color: var(--project-wrapper-bg-color); */

    /* padding: 20px 28px; */
    padding: 0;
    margin-top: 50px;
    /* border-color: var(--project-wrapper-border-color); */
    /* border-width: 2px; */
    /* border-radius: 10px; */
    /* border-style: solid; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 50px 50px;
}
.project-poster-wrapper {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    /* object-fit: contain; */
    /* aspect-ratio: 4 / 5.4; */
    /* order: 0; */
    /* width: 50%; */
    /* flex-basis: 400px; */
}
.project-poster {
    width: 400px;
    /* height: 540px; */
    object-fit: contain;
    aspect-ratio: 4 / 5.4;

    display: flex;    
    align-self: center;
    /* flex-shrink: 0; */
    /* flex-basis: 400px; */

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

    background-color: #111;
    border-radius: 5px;
    font-family: Redaction35, Courier, monospace;
    font-size: 140px;
}
.project-elem-wrapper {
    display: flex; flex-direction: column;
    /* order: 1; */
    /* width: 50%; */
    flex-basis: 400px;
    flex-grow: 0.5;
}
.project-description-div {
    padding: 0.5em 0.8em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* min-width: 300px; */
    /* width: 50%; */
    /* height: 90%; */
    flex-grow: 1;
    background-color: #334;
}
.project-data-div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: rgba(0,0,0,0.2);
    padding: 0em 0.8em;
    margin-top: 0.6em;
}
.project-data-div p {
    padding: 0;
    margin: 0.2em;
}
.project-title-text {
    text-shadow: 0.13rem 0.17rem #000;
}
.project-description-text {
    font-size: 1rem;
    font-family: Inconsolatas, Courier, monospace;
    letter-spacing: 0rem;
    padding: 0em 0.5em;
}
.game-divider {
    display: block;
    height: 6px;
    margin: 40px 0px;
    /* width: 400px; */
    background-color:#454564;
    border-radius: 2px;
}

.social-icon {
    --size-xy: 46px;
    cursor: pointer;
    width: var(--size-xy);
    height: var(--size-xy);
    margin: 0px 10px;
    background-color: #9f9f9f;
    /*background-image: url(../img/icon_yt_solid.webp);*/
    background-size: var(--size-xy);
    mask-size: var(--size-xy);
    background-position: center;
    mask-position: center;
    background-repeat: no-repeat;
    mask-repeat: no-repeat;
    /* mask-image: url(../img/mg_home_layer_nametext.png); */
    mix-blend-mode: normal;
    -ms-interpolation-mode: nearest-neighbor;/*IE, only works on <img> tags*/
    image-rendering: crisp-edges;/*Firefox*/
    image-rendering: pixelated;/*Chromium+Safari*/
    transition: all ease-in-out 60ms;
}
.social-icon:hover {
    background-color: #fff;
}

.keep-it-safe {
    width: 300px;
    height: 124px;
    background-image: url(/img/secret-safe.gif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /*align-self: center;*/
}


/* Responsive Design (768px is generic tablet width) */
@media (max-width: 768px) {
    nav {
        flex-wrap: wrap;
    }
    .hamburger {
        display: block;
        /* display: flex; */
        /* flex-wrap: wrap; */
    }
    .logo {
        height: 80px;
    }
    .nav-links {
        display: none;
        flex-direction: column;
        flex-basis: 100%;
        flex-wrap: wrap;
        gap: 0;
    }
    .nav-links li {
        flex-basis: 100%;
    }
    .nav-links li a {
        text-align: center;
        font-size: 24px;
        border-top: 1px solid #808080;
    }
    .nav-links a:hover {
        background-color: var(--hover-bg-color);
        color: var(--hover-color);
    }
    .nav-links .nav-cta-button {
        padding: 30px 16px;
        margin-left: 0;
        border: none;
        border-radius: 0;
        margin-bottom: 20px;
    }
    .nav-links .nav-cta-button:hover {
        background-color: var(--hover-bg-color);
        color: var(--hover-color);
    }
    #menu-toggle:checked ~ .nav-links {
        display: flex;
    }
    .team-list {
        display: flex;
        flex-direction: column;
    }
    .project-wrapper {
        /* display: flex; */
        /* flex-direction: column; */
        /* flex-wrap: wrap; */
        /* flex-basis: 50%; */
        /* flex-basis: content; */
        /* justify-content: center; */
        /* flex-shrink: 1; */
        /* flex-grow: 1; */

        display: flex;
        /* flex-flow: column nowrap; */
        align-items: flex-start;
    
    }
    /* .project-wrapper .project-poster { */
        /* display: block; */
        /* display: flex; */
        /* max-width: 100%; */
        /* object-fit: contain;
        aspect-ratio: 4 / 5.4; */
        /* width: 400px; */
        /* height: 540px; */
        /* align-self: center; */
        /* vertical-align: top; */
        /* justify-self: flex-start; */
    /* } */
    .project-elem-wrapper {
        width: 100%;
        display: block;
    }
}