@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

.colors {
	
--transparency: 0.7;
    --base-col0: 56, 142, 60;
    --base-col1: 211, 47, 47;
    --base-col2: 251, 192, 45;
    --base-col3: 25, 118, 210;
    --base-col4: 123, 31, 162;
    color-scheme: dark;
    --star: 253,188,52;
    --on-green: 38,122,29;
    --green: 84,170,75;
    --chat-bg: 30,31,34;
    --chat-primary: 56, 142, 60;
    --chat-on-bg: 255,255,255;
    --chat-on-primary: 255,255,255;
    --bg: 43,45,49;
    --on-bg: 255,255,255;
    --bb: 30,31,34;
    --on-bb: 255,255,255;
    --srfc: 49,51,56;
    --on-srfc: 255,255,255;
    --primary: 211, 47, 47;
    --on-primary: 255,255,255;
    --primary-dark: 183, 28, 28;
    --on-primary-dark: 255,255,255;
    --primary-light: 229, 115, 115;
    --on-primary-light: 0,0,0;
    --input: 0,0,0;
    --on-input: 255,255,255;
}


.color1>a {
	--bs-link-color: #d03234;
	--bs-link-hover-color: rgb(var(--on-bg));
	text-decoration: none;
}
.color4>a {
	--bs-link-color: #7a1c9e;
	--bs-link-hover-color: rgb(var(--on-bg));
	text-decoration: none;
}
.color3>a {
	--bs-link-color: #2374ce;
	--bs-link-hover-color: rgb(var(--on-bg));
	text-decoration: none;
}
.color5>a {
	--bs-link-color: #3c8e43;
	--bs-link-hover-color: rgb(var(--on-bg));
	text-decoration: none;
}
.color2>a {
	--bs-link-color: #c8cb58;
	--bs-link-hover-color: rgb(var(--on-bg));
	text-decoration: none;
}

.menu-drawer {
	width: 360px;
	background: antiquewhite;		
	position: absolute;
	left: 100px;
	height: 100%;
	display: none;
	z-index: 21;
}

.menu-right {
    order: 1;
    right: 0px;
    left: unset;
}

.drawer-content{
	position: relative;
    height: 100%;
    overflow-y: scroll;
}

@media (min-width: 1100px) {
	.xmenu-drawer {
		flex: 0 0 360px;
		background: antiquewhite;
		position: unset;
	}
}

.bg-secondary {
    --bs-bg-opacity: 0.2;
}
.card {
	--bs-card-bg: rgb(var(--srfc));
}

a {
	--bs-link-color: grey;
	--bs-link-hover-color: rgb(var(--on-bg));
}
.clear{
	clear:both;
}
.floatleft {
	float:left;
	margin-right: 20px;
	margin-bottom: 8px;
	max-width: 100%;
}
.table {
	--bs-body-color: rgb(var(--on-bg));
	--bs-link-color: grey;
	--bs-link-hover-color: rgb(var(--on-bg));
}

.content-center {
    flex-grow: 1;
    background: white;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
}

.content-flow {
    flex-grow: 1;
    background: rgb(var(--bg));
	color: rgb(var(--on-bg));
    display: inline-flex;
    flex-direction: column;
	overflow-y: scroll;
}

body {
	font-family: Outfit;
    padding: 0;
    margin: 0;
	background: rgb(var(--bg));
}

.librebold {
    font-family: "Libre Frannklin", "Helvejtica Neue", helvetica, arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
}
.menu {
    background: rgb(var(--bb));
    flex: 0 0 16vh;
    max-width: 100px;
    display: flex;
	flex-direction: column;
    justify-content: flex-start;
	box-shadow: 0px 0px 4px black;
	z-index: 22;
	font-size: 15px;
}

.shrinked { max-width: 50px; }
.shrinked .icn-text { display:none; }

@media (max-height: 480px) {
.menu {
	font-size: 13px;
}

}
.menu.inner {
	flex: 1;
}

