@font-face {

    font-family: 'Renogare_site';
    
    src: 
        url('/fonts/renogare/Renogare-Regular.otf') format("opentype"),
        url('/fonts/renogare/Renogare-Regular.eot'),
        url('/fonts/renogare/Renogare-Regular.eot?#iefix') format('embedded-opentype'),
        url('/fonts/renogare/Renogare-Regular.woff2') format('woff2'),
        url('/fonts/renogare/Renogare-Regular.woff') format('woff'),
        url('/fonts/renogare/Renogare-Regular.ttf') format('truetype'),
        url('/fonts/Renogare/Renogare-Regular.svg#Renogare-Regular') format('svg');

    font-weight: normal;
    font-style: normal;
    font-display: swap;

}

@font-face{
    font-family: 'Inconsolata_site';
    src: url('/fonts/inconsolata/Inconsolata-Regular.eot');
    src: url('/fonts/inconsolata/Inconsolata-Regular.eot?#iefix') format('embedded-opentype'),
        url('/fonts/inconsolata/Inconsolata-Regular.woff2') format('woff2'),
        url('/fonts/inconsolata/Inconsolata-Regular.woff') format('woff'),
        url('/fonts/inconsolata/Inconsolata-Regular.ttf') format('truetype'),
        url('/fonts/inconsolata/Inconsolata-Regular.svg#Inconsolata-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;  
}

:root {

    --color-white: #fff9f2;
    --color-gray-l: #c2c9cc;
    --color-gray: #8a9399;
    --color-gray-d: #4c5059;
    --color-gray-dd: #2b2d33;
    --color-black-alt: #0e1112;

    --color-bberry-ll: #4c4f8a;
    --color-bberry-l: #2c2e5e;
    --color-bberry: #2a1e43;
    --color-bberry-d: #1e1434;
    --color-bberry-dd: #1e1434;

    --color-purple-ll: #941bf3;
    --color-purple-l: #6e0bcd;
    --color-purple: #6016b2;
    --color-purple-d: #4b1e8b;

    --color-blue-ll: #66ccff;
    --color-blue-l: #2e8ae6;
    --color-blue: #1f4799;
    --color-blue-d: #17204d;

    --color-green-ll: #8cff19;
    --color-green-l: #8cff19;
    --color-green: #0f9932;
    --color-green-d: #0f4d38;



}

body {
    background: black;
    margin: auto;
    overflow-x: hidden;
    color: white;
    width:100vw;
}

p,a {
    color: var(--color-white);
    font-family: "Inconsolata_site", "arial";
    font-size: 1em;
}

a {
    color: var(--color-blue-ll);
}

a:hover{
    color: var(--color-blue-ll);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-white);
    font-family: 'Renogare_site', "Times New Roman";
}

.patternBackground {

    background: url('../Images/Backgrounds/backPattern.png');
    background-repeat: repeat;
    background-size:10rem;

    position: fixed;
    top: 0px;
    left: 0px;
    width:100vw;
    height:100vh;

    opacity: 0.5;
    z-index: -100;
    
}

@keyframes patternScroll {
    
}


.WIP-container{
    
    font-size:1.2em;
    text-align: center;
    justify-content: center;
    align-items: center;
 
    width:98%;

   
    
    margin-bottom:2rem;
    animation-name:fadein;
    animation-duration:0.3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;

    min-height: 76vh;    

}
.WIP-container>hr{
    width:70%;
}

.WIP-container>h2{
    font-size:3rem;
}

.videoContainer{
    box-shadow:0px 0px 0px 3px white; margin-top:5px;
    min-width: 100%;
    width:560px; height:315px;  aspect-ratio: 16 / 9;
}

@media screen and (max-width:558px){
.videoContainer{
        width:280px;
        height:187px;
      
    }
}

@media screen and (max-width:550px){


    .WIP-container>h2{
        font-size:2rem;
    }   
    .WIP-container>h3{
        font-size:1rem;
    }   
    .WIP-container>p{
        font-size:1rem;
        width:70vw !important;
        margin: 0 auto;
    }
    .WIP-container>#wipImg1{
        display:none;
    }
    .WIP-container>#wipImg2{
        display:none;
    }

    .wipBtnCt>p{
        font-size:1rem !important;
        width:70vw !important;
        margin: 0 auto;
    }

    .videoContainer{
        width:280px;
        height:187px;
      
    }
}



