@font-face {
	font-family: 'Poppins';
	src: url('/fonts/poppins/poppins-light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('/fonts/poppins/poppins-semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@property --button-gradient-start {
	syntax: '<color>';
	initial-value: #36BDFB;
	inherits: false;
}

@property --button-gradient-end {
	syntax: '<color>';
	initial-value: #48FF6F;
	inherits: false;
}

:root {
	--background: #120e1a;
	--edge-green: rgba(0,255,0, 0.7);
	--edge-green-faded: #00340B;
	--font: "Poppins", serif;
	--text-subtle: #919191;
	--particle-width: 5px;
	--player-blue: #2458F6;
	--player-red: #EA3B24;
	--score-placeholder: #5E6065;
	--watch-border: #393939;
}
.no-select {
	color: #242424;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
}
.no-wrap {
	white-space: nowrap;
}
h2, h3 {
	color: transparent;
	text-align: center;
}
h1 {
	height: 100px;
	margin: 10px auto 0px auto;
	text-align: center;
	width: 200px;
}
	h1 img {
		display: block;
		height: 100%;
		margin: 0px auto;
		width: 100%;
	}
h2 {
	background: linear-gradient(to right top, #5a81ff 0%, #b469ff 100%) text;
	font-size: 24px;
	font-weight: 600;
	margin: 30px 10px 10px 10px;
}
h3 {
	background: linear-gradient(to right top, #54d75c, #b0ffb6) text;
	font-size: 26px;
	font-weight: 600;
	margin: 30px 10px 0px 10px;
}
p, ul, dt, dl {
	color: #bccad0;
	font-size: 18px;
	font-weight: 300;
	line-height: 27px;
	margin: 0px auto 5px auto;
	max-width: 300px;
}
	.center {
		text-align: center;
	}
	p.info {
		color: var(--text-subtle);
		font-size: 13px;
		margin-bottom: 10px;
	}

.emphasise {
	font-weight: bold;
}
dl {
	left: 0px;
	list-style: none;
	position: relative;
}
	dl dt {
		font-size: 18px;
		font-weight: 600;
	}
	dl dd {
		font-size: 18px;
		margin: 0px 0px 15px 0px;
	}

a {
	color: #e4e4e4;
}
	a:hover {
		color: #e4e4e4;
		text-decoration: none;
	}
a.btn {
	background: linear-gradient(to right top, var(--button-gradient-start), var(--button-gradient-end));
	border-radius: 5px;
	color: var(--background);
	display: inline-block;
	margin: 10px;
	padding: 4px 14px;
	text-decoration: none;
	transition: --button-gradient-start 0.25s, --button-gradient-end 0.25s;
}
	a.btn:hover {
		--button-gradient-start: #90bcff;
		--button-gradient-end: #ffa65c;
	}
body {
	background: var(--background);
	font-family: var(--font);
	margin: 30px 0px;
}
	@media (-webkit-touch-callout: none), (max-width: 350px) {
		body {
			margin-top: 30px !important;
		}
		#downloads {
			top: 65px !important;
		}
		#rating {
			top: 34px !important;
		}
	}
#downloads {
	height: 100px;
	left: calc(50% + -170px);
	position: absolute;
	text-align: center;
	text-shadow: 1px 1px 1px #111111;
	top: 85px;
	width: 110px;
}
	#downloads p {
		color: #acacac;
	}
	#downloads-count {
		font-weight: bold;
	}
	#downloads-downloads {
		color: var(--text-subtle) !important;
	}
#icon {
	display: block;
	margin: 0px auto 30px auto;
	transition: transform 0.4s;
	width: 70px;
}
	#icon:hover {
		transform: scale(1.2);
	}
	#icon img {
		animation: icon-glow 2s infinite ease-in-out;
		border-radius: 55px;
		display: block;
		margin: 0px auto;
		width: 100%;
	}
		@keyframes icon-glow {
			0%, 100% {
				box-shadow: 0px 0px 30px 1px rgba(196, 166, 255, 0.80);
			}
			50% {
				box-shadow: 0px 0px 15px -10px #c4a6ff;
			}
		}
#rating {
	height: 100px;
	left: calc(50% + 60px);
	position: absolute;
	text-align: center;
	text-shadow: 1px 1px 1px #111111;
	top: 64px;
	width: 110px;
}
	#rating p {
		margin: 0px;
		padding: 0px;
	}
	.rating-ratings {
		color: var(--text-subtle);
		font-family: ui-system, var(--font);
		font-size: 12px;
		font-weight: 600;
		padding-top: 5px !important;
		text-transform: uppercase;
	}
	#rating-score {
		color: #acacac;
		font-family: ui-rounded, var(--font);
		font-size: 22px;
		font-weight: 700;
		padding: 3px 0px 4px 0px;
	}
	#rating-stars {
		color: #acacac;
		font-family: ui-rounded, var(--font);
		font-size: 11px;
		letter-spacing: 3px;
		padding-bottom: 5px !important;
	}

