:root {
    --black: 0 0 0;
    --camo-100: 215 224 204;
    --camo-200: 195 212 165;
    --camo-300: 155 168 133;
    --camo-400: 117 131 93;
    --camo-500: 64 72 51;
    --camo-600: 37 43 27;
    --camo-700: 17 20 12;
    --gray-200: 225 225 225;
    --gray-300: 217 217 217;
    --gray-400: 201 201 201;
    --gray-500: 168 168 168;
    --gray-600: 139 139 139;
    --gray-700: 100 100 100;
    --gray-800: 71 71 71;
    --gray-900: 45 45 45;
    --lime-300: 152 221 40;
    --mars-100: 244 152 123;
    --mars-300: 237 78 29;
    --mars-400: 197 59 16;
    --white: 255 255 255;
    --yellow-100: 252 253 199;
    --yellow-200: 247 247 127;
    --yellow-300: 252 252 3;
    --yellow-400: 226 219 3;
    --yellow-500: 183 178 31;
    --yellow-600: 123 118 56;
    --yellow-700: 89 85 34;
	--orange-300: 221 173 40;
}

* {
	box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
}

body {
	background:black;
	color: rgb(var(--orange-300));
	padding: 1em;

	cursor: url("/img/X9-32.png"), auto;
}

img {
	object-fit:contain;
	min-height:0px;
}

#unity-logo { 
    left: 17.5%;
    bottom: 100%; 
	width: 256px; 
	height: 276px; 
	background-image: url('Orange Haus Labs White 256.png');
	background-size : contain;
	background-repeat : no-repeat;
	background-position: center; 
}

.space-mono-regular {
	font-family: "Space Mono", monospace;
	font-optical-sizing: auto;
}

.automargin {
	margin:0 auto;
}

.subtitle {
	font-size: 1.5em;
	font-weight: bold;
}

a {
	font-size: 1.25em;
	font-weight: 500;
	text-decoration: none;

	color:rgb(var(--orange-300));
	cursor: url("/img/X9Glow-32.png"), auto;
}

a:visited, a:focus { text-decoration: none; color:rgb(var(--orange-300)); }
a:hover { text-decoration: none; color:rgb(var(--yellow-300)); }
a:active { text-decoration: none; color:rgb(var(--yellow-500));}

.flex {
	display: flex;
}

.row {
	flex-direction: row;
}

.column {
	flex-direction: column;
}

.centertext {
	text-align: center;
}

.fitcontent {
	width: fit-content;
	height: fit-content;
}

.crosscenter {
	align-items: center;
}

.medpad {
	padding: .5em;
}

.largepad {
	padding: 1em;
}

.xlpad {
	padding: 2em;
}

.medgap {
	gap: .5em;
}

.largegap {
	gap: 1em;
}

.xlgap {
	gap: 2em;
}

.gap-100 {
	gap: 100px;
}

.margin-top-4e {
	margin-top: 4em;
}

.f {
	display: flex;
	flex-direction: row;
	-webkit-box-align: center;
	align-items: center;
	justify-content: space-between;
	/*gap: 33%;*/
}

.shimmer {
	-webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
	background-repeat: no-repeat;
	animation: shimmer 15s infinite;
  }
  
  @keyframes shimmer {
	0% {-webkit-mask-position:right}
	40% {-webkit-mask-position:right}
	50% {-webkit-mask-position:left}
	90% {-webkit-mask-position:left}
	100% {-webkit-mask-position:right}
  }

  .backshim {
	-webkit-mask: radial-gradient(circle at 50%, rgba(0,0,0,1), transparent 50%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 75%);
	/*linear-gradient(-60deg,rgba(0, 0, 0, 1) 0%,transparent 30%, rgba(0,0,0,.2) 35%,transparent 40%,rgba(0,0,0,.1) 50%, transparent 57%, rgba(0,0,0,.3) 63%, transparent 66%, rgba(0,0,0,.55) 80%, transparent 91%);*/
	/*linear-gradient(0deg, #c8cc1b, #9a9d15, #494b0a, #959912, #bcc115, #d5db18, #a8ac18, #3c3e09);*/

	/*-webkit-mask-position: 50% 0%;*/
	/**/
	-webkit-mask-position:0% 0%;
	-webkit-mask-size: 100% 100%;
	

	background-repeat: no-repeat;

	animation-duration: 7.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: backshimmer;
	animation-fill-mode: forwards;
	animation-timing-function: linear;

	background-color:rgb(var(--orange-300));
  }
  
  @keyframes backshimmer {
    50%{
		-webkit-mask-size: 125% 125%;
		-webkit-mask-position:62.5% 62.5%;
	}
    100%{-webkit-mask-size: 100% 100%;}

	/*
	0%{-webkit-mask-position:50% 0%;}
	100%{-webkit-mask-position:left;}
	*/
  }

  .fullsize {
	width: 100%;
	height: 100%;
  }