#wipImg1{

    z-index:-1;
    height:150%;
    max-height:800px;
    position:absolute;
    top:-12vh;
    left:-25vw;
    opacity:0.3;

} 
#wipImg2{

    z-index:-1;
    height:150%;
    max-height:800px;
    position:absolute;
    top:-12vh;
    right:-25vw;
    
    opacity:0.3;

} 

.WIP-container>.wipBtnCt{
    
    width:80%;;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;

}

.wipBtnCt>button{
    margin:1rem;
    border:0;
    font-family: 'Inconsolata_site';
    color:white;
    background-color: var(--color-black-alt);
    font-size:2rem;
    padding:10px;
    font-weight: bold;
    box-shadow: 0px 0px 0px 3px white;
    position:relative;
    top:0;
    transition:all 0.05s none;
    overflow: hidden; 
}

.wipBtnCt>button:hover{
    background-color: var(--color-white);
    color:black;
    cursor: pointer;
}

.wipBtnCt>button:active{
    top:2px;
}

#covered{
    padding:0;
    transition:all 0.2s;
   width:400px;
   text-align: center;
   display:flex;
   align-items:center;
   justify-content:center;
}
#covered>img{
    transition:all 0.2s;
}

#covered>img:hover{
    filter:brightness(1.2);
   
}

#covered>a{
    
    width:100%; height:100%;
    
}



@keyframes fadein{

    0%,30%{ opacity: 0}
    100% { opacity:1}

}

.SNCover{
    background:red;
    width:200px;
    height:400px;
    background-image: url("Assets/Images/coverArt1Sneaka.png");
    
}

#demoFeatures{

    margin:0;

}

#demoFeatures > li > p{
    margin:0.5rem;
    text-align: left;
}



#gameScreens {
    margin: 1rem;
    border: 4px solid var(--color-white);
    z-index:0;
    transition: all 0.1s ease-in-out;
    max-width: 80vw;
}

#gameScreens:hover{
    transform:scale(1.1);
    z-index:99;
    box-shadow:0 0 10px 10px var(--color-blue-ll);
    border: 4px solid var(--color-blue-ll);
    cursor: pointer;
    
}

/*----------------------------------------------------------------
   Modal
*/

.modal {
    z-index: 100000;
    background: #0E111286;


    position: fixed;
    left: 0;
    top: 0;

    min-width: 100%;
    min-height: 100%;
    width:100vw;

    overflow-y: initial !important;
    animation-name: modal-fadeout !important;
    animation-duration: 0.1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    scroll-behavior: smooth;

}

.modal-closed {
    display: none !important;
}

.modal-active {
    width:100vw !important;
    display: block;
    animation-name: modal-fadein !important;
    animation-duration: .1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

@keyframes modal-fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

@keyframes modal-fadeout {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    99% {
        opacity: 0;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0);
    }
}

:root {
    --navbar-topmargin: 20px;
    --navbar-padding: 10px;
}

.modal-container {

    height: 100vh;
    overflow-y: auto;
    scroll-behavior: smooth;

}

.modal-body {


   width: 60vw;

    max-width: 100rem;

    height: fit-content;


    margin: 20px auto;
    position: relative;


    background: var(--color-black-alt);
    color: white;

    box-shadow: 0 0 0 4px white;



    animation-name: modal-content-fadeout !important;
    animation-duration: .2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;


    transition: all 0.2s;
    scroll-behavior: smooth;

}
.modal-body:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6vh 6vh 6vh 0;
    border-color: var(--color-white) transparent transparent transparent;
    left: 0;
    top: 0;
    position: absolute;
  }

@media only screen and (max-width: 650px) {

    .modal-body {
        width: 80vw;
    }

}


@media only screen and (max-width: 300px) {

    .modal-body {
        width: 90vw;
    }

}

.modal-body-center {
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;
}