/*
	
	⌚️ Watch simulator

*/
#watch-preview {
	margin: 25px 0px 0px 0px;
	position: relative;
}
#watch-body {
	display: inline-block;
	background: var(--watch-border);
	border-radius: 17.5%;
	margin: 0px auto;
	padding: 14px;
	position: relative;
}
	#audio-toggle {
		cursor: pointer;
		font-size: 28px;
		right: -40px;
		opacity: 0.5;
		position: absolute;
		top: 200px;
	}
	#watch-screen {
		background: #000000;
		border-radius: 12.5%;
		height: calc(56px * 3);
		overflow: hidden;
		position: relative;
		width: calc(46px * 3)
	}
	#watch-crown {
		background: #717171;
		/*background: linear-gradient(135deg, #606060 0%, #262626 100%);*/
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		border-radius: 4px;
		box-sizing: border-box;
		height: 38px;
		overflow: hidden;
		position: absolute;
		right: -15px;
		top: 40px;
		width: 13px;
	}
		#watch-crown-inside {
			position: relative;
		}
			#watch-crown hr {
				background: #181818;
				border: none;
				border-radius: 2px;
				/*box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.15);*/
				height: 1.5px;
				margin: 3.5px 2px;
			}
		#watch-crown-gradient {
			background: linear-gradient(180deg, rgba(160, 160, 160, 0.8) 0%, rgba(255, 255, 255, 0) 50%, rgba(25, 25, 25, 0.8) 100%);
			background-clip: padding-box, border-box;
			background-origin: padding-box, border-box;
			border-radius: 4px;
			box-sizing: border-box;
			height: 38px;
			left: 0px;
			position: absolute;
			right: -15px;
			top: 0px;
			width: 13px;
		}
	#watch-button {
		background: #535353;
		border-radius: 0px 4px 4px 0px;
		height: 60px;
		position: absolute;
		right: -7px;
		top: 100px;
		width: 5px;
		z-index: -1;
	}
	.watch-strap {
		background: linear-gradient(0deg, var(--watch-border) 0%, var(--background) 100%);
		height: 26px;
		margin: 3px auto;
		opacity: 0.7;
		position: relative;
		width: 114px;
	}
		.watch-strap > div {
			background: var(--background);
			border-radius: 14px;
			height: calc(100% + 10px);
			position: absolute;
			top: -10px;
			width: 20px;
		}
			.watch-strap > div:first-child {
				left: -10px;
			}
			.watch-strap > div:nth-child(2) {
				right: -10px;
			}
		.watch-strap-bottom {
			transform: scaleY(-100%);
		}
		/*
			
			🏓 Game simulation
			
		*/
		#match-top {
			color: #cccccc;
			font-size: 13px;
			font-weight: 600;
			padding: 7px 0px 0px 15px;
			text-align: left;
		}
			#watch-time {
				position: absolute;
				right: 10px;
				top: 7px;
			}
				#watch-time-blinker {
					animation: watch-time-blinker 1s ease-in-out infinite;
					position: relative;
					top: -0.5px;
				}
				@keyframes watch-time-blinker {
					0%, 100% { opacity: 1; }
					50% { opacity: 0; }
				}
		#match-edges {
			border-top: 2px solid var(--edge-green);
			border-bottom: 2px solid var(--edge-green);
			height: 110px;
			margin: 0px 10px;
			position: absolute;
			top: 29px;
			width: 118px;
		}
			#retro-background {
				left: 9px;
				height: 110px;
				position: relative;
				width: 110px;
			}
			#match-particles-edge {
				height: 0px;
				position: absolute;
				width: 0px;
			}
				#match-particles-edge div {
					background: var(--edge-green);
					border-radius: 100%;
					height: var(--particle-width);
					opacity: 0;
					position: absolute;
					top: calc(50% - var(--particle-width));
					width: var(--particle-width);
				}
				#match-particles-edge .left {
					left: calc(-(var(--particle-width)));
				}
					#match-particles-edge.animate .left {
						animation: match-particles-edge-left 1s 1 ease-out;
					}
					@keyframes match-particles-edge-left {
						0% {
							transform: translate(0px, 0px);
							opacity: 1;
						}
						100% {
							transform: translate(-20px, -8px) scale(0, 0);
							opacity: 0;
						}
					}
				#match-particles-edge .right {
				}
					#match-particles-edge.animate .right {
						animation: match-particles-edge-right 1s 1 ease-out;
					}
					@keyframes match-particles-edge-right {
						0% {
							transform: translate(0px, 0px);
							opacity: 1;
						}
						100% {
							transform: translate(20px, -8px) scale(0, 0);
							opacity: 0;
						}
					}
			#match-particles-paddle {
				height: 0px;
				position: absolute;
				width: 0px;
			}
				#match-particles-paddle div {
					background: white;
					border-radius: 100%;
					height: var(--particle-width);
					left: calc(-(var(--particle-width)));
					opacity: 0;
					position: absolute;
					width: var(--particle-width);
				}
				#match-particles-paddle .top {
					top: calc(-(var(--particle-width)));
				}
					#match-particles-paddle.animate .top {
						animation: match-particles-paddle-top 1s 1 ease-out;
					}
					@keyframes match-particles-paddle-top {
						0% {
							transform: translate(0px, 0px);
							opacity: 1;
						}
						100% {
							transform: translate(8px, -20px) scale(0, 0);
							opacity: 0;
						}
					}
				#match-particles-paddle .bottom {
				}
					#match-particles-paddle.animate .bottom {
						animation: match-particles-paddle-bottom 1s 1 ease-out;
					}
					@keyframes match-particles-paddle-bottom {
						0% {
							transform: translate(0px, 0px);
							opacity: 1;
						}
						100% {
							transform: translate(8px, 20px) scale(0, 0);
							opacity: 0;
						}
					}
				#match-particles-paddle.blue div {
					background: var(--player-blue);
				}
				#match-particles-paddle.red div {
					background: var(--player-red);
				}
		.match-paddle {
			border-radius: 4px;
			height: 24px;
			position: absolute;
			top: calc(50% - 12px);
			width: 4%;
		}
			#match-paddle-blue {
				background: var(--player-blue);
			}
			#match-paddle-red {
				left: 96%;
				background: var(--player-red);
			}
		#match-ball {
			background: #ffffff;
			border-radius: 100%;
			left: 47%;
			height: 6%;
			position: absolute;
			top: 47%;
			width: 6%;
		}
		#match-bottom {
			padding-top: 4px;
			position: absolute;
			text-align: center;
			top: 138px;
			width: 138px;
		}
			.match-score {
				background: var(--score-placeholder);
				border-radius: 10px;
				display: inline-block;
				height: 10px;
				padding: 0px;
				width: 10px;
			}
				.match-score-blue {
					background: var(--player-blue);
				}
				.match-score-red {
					background: var(--player-red);
				}
				.match-score-gap {
					display: inline-block;
					width: 10px;
				}

		.vertical-line {
			position: absolute;
			width: 2px;
			background: linear-gradient(to bottom, rgba(0,255,0,0.2) 0%, rgba(0,255,0,0.8) 100%);
			transform-origin: bottom center;
		}

		.vertical-line.top {
			background: linear-gradient(to bottom, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0.2));
			transform-origin: top center;
		}

		.connecting-line {
			position: absolute;
			width: 2px;
			background-color: var(--edge-green);
			transform-origin: top left;
		}

		.horizontal-line {
			position: absolute;
			height: 2px;
			background-color: var(--edge-green-faded);
		}
	
	
	
	
	
	
	