.content {
    flex-grow: 1;
    background: black;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
}
.hei {
height: 100%;
}
.fix{ 
	width: 100%;
	height: 100%;
	align-content: center;
	flex-direction: row;
    object-fit: contain;
}

div#container {
    width: 100%;
    height: 100%;
    display: flex;
	align-items: stretch;
    flex-direction: row;
}

@media (orientation: portrait) {
	.main-logo{
		display:none;
	}
	div#container {
	   flex-direction: column;
	}	
	.menu{
		box-shadow: none;
		border-top: 1px solid gray;
		order:1;
		max-width: unset;
		xheight: 80px;
		flex: 0 0 65px;
		flex-direction: row;
		justify-content: space-evenly;
		font-size:15px
	}
	
	.icon-holder svg {
		height:36px;
	}
	.menu-drawer {
		width: 100%;
		position: absolute;
		top: 0px;
		left: 0px !important;
		right: 0px;
		bottom: 65px;
		height: unset;
	}
}


/* -----------------  Menu & Tab ---------------------- */

.topmenu {
	position: fixed;
	height:100px;
	background: white;
	top: 0px;
	transition: top 0.5s;
	z-index: 20;
}

.scroll-down .topmenu {
	top: -50px;
}

.scroll-up .topmenu {
	top: 0px;
}

/* -----------------  Grid Layout ---------------------- */

.container {
  /* first breakpoint*/
  --w1:1200px;
  --n:8;
  /* second breakpoint*/
  --w2:800px;
  --m:4;
  /* third breakpoint*/
  --w3:400px;
  --p:2;

  xdisplay:grid;
  grid-template-columns:
    repeat(auto-fill,
      minmax(clamp(clamp(clamp(  
            100%/(var(--n) + 1) + 0.1%,
              (var(--w1) - 100vw)*1000,
            100%/(var(--m) + 1) + 0.1%), 
              (var(--w2) - 100vw)*1000,
            100%/(var(--p) + 1) + 0.1%), 
              (var(--w3) - 100vw)*1000,
            100%), 1fr));
  gap:10px;
}
.container > div {
  xmin-height:100px;
  xbackground:white;
}

.head {
  --w1:100;
  --n:1;
  padding-bottom: 10px;
}
.extra {
  /* first breakpoint*/
  --w1:900px;
  --n:8;
  /* second breakpoint*/
  --w2:500px;
  --m:4;
  /* third  breakpoint*/
  --w3:300px;
  --p:2;
  padding:50px;
}
.extra > div {
  background:green;
}



/* nav */
.main-info { height: 50px; }
.main-menu {
	width: 100%;
	overflow-x: scroll;
    white-space: nowrap;
	height: 50px;
	border-bottom: 1px solid gray;
	transition: scrollLeft 0.5s;
	scroll-behavior: smooth;
	text-align: center;
	background: white;
}

.main-menu::-webkit-scrollbar {
  display: none;
}
.main-menu {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.menu-sel {
	display: inline-flex;
    height: 32px;
    padding: 0px 40px 14px 40px;
    justify-content: center;
    align-items: flex-end;
    box-sizing: unset;
    cursor: pointer;
    opacity: 0.7;
}
.menu-line {
	height: 4px;
	background: white;
	width: 100%;
}

.menu-sel.selected {
    opacity: 1;
}

.menu-marker {
	position: relative;
	height: 4px;
	width: 10%;
	left: 0px;
	transition: left 0.5s, width 0.3s;
	border-radius: 29px 29px 0px 0px;
}

.icon-holder {
	text-align: center;
	background: none;
	font-weight: 800;
}
.icon-holder svg {
	padding-top: 25%;
	width:50%;
	display: inline-block;
}
.top-logo {
		display:none;
}
@media (orientation: portrait) {
	.top-logo {
		display:inline-block;
		width: 72px;
    float: left;
    margin-top: 12px;
	}
	.icon-holder svg {
		padding-top: 5px;
	}
	.icon-holder {
		text-align: center;
		height: 80px;
		padding-top: 9px;
		background: none;
		flex: 1;
	}
	#snackbar-container {
		bottom: 64px !important;
}
}




