@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
.video-container { background-color: black; }

#tutorial hr { margin: 4rem; opacity: .5; }

#tutorial img { max-height: 50vh; }

#tutorial ol { background-color: #161525; border-radius: 1rem; }

#tutorial li { padding-top: .5rem; padding-bottom: .5rem; }

code { background: black; font-size: 1rem; }

a { color: #2096dd; text-decoration: overline; transition: all .2s; }

a:visited { color: #f897ba; }

a:hover { color: #ff7d1f; cursor: pointer; }

button:hover { cursor: pointer; }

body { background: #080933; color: white; margin: 0; width: 100vw; }

.section-title { font-weight: bold; font-size: 2rem; margin: auto; text-align: left; width: 60vw; max-width: 60vh; border-bottom: #100354 solid 0.5rem; }

html { width: 100vw; margin: 0; overflow-x: hidden; font-family: "Poppins", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

.logo-container { background: black; }

.nav-bar { background: linear-gradient(180deg, black, transparent); }

.video-container { text-align: center; margin: auto; width: 100vw; position: absolute; top: 0; }

.logo-container .hidden { display: none; height: 0; }

.logo-container, .video-container { text-align: center; justify-content: center; display: flex; align-items: center; height: 30vh; }

#logo-image { text-align: center; font-size: 10vh; margin: 1vh; top: 5vh; z-index: 2; height: 20vh; max-width: calc( 100% - 4rem); }

#logo-video { height: 30vh; pointer-events: none; display: none; }

#logo-video::-webkit-media-controls-panel { display: none !important; opacity: 1 !important; }

@keyframes end-video { from { transform: scale(1);
    opacity: 1; }
  to { transform: scale(0.7);
    opacity: 0; } }

@keyframes end-video-reverse { from { transform: scale(0.7);
    opacity: 0; }
  to { transform: scale(1);
    opacity: 1; } }

@keyframes game-card-load { from { transform: rotateX(30deg) rotateY(30deg) scale(0.6);
    opacity: 0; }
  to { transform: rotateY(0deg);
    opacity: 1; } }

.end-video-animation { animation-name: end-video; animation-duration: 1s; animation-timing-function: ease-in; animation-fill-mode: forwards; }

.end-video-animation-reverse { animation-name: end-video-reverse; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards; }

iframe { overflow: hidden; }

.game-container { text-align: center; margin: auto; width: fit-content; background-color: #100354; }

.game-container button { display: block; margin: auto; text-decoration: none; border: none; background-color: #100354; font-weight: bold; color: #f897ba; font-size: 1.5rem; border-left: solid white 1px; border-right: solid white 1px; }

.game-container button:hover { color: #ff7d1f; }

.grid-container { grid-template-columns: auto auto auto; display: grid; padding: 1rem; width: max-content; margin: auto; }

.game-title { text-align: center; display: block; margin: auto; margin-bottom: 1rem; margin-top: 1rem; max-width: 100%; height: 20vh; font-size: 5vh; color: white; filter: drop-shadow(5px 5px 2rem rgba(1, 1, 1, 0.5)) drop-shadow(0 0 2px white); }

.game-title.invert { filter: invert(1) drop-shadow(5px 5px 2rem rgba(1, 1, 1, 0.5)) drop-shadow(0 0 2px white); }

.development_status { width: fit-content; padding: .5rem; margin: .5rem; border-radius: 1rem; color: black; font-weight: 900; }

.status_red { background-color: red; }

.status_yellow { background-color: yellow; }

.status_green { background-color: green; }

.grid-item { margin: 1vw; width: 20vw; height: 20vw; max-width: 20vh; max-height: 20vh; }

.grid-item a { color: white; }

.landing-page { text-align: center; }

.nav-bar { list-style-type: none; margin: 0; padding: 0; text-align: center; }

.nav-bar li { text-align: center; display: inline; vertical-align: middle; color: white; }

.nav-bar li .nav-logo { transition: all .5s; transform: scale(1.0001); }

.nav-bar li:hover .nav-logo { transform: scale(1.1); }

.nav-logo { width: 6vh; height: 6vh; }

.project-container { max-width: 1080px; width: calc( 100% - 6rem); margin: auto; padding: 1rem; border: #2096dd 2px solid; margin-top: 2rem; margin-bottom: 5rem; border-radius: 1rem; }

.mySlides { display: none; }

.float-container { padding: 0; margin: 0; overflow-x: hidden; display: flex; flex-grow: 1; position: relative; }

.scrollable-content-wrapper { position: absolute; overflow: auto; }

.scrollable-content-wrapper::-webkit-scrollbar { display: none; }

.image-slides { width: 90%; margin: 0; font-size: 0; margin-left: 10%; }

.slide-select { width: 10%; background-color: #100354; margin: 0; padding: 0; font-size: 0; }

.float-container::-webkit-scrollbar { display: none; }

.slide-select img { width: 100%; margin: 0; padding: 0; cursor: pointer; }

.slide-image { width: 100%; }

.slideshow { text-align: center; }

.slideshow button { width: 5vh; height: 5vh; color: white; background-color: #2096dd; border: none; }

.slideshow button:hover { background-color: #ff7d1f; }

#game-carousel { width: 100%; /* position:absolute; */ }

.card-container { perspective-origin: 50% 50%; perspective: 100vw; width: 100%; height: 100%; position: relative; -webkit-transition: -webkit-filter 500ms linear; margin: 0; z-index: 30; animation-duration: .5s; animation-timing-function: ease-out; animation-fill-mode: forwards; animation-name: game-card-load; transform: rotateY(0deg); }

.game-logo { width: 60%; margin: auto; }

.img-center { width: 100%; margin: auto; position: absolute; text-align: center; font-weight: bold; top: 50%; font-size: 2vh; -ms-transform: translateY(-50%); transform: translateY(-50%); }

.img-center div { width: 90%; margin: auto; }

.gamecard { width: 100%; height: 100%; /* width:50%; */ /* max-width:50rem; */ /* height:100%; */ /* height: calc( 65vh - 2rem ); */ /* max-height:32rem; */ margin: 0; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 1rem; position: relative; transition: transform .5s; box-shadow: inset 0px 0px 8px 1px white; overflow: hidden; border: 0; background-color: #1e1e1e; transform: rotateX(0deg) rotateY(0deg); }

.card-container:hover .gamecard { transform: rotateX(20deg) rotateY(20deg) scale(1); filter: brightness(110%); }

.gloss { position: absolute; pointer-events: none; width: 70%; height: 70%; mix-blend-mode: overlay; opacity: 1; will-change: transform; transition: transform .5s; transform: translateY(-100%) translateX(60%); }

.card-container:hover .gloss.g1 { transform: translateY(0%) translateX(10%); }

.card-container:hover .gloss.g2 { transform: translateY(-20%) translateX(-30%); }

.gloss.g2 { background: radial-gradient(circle farthest-corner at 50% 50%, white 10%, rgba(255, 255, 255, 0) 40%); }

.gloss.g1 { background: radial-gradient(circle farthest-corner at 50% 50%, white 20%, rgba(255, 255, 255, 0) 60%); }

/* background-color:rgba(255,255,255,.8); */

/*# sourceMappingURL=main.css.map */