head {
	background-color: #9F82FF;
}

h1:not(#title) {
	background-color: #9F8200;
	margin-top: 10px;
	font-size: 50px;
	font-family: "Aldrich";
	background-height: 100px;
	text-align: center;
	padding: 14px 16px;
	outline: thin solid;
	text-shadow: 2px 2px 5px black;
}

html, body {
	background-color: #000000;
	font-family: verdana;
	margin: 0;
	padding: 0;
}

#content, html, body {
    height: 100%;
	overflow: hidden;
}

p {
	font-weight: bold;
}

button {
  font-weight: bold;
  padding: 0 10px;
  border: 1px black thin;
  border-radius: 8px;
  margin:0px;
}

tr td:not(#back) {
	width:820px;
	height:460px;
	margin-top:0px;
}

#goLeft, #goRight, #backbutton {
	width: 30px;
	height: 30px;
	margin:20px;
	background-color:#FFFFFF;
}

#goLeft, #goRight {
	margin-top:-70px; 
}

#backbutton {
	width:70px;
}

#goLevel0, #goLevel1, #goLevel2 {
	width:666px;
	height:300px;
	border-radius:50px;
	font-family: "Aldrich";
	font-size: 75px;
	margin-top:-70px;
}

#goLevel0 {
	background-color: #0095DD;
}
#goLevel1 {
	background-color: #14BA01;
}
#goLevel2 {
	background-color: #D11A02;
}
#goLevel0:hover{
	background-color: #0062AA;
}
#goLevel1:hover{
	background-color: #019800;
}
#goLevel2:hover{
	background-color: #660E0E;
}

#homescreen{
	width: 820px;
	height:570px;
	position: absolute;
	overflow:hidden;
	background:
		radial-gradient(130% 90% at 50% 8%, rgba(37,99,235,0.30), transparent 55%),
		linear-gradient(180deg, #05132e 0%, #050b1c 45%, #02060f 100%);
}

/* synthwave perspective floor that scrolls toward the viewer */
#homescreen::before{
	content:"";
	position:absolute;
	left:-50%;
	right:-50%;
	bottom:-40px;
	height:55%;
	background-image:
		repeating-linear-gradient(to right, rgba(56,130,246,0.55) 0 2px, transparent 2px 80px),
		repeating-linear-gradient(to bottom, rgba(56,130,246,0.55) 0 2px, transparent 2px 60px);
	background-size:80px 60px, 80px 60px;
	transform: perspective(340px) rotateX(64deg);
	transform-origin:50% 100%;
	animation: floorscroll 1.1s linear infinite;
	pointer-events:none;
	opacity:0.85;
}

/* horizon glow + scanlines layered on top */
#homescreen::after{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(120% 60% at 50% 52%, rgba(37,99,235,0.35), transparent 60%),
		repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.18) 2px 4px);
	pointer-events:none;
	animation: hpulse 3.5s ease-in-out infinite;
}

@keyframes floorscroll {
	0%{background-position:0 0, 0 0}
	100%{background-position:0 60px, 0 60px}
}

@keyframes hpulse {
	0%,100%{opacity:0.9}
	50%{opacity:1}
}

/* twinkling star/particle field high in the sky */
#homescreen{
	box-shadow: inset 0 0 120px rgba(0,0,0,0.6);
}

#playbutton, #tutorial {
	position:absolute;
	z-index:3;
	top:360px;
	text-align: center;
	height:92px;
	width:215px;
	font-family:'Space Grotesk', sans-serif;
	font-weight:900;
	font-size:22px;
	text-transform:uppercase;
	letter-spacing:0.04em;
	margin:0;
	border-radius:0;
	cursor:pointer;
	transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.12s ease, color 0.12s ease;
}

#playbutton{
	left:118px;
	background:#2563EB;
	color:#ffffff;
	border:3px solid #ffffff;
	box-shadow:6px 6px 0 #000000, 0 0 34px rgba(37,99,235,0.55);
}
#playbutton:hover{
	transform:translate(2px,2px);
	box-shadow:4px 4px 0 #000000, 0 0 54px rgba(37,99,235,0.85);
	background:#1d4fd0;
}

#tutorial{
	left:487px;
	background:rgba(0,0,0,0.35);
	color:#cdd9f5;
	border:3px solid #2563EB;
	box-shadow:6px 6px 0 #000000;
	font-size:18px;
}
#tutorial:hover{
	transform:translate(2px,2px);
	box-shadow:4px 4px 0 #000000;
	background:#2563EB;
	color:#ffffff;
}

#title{
	position:relative;
	z-index:3;
	font-family: 'Space Grotesk', "Orbitron", sans-serif;
	padding: 60px 16px 10px;
	text-align:center;
	font-size:84px;
	font-weight:900;
	letter-spacing:-0.03em;
	text-transform:uppercase;
	color:#ffffff;
	line-height:1;
	text-shadow: 0 0 18px rgba(56,130,246,0.6), 4px 4px 0 rgba(0,0,0,0.4);
}

.title-accent{
	color:#2563EB;
	text-shadow: 0 0 22px rgba(37,99,235,0.9), 3px 3px 0 #ffffff;
}

#subtitle{
	position:relative;
	z-index:3;
	text-align:center;
	font-family:'Space Grotesk', sans-serif;
	font-size:15px;
	font-weight:700;
	letter-spacing:0.28em;
	text-transform:uppercase;
	color:#7fa4f0;
	margin-top:6px;
	text-shadow:0 0 12px rgba(37,99,235,0.5);
}

.popup {
	position:static;
	display:inline;
}

/* centered modal card over the homescreen */
.popuptext {
	visibility: hidden;
	opacity:0;
	position: absolute;
	z-index: 20;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%) scale(0.92);
	width: 560px;
	max-width:90%;
	background: linear-gradient(180deg, #0b1730, #060d1f);
	border:3px solid #2563EB;
	box-shadow: 8px 8px 0 #000000, 0 0 60px rgba(37,99,235,0.45);
	color: #e8eefc;
	text-align: center;
	padding: 34px 30px 30px;
	font-family:'Space Grotesk', sans-serif;
	font-size:21px;
	font-weight:700;
	line-height:2;
	letter-spacing:0.01em;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

#closethis {
	display:block;
	margin-top:18px;
	font-size: 13px;
	font-weight:500;
	font-style: italic;
	color:#7fa4f0;
	letter-spacing:0.03em;
}

.popuptext.show {
	visibility: visible;
	opacity:1;
	transform:translate(-50%,-50%) scale(1);
}

#left {
	background-color:#000000;
	background-image: url("bg.png");
	margin:0 auto;
	border:none;
    width: 820px;
	height:570px;
	overflow:hidden;
}