.chat-fixed{
	display: flex;
    order: 1;
    position: unset;
}
.chat-float{
    position: absolute;
	display: block;
}

.menu-chat {
    right: 0px;
    top: 0px;
    width: 330px;
   	min-width: 330px;
    z-index: 20;
    background: #efe;
	height: 100%;
}

.active-game {
	position: fixed;
	z-index:1000;
	width: 244px;
	height: 156px;
	bottom: 20px;
	left: 20px;
	background: black;
	box-shadow: 4px 4px 14px black
}
@media (orientation: portrait) {
	.menu-chat {
		height: calc(100% - 65px);
		width: 100%;
	}
	.chat-fixed{
		display: block;
		position: absolute;
	}
	.active-game {
		position: fixed;
		z-index:1000;
		width: 244px;
		height: 156px;
		bottom: 68px;
		left: 2px;
		background: black;
	}
}

html {
	height: 100%;
}

body {height:100%;}
#wrapper {
height: 100%;
}




@property --posX {
  syntax: '<number>'; /* <- defined as type number for the transition to work */
  initial-value: 0;
  inherits: false;
}
@property --posY {
  syntax: '<number>'; /* <- defined as type number for the transition to work */
  initial-value: 0;
  inherits: false;
}

.logo {
    box-shadow: #a4f95757 0px 0px 30px 4px;
    xheight: 100vh;
    z-index:2;
    margin: 0;
    --x: calc(var(--posX, 0) * 1%);
    --y: calc(var(--posY, 0) * 1%);
    background-image: linear-gradient(229deg, rgb(211 255 215), rgb(255 9 9)), radial-gradient( 90% 100% at calc( 50% + var(--x)) calc( 0% + var(--y)), rgb(200 200 200), rgb(99 59 141)), radial-gradient(100% 100% at calc( 80% - var(--x)) calc( 0% - var(--y)), rgb(250 255 000), rgb(89 175 175)), radial-gradient(150% 108% at calc(100% + var(--x)) calc( 0% + var(--y)), rgb(020 175 125), rgb(0 255 255)), radial-gradient(90% 100% at calc(100% - var(--x)) calc(30% - var(--y)), rgb(255 235 247), rgb(000 200 255)), linear-gradient(60deg, rgb(255 000 000), rgb(120 086 255));
    background-blend-mode: overlay, overlay, difference, difference, difference, normal;
    width: 84vw;
    max-width: 75vh;
    background-size: 100% 100%;
    animation: gradient-animation 16s ease infinite, gradient 7.545s ease infinite;
}

@keyframes gradient-animation {
	0% {
		xbackground-position: 0% 50%;
		--posX: 0;
	}
	50% {
		xbackground-position: 100% 50%;
		--posX: 100;
	}
	100% {
		xbackground-position: 0% 50%;
		--posX: 00;
	}
}
@keyframes gradient {
	0% {
		xbackground-position: 0% 50%;
		--posY: 0;
	}
	50% {
		xbackground-position: 100% 50%;
		--posY: 100;
	}
	100% {
		xbackground-position: 0% 50%;
		--posY: 00;
	}
}

.logo{
	
}
.center{
	display: flex;
    justify-content: center;
    padding-bottom: 110px;
}
.main{
	display: flex;
	flex-direction: column;
    justify-content: center;
	height: 100vh;
}
.padder{
flex: 1 1;
background: rgb(var(--bg));
}

.logo-right {
	padding: 20px;
	display: flex;
    align-items: center;
	gap:20px;
	justify-content: right;
}
.lead-btn {
border: 2px solid white;
    border-radius: 26px;
    padding: 14px 32px;
    font-family: arial;
    text-decoration: none;
    color: white;
    font-weight: 600;
	}

#page-content-wrapper {
	display:block;
	z-index:2;
}