/* Colors */

:root {
/* #994CFF - Light purple 
	#6430AD - Dark Purple
#451987

*/
	--p1: #451987;
	--p2: #6430AD;
	
	--b1: #994CFF;
	--b2: #0030AD;

	--wht: #F1E9E9;
	--blk: #000000;
}

/* #363BA0 #15173D */
/* Main Body */

* {
	color: var(--wht);
}

body {
	background: url('../img/textures/bg.png');
	image-rendering: pixelated;
	font-family: 'Verdana', sans-serif;
	font-size: 14px;
}

div {
	background-color: #00000000;
}

.wrapper {
	width: 1030px;
	margin: auto;
	transform: scale(1);
	transform-origin: top left;
}

.container {
	display: grid;
	grid-template-columns: 25% 55% 20%;
/*	grid-template-rows: 136px 52px 1fr 1fr 52px; */
	grid-column-gap: 15px;
	grid-row-gap: 12px;
	background-color: #00000000;
	width: 1000px;
}

.title-container, .globe-container, .ticker-bar, nav, .main-menu-bar, article, section, .side-bar, .animation-side, footer {
	border: 3px inset var(--p1);
	outline: 3px outset var(--p1);
/*	box-shadow: 6px 6px #6430AD40; */
	background-color: #00000000;
}

.title-container {
	grid-area: 1 / 1 / 2 / 3;
	display: flex;
	height: 130px;
	padding: 0px 14px;
	overflow: hidden;
	background-image: linear-gradient(90deg, #00000040 0%, var(--blk) 100%), url('../img/textures/screen.png');
	animation: screen-shift 2s linear infinite;
}

header {
	font-family: 'Pxl';
	text-shadow: 5px 5px var(--p2);	
	font-size: 50px;
	text-align: right;
}

.header-character {
	width: 150%;
	height: 150%;
}

.windmill1 {
	height: 190%;
	margin-left: -124px;
	animation: windmill-spin 15s linear infinite;
}

.windmill2 {
	height: 190%;
	opacity: 60%;
	margin-left: -248px;
	animation: windmill-spin 15s .2s linear infinite;
}

@keyframes windmill-spin {
	0% { transform: rotate(0deg)};
	100% { transform: rotate(360deg)};
}	

.globe-container {
	grid-area: 1 / 3 / 2 / 4;
	overflow: hidden;
	height: 130px;
	background-image: url('../img/textures/screen.png');
}

.globe-container img {
	width: 326px;
	height: 229px;
	background-image: url('../img/glup/glup.gif');
	margin: -70px -31px;
}

@keyframes screen-shift {
	0% { background-position-y: 0px};
	100% { background-position-y: 20px};
}

/* Ticker Line */

.ticker-bar {
	grid-area: 2 / 1 / 3 / 4;
	display: flex;
	align-items: center;
	overflow: hidden;
	backdrop-filter: grayscale(100%);
}

#ticker {
	font-family: 'Verdana', sans-serif;
	font-size: 20px;
	animation: ticker-pan 20s 0s linear infinite;
}

@keyframes ticker-pan {
	0% { transform: translateX(150%) };
	100% { transform: translateX(-150%) };
}

/* Naviagtion Section */

nav {
	grid-area: 3 / 1 / 4 / 2;
	font-family: 'Daydream';
	font-size: 14px;
	white-space: nowrap;
	background-image: linear-gradient(90deg, #00000040 0%, var(--blk) 100%), url('../img/textures/screen.png');
	animation: screen-shift 2s linear infinite;
}

.nav-item {
	display: block;
	border-top: 3px inset var(--p1);
	border-bottom: 3px inset var(--p1);
	outline: 3px outset var(--p1);
	padding: 10px;
	margin: 0px;
	text-shadow: 2px 2px 1px var(--blk), 2px -2px 1px var(--blk), -2px 2px 1px var(--blk), -2px -2px 1px var(--blk), 2px 0px 1px var(--blk), 0px 2px 1px var(--blk), -2px 0px 1px var(--blk), 0px -2px 1px var(--blk);
	text-align: right;
	text-decoration: none;
	transition-duration: .5s;
	background-position: center;
	background-opacity: 50%;
}

.nav-item:hover {
	color: var(--blk);
	text-shadow: 2px 2px 1px var(--wht), 2px -2px 1px var(--wht), -2px 2px 1px var(--wht), -2px -2px 1px var(--wht), 2px 0px 1px var(--wht), 0px 2px 1px var(--wht), -2px 0px 1px var(--wht), 0px -2px 1px var(--wht);
	padding: 15px;
	transition-duration: .2s;
	backdrop-filter: brightness(100%) grayscale(100%);
}

.main-menu-bar img {
	padding: 0px;
	margin: 0px;
}

.nav-spacer {
	height: 21px;
	padding: 10px;
	margin: 0px;
	border-top: 3px inset var(--p1);
	border-bottom: 3px inset var(--p1);
	outline: 3px outset var(--p1);
	background: var(--blk);
	text-shadow: -3px 3px var(--p1);
}

article, section {
	grid-area: 3 / 2 / 5 / 4;
	padding: 12px;
	background-color: var(--blk);
}

.animation-side {
	grid-area: 4 / 1 / 5 / 2;
	backdrop-filter: grayscale(100%);
}

footer {
	grid-area: 5 / 1 / 6 / 4;
	display: flex;
	padding: 10px;
	justify-content: center;
	align-items: center;
}

/* Text */

h1, h2, h3, h4 {
	font-family: 'Daydream';
	letter-spacing: 2px;
	padding-bottom: 5px;
	border-bottom: 4px solid var(--p1);
	text-shadow: 4px 4px var(--p2);
}

h2, h3, h4 {
	text-shadow: 3px 3px var(--p2);
}

h5, h6 {
	font-family: 'daydream';
	font-size: 14px;
	letter-spacing: 2px;
	border-bottom: 1px solid var(--p1);
	line-height: 20px;
	text-shadow: -3px 3px var(--p1);
	padding-bottom: 4px;
	margin-left: 5px;
}

textarea {
	color: var(--blk);
	background: var(--wht);
}

li {
	font-size: 22px;
	margin-bottom: 15px;	
}

ul {
	margin-bottom: 30px;	
}

p {
	font-size: 18px;
	line-height: 24px;
}

.animation-side hr {
	border-top: 3px outset var(--p1);
	border-bottom: 3px outset var(--p1);
	color: var(--p1);
}

.animation-side ul {
	padding-right: 10px;
	margin: -10px 0px 15px -10px;
}

.animation-side li, .animation-size p {
	font-size: 14px;
	margin-bottom: 5px;	
}

/* 404 Error */

#astro {
	position: absolute;
	animation: astronut 35s ease-in 1 forwards;
	top: 50%;
}