/* CSS */
.button-85 {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.glow {
	position: relative;
	z-index: 0;
}

.button-85:before, .glow:before {
  content: "";
  background: linear-gradient(
    45deg,
	rgb(var(--orange-300)),
	rgb(var(--yellow-300)),
	rgb(var(--mars-300)),
	transparent,
	rgb(var(--orange-300)),
	rgb(var(--yellow-300)),
	transparent,
	rgb(var(--orange-300)),
	rgb(var(--yellow-500)),
	White,
	rgb(var(--yellow-700)),
	transparent,
	rgb(var(--orange-300))
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 60s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-85:after, .glow:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}

.box {
	width: 300px;
	height: 300px;

	background-color: transparent;

	border: 1px solid black;
	border-radius:1em;

	position: absolute;
}
  
.subbox {	
	left: calc(var(--n) * 10px);
  	top: calc( var(--n) * 10px );
}

.center-box {
	text-align:center;
	display:flex;
	justify-content:center;
	align-items: center;
}

.borderglow {
	animation-name: borderglow;
	animation-duration: 22s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes borderglow {
	0%{
		border-color:black;
	}
	1% {
		border-color: rgb(var(--mars-300));
	}
	2% {
		border-color: rgb(var(--orange-300));
	}
	3% {
		border-color: rgb(var(--yellow-300));
	}
	4% {
		border-color: rgb(var(--orange-300));
	}
	5% {
		border-color: rgb(var(--mars-300));
	}
	8% {
		border-color:black; 
	}
	100%{
		border-color:black;
	}
}

.boxshift {
	animation-name: boxshift;
	animation-duration: 12.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes boxshift {
	0% {
		transform: translate(10px, 10px);
	}
	50% {
		transform: translate(-10px, 10px);
	}
	100% {
		transform: translate(10px, 10px);
	}
}

.boxroll {
	animation-name: boxroll;
	animation-duration: 12.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes boxroll {
	0% {
		transform: rotate(0deg);
	}
	79.5% {
		transform: rotate(360deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.animatedbox{
	animation-name: borderglow, boxroll;
	animation-duration: 22s, 88s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay:calc(var(--n) * 2000ms);
}

.centerabs {
	top:37.5%;
	left:37.5%;
}

.container {
	position: relative;
	width:calc(var(--n) * 10px + 300px);
	height:calc(var(--n) * 10px + 300px);
}

.polybox{
	position: relative;

	width: 100%;
	margin: .35em;

	background-color: rgb(26, 28, 25);

	clip-path: polygon(0px 16px, 16px 0px, 73.5px 0px, 131px 0px, 188.5px 0px, 246px 0px, 303.5px 0px, 309.553px 4px, 412.447px 4px, 418.5px 0px, calc(100% - 16px) 0px, calc(100% + 0px) 16px, calc(100% + 0px) calc(100% - 16px), calc(100% - 16px) calc(100% + 0px), calc(100% - 64.421px) calc(100% + 0px), calc(100% - 70.474px) calc(100% - 4px), 70.4737px calc(100% - 4px), 64.4211px calc(100% + 0px), 16px calc(100% + 0px), 0px calc(100% - 16px), 0px 244px, 4px 235.364px, 4px 81.6364px, 0px 73px, 0px 16px);	
}

.polyboxunderlay {
	display: flex;

	width: 100%;

	background-color: rgb(var(--orange-300));

	clip-path: polygon(0px 16px, 16px 0px, 73.5px 0px, 131px 0px, 188.5px 0px, 246px 0px, 303.5px 0px, 309.553px 4px, 412.447px 4px, 418.5px 0px, calc(100% - 16px) 0px, calc(100% + 0px) 16px, calc(100% + 0px) calc(100% - 16px), calc(100% - 16px) calc(100% + 0px), calc(100% - 64.421px) calc(100% + 0px), calc(100% - 70.474px) calc(100% - 4px), 70.4737px calc(100% - 4px), 64.4211px calc(100% + 0px), 16px calc(100% + 0px), 0px calc(100% - 16px), 0px 244px, 4px 235.364px, 4px 81.6364px, 0px 73px, 0px 16px);	
}

.gradienttext {
	background-image: linear-gradient(45deg, rgb(var(--yellow-300)), rgb(var(--orange-300)));
	color: transparent;
	background-clip: text;
}

.flex-fill {
    display: flex;
    flex: 1 1 auto;
    min-height:0px;
    min-width:0px;
}

/* width */
::-webkit-scrollbar {
width: 1em;
}

/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgb(var(--yellow-300)); 
border-radius: .5em;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(var(--orange-300)); 
border-radius: .5em;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(var(--yellow-300)); 
}

body[data-view="home"] div#content > div#presalead,
body[data-view="presale"] div#content > div#presale,
body[data-view="swap"] div#content > div#swap,
body[data-view="game"] div#content > div#game {
	display: unset;
}

body[data-view="home"] div#content > div:not(#presalead),
body[data-view="presale"] div#content > div:not(#presale),
body[data-view="swap"] div#content > div:not(#swap),
body[data-view="game"] div#content > div:not(#game),
body[data-view="game"] #blastlogo {
	display: none;
}

.glowborder {
	position:relative;

	color: rgb(var(--yellow-300));
	text-shadow: 0 0 0 .25em rgb(var(--yellow-300));

	padding: 0.35em 1em;

	border: 0.15em solid rgb(var(--yellow-300));
	border-radius: 0.45em;

	-webkit-box-shadow: inset 0px 0px 0.5em 0px rgb(var(--orange-300)),
								0px 0px 0.5em 0px rgb(var(--orange-300));
	-moz-box-shadow: inset 0px 0px 0.5em 0px rgb(var(--orange-300)),
							0px 0px 0.5em 0px rgb(var(--orange-300));
	box-shadow: inset 0px 0px 0.5em 0px rgb(var(--orange-300)),
							0px 0px 0.5em 0px rgb(var(--orange-300));

	animation: border-flicker 6s linear infinite;
}
  
.glowborder:hover {
	text-shadow: 
	0px 0px .25em rgb(var(--orange-300)),
	0px 0px 2em white;

	-webkit-box-shadow: inset 0px 0px 0.5em 0px black,
							0px 0px 0.5em 0px black;
	-moz-box-shadow: inset 0px 0px 0.5em 0px black,
							0px 0px 0.5em 0px black;
	box-shadow: inset 0px 0px 0.5em 0px black,
						0px 0px 0.5em 0px black;
}

.swapbox .glowborder:before {
	content: none;
}

.glowborder:before {
	content: "";
	position: absolute;
	top: 105%;
	left: 0;
  
	opacity: 0.7;
	filter: blur(.7em);
	transform: perspective(4em) rotateX(60deg);
  
	background: rgb(var(--orange-300));
	pointer-events: none;
	width:100%;
	height:100%;
  }
  
  .glowborder:hover:before {
	filter: blur(.95em);
	opacity: 1;
  }
  
  @keyframes border-flicker {
	0% {
	  opacity: 1;
	}
	5% {
	  opacity: 0.3;
	}
	15% {
	  opacity: .7;
	}
	30% {
	  opacity: 1;
	}
	80% {
	  opacity: 0.7;
	}
	100% {
	  opacity: 1;
	}
  }
  
  @keyframes text-fade-in {
	0% {
	  opacity: .1;
	}
	30% {
	  opacity: 1;
	}
	80% {
	  opacity: 1;
	}
	100% {
	  opacity: .1;
	}
  }
  
  .glowborder span {
	animation: text-fade-in 3s linear infinite;
	animation-delay:calc(var(--n) * 200ms);
  }

  input {
	overflow-y: hidden; 
	font-size: 1.5em; 
	box-shadow: inset black 0px 0 15px 5px; 

	border-radius: .5em;
    border-color: rgb(var(--orange-300));
  }

  button {
	background: none;
  }

  .chevron{
	background-color: rgb(var(--yellow-300));

    height: 1.75em;
    width: 3em;
    clip-path: polygon(100% 70%, 75% 70%, 75% 85%, 60% 85%, 50% 100%, 40% 85%, 25% 85%, 25% 70%, 10% 70%, 0 55%, 0% 35%, 7% 30%, 0 0, 50% 25%, 100% 0, 93% 30%, 100% 35%, 100% 55%, 90% 70%);
  }

.shadow {
	filter: drop-shadow(-1px 2px 2px rgb(var(--orange-300)));
}

.swapbox {
	width: 350px;
	background-color: #0000001c;
	border-radius: 1em;
	box-shadow: inset rgb(var(--orange-300)) 0px 0px 5px, rgb(var(--yellow-300)) 0px 0px 1px;
	filter: drop-shadow(2px 2px 1px black);
}

.balancebox {
	max-width: 60%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.highlighttext{
	color:rgb(var(--yellow-300));
}