.modal-body-active {
    animation-name: modal-content-fadein !important;
    animation-duration: .2s;
    animation-timing-function: var(--animation-bounce-curve);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

@keyframes modal-content-fadeout {
    from {
        transform: scale(1);
        filter: opacity(1);
    }

    to {
        transform: scale(1.5);
        filter: opacity(0);
    }
}

@keyframes modal-content-fadein {
    from {
        transform: translateY(100px) scale(1);
    }

    to {
        transform: translateY(0px) scale(1);

        box-shadow: -10px 10px 0px 0px rgba(0, 0, 0, 0.);
    }
}

.gameScreenshot {
    width:76%; height:auto; box-shadow:0 0 0 4px white; image-rendering: pixelated;
}

.modal-close-x {
    color: white;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    transform: scale(1.5);
    right: 10px;
    top: 7.5px;
    user-select: none;
}

.modal-close-x:hover {
    cursor: pointer;
}

.modal>h1 {
    margin: 0;
}



.modal-header {
    border-bottom: 3px solid var(--color-black);
    padding: calc( var(--navbar-padding) + 1px);
}

.modal-header>h1 {
    margin: 0;
    margin-top: 15px;
}

.modal-content {

    border-bottom: 3px solid var(--color-black);
    padding: var(--navbar-padding);
}

.modal-footer {

    padding: var(--navbar-padding);
}

.modal-img {
    width: 90%;
    max-width: 800px;
}

.onmodal {
    overflow-y: hidden;
}

.main-header{
    user-select: none;color:white; text-align:center; margin:10px auto; font-size:2.5em;
}

.modal-art-img{
    width: 69%;
    margin: 1rem 0;

    box-shadow: 0px 0px 20px black;
}

.modal-art-video{
    width: 69%;
    margin:1rem 0;
    box-shadow: 0px 0px 20px black;
}

.modal-art-img:hover{
    cursor:pointer;
}


.modal-maintext {
    text-align: center;
    font-family: 'Inconsolata_site';
    margin-bottom: 0;
    font-size: 1.25em;
}

.blog-container {
    width:100%;
    max-width: 1920px;
    margin: 0 auto;
    align-items: center;
    justify-content:center;
   
}

.blog-button {
    
   user-select: none;
    display:flex;
    background: rgba(0, 0, 0, 0.429);
    width:100%;
    height: 45vh;
    max-width: 60rem;
    max-height: 19rem;
    box-shadow: 0 0 0 2px var(--color-white);
    margin: 0 auto;
   
    overflow: hidden;
    justify-content:space-around;
    transition: all 0.18s;
    margin-top:3rem;
    position:relative;
    top: 0px;
}

.blog-button:active {
    top: 4px;
}

.blog-image{
    transition: all 0.18s;
   height:90%;

   position: absolute;
   left:2%;
   top:2%;
}

.blog-text{
    text-align: right;
    
    width:60%;
    position: absolute;
    right:2%;
}


.blog-date{
 position: absolute; 
    bottom: 2%;
    right: 2%; 
}

.blog-hover-triangle{
 
    height:12%;
    position:absolute;
    left:0;
    top:0;
    transition: all 0.1s;
    transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1);

}

.blog-button:hover{
    background: rgba(66, 66, 66, 0.429);
    box-shadow: 0 0 0 4px var(--color-white);    
}
.blog-header{
    color: var(--color-blue-ll);
}
.blog-button:hover > .blog-hover-triangle{
    height:20%;
}

@media only screen and (max-width: 710px) {
    .blog-image{
        height:80%;
        filter:opacity(0.65)
    }

    .blog-text, .blog-date{
        font-size: 1rem;
    }

    .blog-button{
        height:35vh;
    }
}

@media only screen and (max-width: 980px) {
    .blog-button{
        width:90%;
        height:40vh
    }
}

@media only screen and (max-width: 427px) {

    .blog-button{
        width:80%;
        height:25vh;
    }

    .blog-text, .blog-date{
        font-size: 0.8rem;
        width:60%;
    }

    .blog-date{
        scale:0;
    }

    .blog-image{
        filter:opacity(0.7)
    }
}

@media only screen and (max-width: 350px) {

    .blog-button{
        height:20vh;
    }

    .blog-image{
        height:80%;
        top:3%;
        left:4%
    }
}