:root {
	--header-image: url('resources/space.gif');
	--body-bg-image: url('resources/sitebg.jpg');
	--purple-point: url('resources/purplepoint.gif');
	--blue-point: url('resources/bluepoint.gif');
	--small-point: url('resources/dot.png');
	--cursor-default: url('resources/cursor.gif');
	--cursor-link: url('resources/cursor_link.gif');

	/* colors */
	--theme-dark-bg: #023059;
	--theme-medium-bg: #260126;
	--theme-light-bg: #023059;
	--theme-text-focus: #3bdbed;
	--theme-text-unfocus: #a84da8;
	--theme-text-default: #fcf5fc;
	--theme-border-blue: #30F2DF;
	--theme-border-purple: #EE05F2;
}

@font-face {
	font-family: VCR_OSD;
	src: url('resources/VCR_OSD_MONO_1.001.ttf');
}

body {
	font-family: 'VCR_OSD', sans-serif;
	margin: 0;
	background-color: var(--theme-dark-bg);
	color: var(--theme-text-default);
	background-image: var(--body-bg-image);
	cursor: var(--cursor-default), default;
}

a,button,input,textarea,label,[role=button],select,option{cursor: var(--cursor-link), pointer}

* {
	box-sizing: border-box;
}

#container {
	max-width: 1000px;
	margin: 0 auto;
}

#container a {
	color: var(--theme-text-focus);
	font-weight: bold;
}

#header {
	width: 100%;
	background-color: var(--theme-light-bg);
	height: 210px;
	background-image: var(--header-image);
	background-position: 0 -300px;
	background-size: 100%;
	margin-bottom: 10px;
}

#flex {
	display: flex;
}

main {
	flex: 1;
	order: 2;
}

main hr {
	color: var(--theme-border-blue);
	margin: 20px 0;
}

footer {
	background-color: var(--theme-medium-bg);
	width: 100%;
	text-align: center;
	font-size: 12px;
	border: 1px solid var(--theme-border-purple);
}

h1,
h2,
h3 {
	color: var(--theme-text-focus);
}

h1 {
	font-size: 25px;
}

h2 {
	font-size: 20px;
}

strong {
	color: var(--theme-text-focus);
}

.box {
	background-color: var(--theme-dark-bg);
	border: 1px solid var(--theme-border-blue);
	padding: 10px;
}

.post {
	background-color: var(--theme-light-bg);
	padding: 10px;
	border: 1px solid var(--theme-border-blue);
}

.post h2 {
	font-size: 14px;
	font-style: italic;
	color: var(--theme-text-unfocus);
}

.post+.post {
	margin-top: 10px;
}

.tooltip {
	display: inline;
	border-bottom: 2px solid var(--theme-border-blue)
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 240px;
	background-color: var(--theme-medium-bg);
	color: var(--theme-text-unfocus);
	padding: 10px;
	border: 1px solid var(--theme-border-purple);
	position: absolute;
	z-index: 1;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}

#wga img {
	display: block;
	width: 80%;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}

#topBar {
	width: 100%;
	height: 30px;
	padding: 10px;
	font-size: smaller;
}

.soren {
	position: fixed;
	bottom: 0;
	right: 20px;
	width: 400px;
}

.sorenscreen {
	position: fixed;
	bottom: 220px;
	right: 192px;
	width: 100px;
	border-radius: 50%
}

main li {
	list-style-image: var(--small-point);
	margin: 10px 0;
}

.smalllist {
	list-style-image: var(--small-point) !important;
}

ol {
	padding-left: 16px;
}

button {
	padding: 8px;
	background: linear-gradient(var(--theme-dark-bg), var(--theme-dark-bg)) padding-box,
				linear-gradient(to bottom, var(--theme-border-blue), var(--theme-border-purple)) border-box;
	border-radius: 4px;
	border: 1px solid transparent;
	color: inherit;
	font: inherit;
}
button:active {
	background: linear-gradient(var(--theme-medium-bg), var(--theme-medium-bg)) padding-box,
				linear-gradient(to bottom, var(--theme-border-blue), var(--theme-border-purple)) border-box;
}

/* SIDEBAR */

aside {
	background-color: var(--theme-medium-bg);
	width: 260px;
	max-width: 260px;
	padding: 5px 10px;
	margin-right: 10px;
	font-size: smaller;
	flex: 1 1 auto;
	border: 1px solid var(--theme-border-purple);
	order: 1;
	min-height: 800px;
}

aside hr {
	color: var(--theme-border-blue);
	margin: 20px 0;
}

a {
    color: var(--theme-text-focus);
}

.lilbox {
	border: 1px solid var(--theme-border-purple);
	border-radius: 10px;
	padding: 10px;
	margin: 5px;
}

.lilbox h2 {
	margin: 0;
}

.lilbox span {
	display: inline-block;
	margin: 10px 0;
}

.currenttitle {
	border: 1px dashed white;
	border-radius: 10px;
	padding: 5px;
	background-color: #99888855;
}

#sidebarList li {
	list-style-image: var(--purple-point);
	margin: 10px 0;
}

#sidebarList .alternate {
	list-style-image: var(--blue-point);
}

li img {
	vertical-align: middle;
}

/* BELOW THIS POINT IS MEDIA QUERY */

/* so you wanna change the width of your page? 
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the 
"max-width" value below
*/
@media only screen and (max-width: 800px) {
	#flex {
		flex-wrap: wrap;
	}

	#header {
		height: 70px;
		background-position: 0 -150px;
	}

	/* the order of the items is adjusted here for responsiveness!
	since the sidebars would be too small on a mobile device.
	feel free to play around with the order!
	*/
	main {
		order: 1;
		margin: 6px;
	}

	.card {
		width: 100%;
		overflow-wrap: break-word;
		height: 400px;
	}

	.card+.card {
		margin-left: 0;
		margin-top: 10px;
	}

	.tooltip {
		border: none !important;
	}

	.tooltip .tooltiptext {
		visibility: visible;
		display: inline;
		width: auto;
		position: relative;
		border: none !important;
		background-color: inherit;
		padding: inherit;
	}

	.soren {
		visibility: hidden;
	}

	.sorenscreen {
		visibility: hidden;
	}
	aside {
		width: 100%;
		max-width: 100%;
		order: 2;
		margin: 6px;
	}
	
}