@charset "UTF-8";
/* Colors */
:root {
	--pink-0: rgb(255, 0, 255, 255);
	--pink-1: rgb(255, 50, 255, 255);
	--pink-2: rgb(255, 100, 255, 255);
	--pink-3: rgb(255, 150, 255, 255);
	--pink-4: rgb(255, 200, 255, 255);
	--pink-5: rgb(255, 250, 255, 255);
	--cyan-0: rgb(250, 255, 255, 255);
	--cyan-1: rgb(200, 255, 255, 255);
	--cyan-2: rgb(150, 255, 255, 255);
	--cyan-3: rgb(100, 255, 255, 255);
	--cyan-4: rgb(50, 255, 255, 255);
	--cyan-5: rgb(0, 255, 255, 255);
}
/* Links */
a:link {
	color: var(--pink-3);
}
a:visited {
	color: var(--pink-1);
}
a:Hover {
	color: var(--pink-5);
}
/* Whole website */
* {
	font-family: monospace;
}
body {
	background-color: var(--cyan-1);
}
@media only screen and (max-width: 4096px) {
	/* Navigation */
	nav {
		font-size: 28pt;
	}
	/* Headings */
	h1 {
		font-size: 32pt;
		text-align: center;
		color: var(--cyan-4);
	}

	h2 {
		font-size: 24pt;
		text-align: center;
		color: var(--cyan-5);
		text-shadow: 1px 1px 1px black;
	}

	h3 {
		font-size: 16pt;
		text-align: center;
		color: var(--cyan-5);
		text-shadow: 1px 1px 1px black;
	}
	/* Classes */
	.DevMessage {
		font-size: 14pt;
		text-align: center;
	}
	.skillTree {
		display: none;
		background-color: var(--cyan-2);
	}

	.Tree {
		text-align: center;
		display: none;
	}
	.copyright {
		position: fixed;
		bottom: 3vh;
		left: 46vw;
		color: blue;
	}
	.GameImage {
		text-align: center;
		position: relative;
		margin: 2vw;
		left: 10vw;
	}

	.devBlogGreen {
		color: green;
		text-shadow: 1px 1px 1px black;
		font-size: 14pt;
	}
	.donoPacks {
		text-align: center;
	}
	.download-button {
		text-align: center;
		display: inline-block;
		padding: 12px 24px;
		background-color: var(--cyan-4);
		color: var(--pink-1);
		text-decoration: none;
		font-size: 18px;
		border-radius: 8px;
		transition: background-color 0.3s;
	}
	.TableColorGreen {
		background-color: green;
	}
	.TableColorLightGreen {
		background-color: lightgreen;
	}
	.TableColorLightBlue {
		background-color: lightblue;
	}
	.TableColorGold {
		background-color: goldenrod;
	}
	.TableColorSilver {
		background-color: silver;
	}
	.TableColorCopper {
		background-color: coral;
	}
	/* Identities */
	#StatsTable {
		background-color: var(--cyan-2);
		width: 85vw;
	}

	#StatsTableHeaders {
		font-size: 12pt;
		color: var(--pink-3);
		background-color: var(--cyan-5);
	}

	#startMessage {

	}

	#donationForm {
		text-align: center;
	}

	#ExperienceBar {
		position: absolute;
		width: 60vw;
		height: auto;
		text-align: center;
		margin-left: 20vw;
		margin-top: 1vw;
		opacity: 0.5;
	}

	#ExperienceMask {
		position: absolute;
		background-color: white;
		width: 59vw;
		height: 2vw;
		text-align: right;
		margin-left: 20.5vw;
		margin-top: 2.75vw;
		opacity: 1;
	}

	#ExperienceFill {
		position: absolute;
		background-color: lawngreen;
		width: 59vw;
		height: 2vw;
		text-align: center;
		margin-left: 20.5vw;
		margin-top: 2.75vw;
	}

	#login-container {
		text-align: center;
		
	}

	#level {
		width: 10%;
		text-align: center;
		position: fixed;
		left: 45%;
		top: 20%;
	}

	#lvl {
		font-size: 28pt;
		text-align: center;
		position: fixed;
		left: 48%;
		top: 30%;
	}

	#experience {
		width: 20%;
		text-align: center;
		position: fixed;
		left: 40%;
		top: 40%;
	}

	#exp {
		font-size: 28pt;
		text-align: center;
		position: fixed;
		left: 48%;
		top: 50%;
	}

	#LeftSplashClip {
		width: 15vw;
		height: auto;
		float: left;
	}

	#splashClip {
		position: relative;
		left: 8.5vw;
		top: 1vh;
		margin-bottom: 10px;
		outline: 5px solid var(--pink-4);
		width: 45vw;
		height: auto;
	}

	#RightSplashClip {
		position: relative;
		right: 15vw;
		width: 15vw;
		height: auto;
		float: right;
	}

	#leftSide {
		position: relative;
		width: 10vw;
		padding: 1vw;
		top: 5vh;
		outline: 3px solid var(--pink-4);
		height: auto;
		background-color:var(--cyan-2);
	}
	#leftSide button {
		outline: 1px solid var(--cyan-5);
		display: block;
		padding: 1%;
		margin: 1%;
	}
	#leftSide ul li {
		list-style-type: none;
		background-color: var(--cyan-2);
	}
	#leftSide ul li a {
		background-color: var(--cyan-2);
	}
	#ZephyriaImage {
		width: 98vw;
		height: auto;
	}

	#BlogLeft {
		position: relative;
		float: left;
		width: 18vw;
		height: auto;
	}

	#DevBlogText {
		overflow-y: scroll;
		overflow-x: hidden;
		position: absolute;
		text-align: center;
		color: blue;
		width: 40vw;
		height: 85vh;
		left: 30vw;
	}

	#BlogRight {
		position: relative;
		float: right;
		width: 18vw;
		height: auto;
	}

	#Chapters {
		position: absolute;
		left: 40vw;
		width: 50vw;
		height: auto;
		outline: 3px groove goldenrod;
	}
	#Center img{
		position: absolute;
		width: 60vw;
		height: auto;
		left: 15vw;
		top: 10vh;
		display: none;
	}
	#DiscordLink {
		position: absolute;
		left: 29.5vw;
		width: 1vw;
		height: auto;
		top: 25vh;
	}
	#WhiteDragon {
		height: 92vh;
		width: auto;
		float: left;
		margin: 10px;
		outline: 7px groove goldenrod;
	}
}
/* Mobile CSS */
@media only screen and (max-width:500px) {
	#leftSide {
		width: 92vw;
		top: 10vh;
	}
	#splashClip {
		position: fixed;
		left: 20vw;
		top: 35vh;
		outline: 5px solid var(--pink-4);
		width: 60vw;
		height: auto;
	}
}