/*Javascript is used to apply .hidden and .showing as appropriate*/
.hidden {
	display: none !important;
}
.showing {
	display: block;
}


/* ---------- JUPITER ---------- */
.jupiter {
	position:fixed;
	right:-130px;
	top:80px;
	animation: jupiterFloat 20s infinite alternate ease-in-out;

	width:336px;
	height:336px;
	border-radius:50%;

	background:
	repeating-linear-gradient(
		0deg,
		#e4a36c 0px,
		#faf6ee 20px,
		#b96d48 30px,
		#e4a36c 35px,
		#9c563e 60px,
		#d48b5d 70px
	);
	box-shadow:	0 0 100px #ffbd7b;

	opacity:1;
	z-index: -3;
}


@keyframes jupiterFloat {
	from {
		transform:translateY(-20px);
	}

	to {
		transform:translateY(40px);
	}
}

/* ---------- DROID ---------- */
.droid {
	position: fixed;
	bottom: 30px;
	left: 30px;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	background: #e5f3ff;
	color: #07111e;
	z-index: 5;

	display: grid;
	place-items: center;
	font-size: 2rem;
	box-shadow: 0 0 30px #8be9ff;

	animation: wander 24s infinite alternate ease-in-out;
}
.tapped{
	width: 72px;
	height: 72px;
	font-size: 2.4rem;
	box-shadow: 0 0 36px #56f441;
}
@keyframes wander {
	from {
		transform:
			translateX(0)
			rotate(-10deg);
	}

	to {
		transform:
			translateX(calc(100vw - 140px))
			rotate(10deg);
	}
}
.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

#droidSpeach{
	color: greenyellow;
	position:fixed;
	bottom: 97px;
	width:90%;
	left:5%;
	border-color: chartreuse;
	border-width: 1px;
	border-style: dotted;
	padding: 6%;
	background-color: black;
	opacity: 1;
	z-index: 200;
}

/* ---------- FOOTER ---------- */
footer {
	padding: 50px;
	text-align: center;
	opacity: 0.7;
}