/* body:before {
	content: "";
		display: block;
		position: absolute;
		height: 100%;
		border: 1px solid red;
		left: 50%;
} */

canvas {
	display: block;
	width: 100%;
	height: 100%;
}

#coins {
	/* margin-top: 20px; */
	background: url(./stars-bg.bb100d663537a5c9c7d6.svg) 50%/contain #0e0e16;
	height: 750px;
	position: relative;
}

.orbit {
	position: absolute;
	font-size: 50px;
	left: 50%;
	top: 50%;
	--r: 2em;
	--dur: .3s;
}
.orbit1 {
	--r: 4.8em;
	--dur: .4s;
}
.orbit2 {
	--r: 7.6em;
	--dur: .5s;
}
@media (max-width: 800px) {
	.orbit {
		font-size: 40px;
	}
}

@media (max-width: 520px) {
	.orbit {
		font-size: 30px;
	}
}

.orbit .coin {
	position: absolute;
	cursor: pointer;
	--ro: calc(var(--i) / var(--n) * 1turn);
	transform: rotate(var(--ro)) translateY(var(--r)) rotate(calc(-1 * var(--ro)));
	transition: transform var(--dur);
	will-change: transform;
	/* isolation: isolate; */
}
.orbit.selected .coin.selected {
	--r: 0;
}

.coin::before, .coin::after {
	content: '';
	position: absolute;
	width: 1em;
	height: 1em;
	transform: translate(-50%, -50%);
	background: var(--bg) center/contain  no-repeat;
	background-origin: content-box;
	border: rgb(20 67 101 / 50%) .15em solid;
	box-shadow: 0 0 0 1px #1e81c8;
	border-radius: 100%;
	box-sizing: border-box;
	transition: .35s;
	will-change: opacity;
	transition-delay: inherit;
}

.coin::before{
	/* transform: scale(1); */
}

.coin::after {
	filter: drop-shadow(0 0 calc(.1em + 5px) #558ed1);
	mix-blend-mode: lighten;
	mix-blend-mode: plus-lighter;
	opacity: 0;
}

.has-active .coin::before {
	opacity: 0.3;
}

.has-active .coin.active::before,
.has-active .coin:hover::before {
	opacity: 0;
}

.has-active .coin.active::after,
.has-active .coin:hover::after {
	opacity: 1;
}


* {
	padding: 0;
	margin: 0;
	outline: 0;
	overflow: visible;
}
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}



#el0{--bg: url(./icons/Stride40.png);}
#el1{--bg: url(./icons/Persistance40.svg);}
#el2{--bg: url(./icons/Secret40.svg);}
#el3{--bg: url(./icons/Stargaze40-2.png);}
#el4{--bg: url(./icons/Sommelier40.png);}
#el5{--bg: url(./icons/Umee40.png);}
#el6{--bg: url(./icons/Agoric40.png);}
#el7{--bg: url(./icons/Akash40.svg);}
#el8{--bg: url(./icons/Axelar40.png);}
#el9{--bg: url(./icons/Canto40.png);}
#el8{--bg: url(./icons/Comdex40.png);}
#el10{--bg: url(./icons/Cosmos40.svg);}
#el11{--bg: url(./icons/Crescent40.png);}
#el12{--bg: url(./icons/Cronos40.png);}
#el13{--bg: url(./icons/Crypto40.svg);}
#el14{--bg: url(./icons/Evmos40-2.png);}
#el15{--bg: url(./icons/Injective40.svg);}
#el16{--bg: url(./icons/IRIS40.svg);}
#el17{--bg: url(./icons/Juno2-40.svg);}
#el18{--bg: url(./icons/Kujira40.png);}
#el19{--bg: url(./icons/Osmosis40.svg);}
#el20{--bg: url(./icons/Injective40.svg);}
#el21{--bg: url(./icons/Crescent40.png);}
#el22{--bg: url(./icons/Cronos40.png);}
#el23{--bg: url(./icons/Crypto40.svg);}
#el24{--bg: url(./icons/Evmos40-2.png);}
#el25{--bg: url(./icons/Injective40.svg);}
#el26{--bg: url(./icons/IRIS40.svg);}
#el27{--bg: url(./icons/Juno2-40.svg);}
#el28{--bg: url(./icons/Kujira40.png);}
#el29{--bg: url(./icons/Osmosis40.svg);}
#el30{--bg: url(./icons/Injective40.svg);}
#el31{--bg: url(./icons/Crescent40.png);}
#el32{--bg: url(./icons/Cronos40.png);}
#el33{--bg: url(./icons/Crypto40.svg);}
#el34{--bg: url(./icons/Evmos40-2.png);}
#el35{--bg: url(./icons/Injective40.svg);}
#el36{--bg: url(./icons/IRIS40.svg);}
#el37{--bg: url(./icons/Juno2-40.svg);}
#el38{--bg: url(./icons/Kujira40.png);}
#el39{--bg: url(./icons/Osmosis40.svg);}
#el40{--bg: url(./icons/Crescent40.png);}