.not-found-header {
	font-size: 20px;
	opacity: 0%;
	animation: not-found-appear 2s ease-in 1 forwards;
}

.not-found-text {
	opacity: 0%;
	animation: not-found-appear 2s 1s ease-in 1 forwards;
}

@keyframes astronut {
	0% {
		right: 110%;
		transform: rotate(0deg); 
	};
	
	100% {
		right: -10%;
		transform: rotate(900deg);
	};
}

@keyframes not-found-appear {
	0% { opacity: 0% };
	100% { opacity: 100% };
}

/* Buttons and Gifs */

.button {
	width: 88px;
	height: 31px;
	padding: 0px 2px;
}

.side-buttons-container {
	padding: 0px 27px;
}

/* Shrine Box */

.shrine-box {
	display: block;
	border-top: 3px inset var(--p1);
	border-bottom: 3px inset var(--p1);
	outline: 3px outset var(--p1);
	padding: 15px;
	margin: 0px -12px;
	font-family: 'Daydream';
	text-shadow: 2px 2px 1px var(--blk), 2px -2px 1px var(--blk), -2px 2px 1px var(--blk), -2px -2px 1px var(--blk), 2px 0px 1px var(--blk), 0px 2px 1px var(--blk), -2px 0px 1px var(--blk), 0px -2px 1px var(--blk);
	font-size: 25px;
	text-decoration: none;
	transition-duration: .5s;
}

.shrine-box:hover {
	color: var(--blk);
	text-shadow: 2px 2px 1px var(--wht), 2px -2px 1px var(--wht), -2px 2px 1px var(--wht), -2px -2px 1px var(--wht), 2px 0px 1px var(--wht), 0px 2px 1px var(--wht), -2px 0px 1px var(--wht), 0px -2px 1px var(--wht);
	transition-duration: .2s;
	padding: 20px 25px;
}

/* Info Box */

.info-box-container {
	float: right;
	width: 40%;
	border: 5px inset var(--p1);
	outline: 3px outset var(--p1);
	margin-left: 12px;
	margin-bottom: 12px;
	background: var(--blk);
}

.info-box-header {
	width: initial;
	padding: 10px;
	text-align: center;
	font-family: 'Daydream';
	font-size: 18px;
}

.info-box-image {
	width: 100%;
	height: 100%;
	border-top: 3px solid var(--p1);
	border-bottom: 3px solid var(--p1);
}

.info-box-table {
	width: 100%;
	padding-bottom: 5px;
}

.info-box-table th {
	width: 56%;	
}

/* Stats Box */

.stats-table {
	border: 3px inset var(--p1);
	text-align: center;
	margin: auto;
}

.stats-table tr {
	outline: 3px outset var(--p1);
}

.stats-table th {
	padding: 5px;
}

.stats-table td {
	padding: 5px;
	outline: 3px outset var(--p1);
}

.stat-bar-container {
	width: 300px;
}

.stat-bar {
	display: block;
	background-color: var(--p2);
	outline: 2px solid var(--p1);
	height: 20px;
}

/* List Box */

.list-box-container {
	display: inline-block;
	border: 3px inset var(--p1);
	outline: 3px outset var(--p1);
	margin: 0px;
	width: 49.7%;

}

.list-box-header {
	border: 3px inset var(--p1);
	outline: 3px outset var(--p1);
	text-align: center;
	padding: 7px;
	font-family: 'Daydream';
	letter-spacing: 2px;
}

.list-box-content {
	border: 3px inset var(--p1);
	outline: 3px outset var(--p1);
	text-align: center;
	height: 250px;
	overflow: scroll;
}

#games img {
	display: block;
	width: 100%;
	filter: invert(1) grayscale(1);
	transition-duration: .5s;
}

#music img {
	display: inline-block;
	width: 49.5%;
	filter: invert(1) grayscale(1);
	transition-duration: .5s;
}

#music img:hover, #games img:hover {
	filter: invert(0);
	transition-duration: .2s;
}

#mold {
	color: green;
	animation: mold-animation 3s linear infinite;
}

@keyframes mold-animation {
	0% { color: green; };
	50% { color: black; };
	100% { color: green; };
}

.photo {
	border: 3px inset var(--p1);
	outline: 3px outset var(--p1);
	margin-right: 12px;
	margin-bottom: 12px;
}

.sortable-list {
	width: 100%;
	height: 49px;
}

.sortable-button-container {
}

.sortable-button-container button {
	height: 100%;
}