:root {
	--bg-light: #C199C7;
	--bg-dark: #562E55;
	--fnt-light: #222548;
	--fnt-dark: #F5DDFF;
	--link-dark: #FF96FF;
	--link-light: #522A56;
}

body {
	background: black;
	color: var(--fnt-dark);
}

/* Background */
.background {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background: url("../img/bg/stars3.gif");
	z-index: -8;
}

/* Header - Take up 20% screen height at all times */
.head {
	position: fixed;
	width: 60vw;
	height: 20vh;
	top: 0;
	left: 0;
	margin-left: 10vw;
	margin-right: 10vw;
	background: transparent;
}

.navbar {
	position: absolute;
	bottom: 0;
	left: 0.2em;
	width: 40%;
	height: 1.5em;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.navbar a {
	text-decoration: none;
}

.button {
	background: var(--bg-dark);
	border: 0.2em solid var(--bg-light);
	color: var(--link-dark);
	border-bottom: transparent;
	border-top-left-radius: 0.25em;
	border-top-right-radius: 0.25em;
	height: 100%;
	margin: -0.25em;
	width: 4.5em;
	text-align: center;
	transition: border-color 0.1s, color 0.25s, background 0.25s;
}

.button:hover {
	color: var(--link-light);
	background: var(--bg-light);
}

.button:active {
	border-color: #c84aff;
}

/* Big Box - where the content is. */
.main {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 80vw;
	height: 70vh;
	top: 20vh;
	left: calc(10vw - 0.2em);
	background: var(--bg-dark);
	border: 0.2em solid var(--bg-light);
	border-radius: 0.25em;
}



/* Inner boxes */

.content {
	width: 70%;
	height: 95%;
	margin-left: 2.5%;
	margin-right: 2.5%;
	background: #C199C7;
	border: 0.15em solid #C199C7;
	border-radius: 1%;
}

.content iframe {
	border: none;
	width: 100%;
	height: 100%;
}

.warning {
	color: var(--fnt-light);
	
	a {
		color: var(--link-light);
		transition: color 0.25s, background 0.25s, text-decoration 0.25s;
		cursor: pointer;
		border-radius: 0.25em;
		text-decoration: underline;
	}
	
	a:hover {
		color: var(--link-dark);
		background: var(--link-light);
		border-radius: 0.25em;
		text-decoration: none;
	}
}

.sidebar {
	position: relative;
	width: 25%;
	height: 95%;
	margin-right: 2.5%;
	background: var(--bg-dark);
	color: var(--fnt-dark);
	
	.inner {
		position: absolute;
		width: 95%;
		height: 95%;
		margin: 2.5%;
		overflow-x: hidden;
		overflow-y: scroll;
		font-size: 0.75em;
	}
	
	h1 {
		font-weight: bold;
		font-size: 1.5em;
		margin-top: 0;
		margin-bottom: 0;
		width: 100%;
		text-align: center;
	}
	
	hr {
		height: 0.25em;
		background: linear-gradient(to right, rgba(0,0,0,0), #BA83B8, #F5DDFF, #BA83B8, rgba(0,0,0,0));
		border: transparent;
		margin-top: 0;
	}
	
	a {
		color: #FF96FF;
		transition: color 0.25s;
	}
	
	a:hover {
		color: white;
	}
	
	a img {
		max-height: 0.75em;
		width: 0.75em;
		vertical-align: middle;
		margin-bottom:0.1em;
		margin-right:0.25em;
	}
	
	.updates-container {
		height: 10em;
		overflow-x: hidden;
		overflow-y: scroll;
		border-radius: 0.25em;
		text-align: center;
		h1 {
			font-size: 1.2em;
			width: 100%;
			font-weight: bold;
		}
		hr {
			width: 75%;
			height: 0.1em;
			background: linear-gradient(to right, rgba(0,0,0,0), #BA83B8, #F5DDFF, #BA83B8, rgba(0,0,0,0));
			border: transparent;
			margin-top: -0.25em;
			margin-bottom: 0.25em;
		}
	}
	
	.bghead::after {
		content: "change background"
	}
	
	.clickers a {
		color: var(--link-dark);
		cursor: pointer;
		text-decoration: underline;
	}
	
	.clickers a:hover {
		color: white;
	}
	
	@media (max-width: 1768px) {
		.bghead::after {
			content: "change bg"
		}
	}
}

@media (max-aspect-ratio: 1) {
	.head {
		width: 100vw;
		margin-left: 0;
	}
	.main {
		width: 100vw;
		left: 0;
		border-left: 0px solid transparent;
		border-right: 0px solid transparent;
		border-radius: 0px;
	}
	@media (max-width: 1280px) {
		.navbar {
			font-size: 0.7em;
		}
	}
}

@media (min-aspect-ratio: 1) {
	@media (max-width: 1720px) {
		.navbar {
			font-size: 0.8em;
		}
	}

	@media (max-width: 1480px) {
		.navbar {
			font-size: 0.7em;
			
		}
	}
	@media (max-width: 1280px) {
		
		.navbar {
			font-size: 0.7em;
		}
	}
}