@import url('/styles/particles.css');
:root {
  --color-bg: linear-gradient(180deg, #10171C 0%, #1F1B35 50%, #10171C 100);
  --color-1: #10171C;
  --color-shirthole: #9a96ab;
  --color-topnavborder: #1F1B35;
  --color-2: #676b7e;
  --font1: #e6e3f2;
  --font2: white;
}
/* ---- reset ---- */ body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  background-size: width;
  background-position: 50% 50%;
  top: 0;
  left: 0;
  z-index: -999;
}
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
  body{
    background:  #020619;/*#242933linear-gradient(0deg, black 2%, #23103d 50%, black 98%)*/;
    margin: 0;
    color: #ffffff;

  }
html {
  height: 100%;
  width: 100%;
}
.topnavbar{
  backdrop-filter: blur(10px) brightness(0.3);
  height: 60px;
  width: 50vw;
  position: sticky;
  top: 1vw;
  z-index: 1001;
  opacity: 0.9;
  left: 25vw;
  box-shadow: 0px 0px 6px 6px #1530b7;
  border-radius: 30px;
}
.topnavitem{
  margin: 13px;
  display: inline-block;
  float: right;
  height: 32px;
  background-color: #020619;
  border-radius: 10px;
  width: 96px;
  text-align: center;
  justify-content: center;
  transition: 0.2s ease;
}
.topnavitem:hover{
  background-color: #0079CF;
}
.topnavitem:hover .topnavtext{
  color: #020619
}
.marginright20px{
  margin-right: 20px;
}
.topnavtext{
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 22px;
  text-decoration: none;
  height: 56px;
  transition: 0.2s ease;
  position: relative;
  top: 3px;
}
.button{
  background: #161A29;
  height: 3.13vw;
  width: 5.08vw;
 border-radius: 10px;
  border: 1px solid #424552;
}
.gameframe_game{
  height: 7.813vw;
  width: 13.281vw;
  overflow: hidden;
  margin: 0.781vw;
  border-radius: 0.586vw;
  display: inline-block;
  transition: 0.3s ease;
  position: relative;
  text-align: center;
}
.gameframe_game:hover{
  margin-top: 0px;
  margin-bottom: 1.563vw;
  box-shadow: 0px 2px 4px 6px #3352f0;
}
.gameframe_game img{
  width: 100%;
  height: 150%;
  position: relative;
  transition: 0.3s ease;
  background-color: #01050A;
}
.gameframe_game:hover img{
  filter: brightness(0.6) blur(2px);

}
#gamesMain{
  text-align: center;
}
#main{
  height: calc(100% - 60px);
  overflow-y: scroll;
  position: absolute;
  top: 60px;
  overflow: scroll;
  overflow-x: hidden;
  width: 100%;
  z-index: 999;
}
.gameframe_game h1 {
  bottom: 0.586vw;
  font-size: 1vw; 
  opacity: 0;
  transition: 0.3s ease;
  position: absolute;
  font-family: "Titillium Web", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  text-align: center;
  width: 80%;
  margin: 10%;
}
.gameframe_game:hover h1 {
  opacity: 1;
}
.game_iframe{
  width: 48vw;
  height: 27vw;
  z-index: 999;
  display: inline-block;
  position: relative;
  top: -3vw;
  border: none;/*3px solid #424552;*/
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.gamecont{
  text-align: center;
  height: 30vw;
  /*margin-left: 26vw;
  margin-right: 26vw;*/
}
.gig{
  display: inline-block;
  background-color: black;
  width: 20vw;
  height: 30vw;
  max-width: 300px;
  border: none;
  border-radius: 10px;
  margin: 3px;
}
.inline{
  display: inline-block;
}
.gameframecontainer{
  height: 27vw;
  display: inline-block;
}
button{
  z-index: 1000;
}
.gameUIbutton{
  float: right;
  height: 1.3674375vw;
  width: 1.3674375vw;
  padding: 10px;
  padding-right: 15px;
  border-radius: 6px;
  transition-duration: 0.125s;
  margin-top: 5px;
  display: inline;
}
.gameUIbutton:hover{
float: right;
height: 1.7578125vw;
width: 1.7578125vw;
padding: 5px;
padding-right: 10px;
border-radius: 6px;

}
.gameUIbar{
  position: relative;
  top: -3vw;
  backdrop-filter: blur(10px) brightness(2.1);
  width: 48vw;
  height: 5vh;
  white-space: nowrap;
  /*border: 3px solid #424552;*/
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.gmsName {
  position: relative;
  float: left;
  top: -11px;
  margin-left: 10px;
  margin-bottom: 0;
  /*text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, 
               -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;*/
  width: calc(50vw - 140px);
  color: var(--main-color);
  font-size: 3vh;
  overflow-y: hidden;
  -ms-overflow-style: none;  
  scrollbar-width: none;
  height: 1.15em;
}
.main{
  margin-top: 60px;
}
.clickthrough{
  pointer-events: none;
}
.title{
height: 25vw;
}
.logoTop{
  float: left; height: 40px; margin: 9px; margin-left: 23px;
  backdrop-filter: brightness(2.9);
  width:30px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 20px;
}

.getStarted img{
  height: 30px;
  position: relative;
  top: 2px;
}
  .getStartedText{
    position: relative;
    top: -5px;
    color: #001d66;
  }


#searchInput{
  margin: 1em;
  height: 2vw;
  width: 10vw;
  border-radius: 1vw;
  padding-left: 1vw;
  padding-right: 1vw;
  transition: 0.6s ease;
  border: none;
}
#searchInput:hover{
  background-color: #242933;
  scale: 1.03;
  width: 15vw;
  color: white;
  box-shadow: 0px 0px 3px 3px #1530b7;
}
#searchInput:focus{
  background-color: #242933;
  scale: 1.03;
  width: 15vw;
  outline: none;
  color: white;
  box-shadow: 0px 0px 3px 3px #1530b7;
}