.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0px auto;
	max-width: 640px;
}
	.column {
		flex: 1;
		margin: 0px 10px;
		min-width: 300px;
		width: 300px;
	}
	
.download-now {
	color: #fafafa;
	font-size: 20px;
	font-weight: 600;
	position: relative;
	top: 30px;
}
.download {
	display: block;
	margin: 40px auto 20px auto; 
}
	.download img {
		border-radius: 8px;
		box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.8);
		transition: box-shadow 0.25s;
	}
		.download img:hover {
			box-shadow: 0px 0px 15px 1px rgba(255, 255, 255, 0.8);
		}
#reviews-stars {
	color: #ef9f3e;
	font-family: ui-rounded, var(--font);
	font-size: 30px;
	letter-spacing: 2px;
	margin-top: 10px;
}
.x {
	background-color: #c7c7c7;
	border-radius: 50px;
	color: #333333;
	display: block;
	font-size: 16px;
	font-weight: 300;
	height: 32px;
	line-height: 32px;
	margin: 10px auto;
	padding-right: 10px;
	text-align: center;
	text-decoration: none;
	transition: all 0.2s;
	width: 140px;
}
	.x:hover {
		background-color: #ffffff;
		color: #000000;
	}
	.x span {
		border-radius: 20px;
		display: block;
		float: left;
		font-size: 24px;
		font-weight: 300;
		height: 32px;
		line-height: 32px;
		margin-left: 13px;
		width: 20px;
	}
#copy {
	margin-top: 40px;
}