.t1 {
  --col1: #ff6666;
	--backcol1: #220000;
	--bordcol1: #cc0033;
	--col2: #33ffbb;
	--backcol2: #221111;
	--bordcol2: #33ffbb;
	--link: #ffffff;
}
.t2 {
	--col1: #33ffbb;
	--backcol1: #221111;
	--bordcol1: #33ffbb;
  --col2: #ff6666;
	--backcol2: #220000;
	--bordcol2: #cc0033;
	--link: #ffffff;
}
.t3 {
	--col1: #ffdd66;
	--backcol1: #553300;
	--bordcol1: #cccc66;
  --col2: #ffffbb;
	--backcol2: #335500;
	--bordcol2: #cccc33;
	--link: #ffbabe;
}

body {
    max-width: 1000px;
	margin: auto;
	background-image: url('nebulamagenta.jpg');
}

a {
	color: var(--link)
}

#container {
	height: 600px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	border-radius: 12px;
}

#sidebar {
	order: 1;
	width: 25%;
	display: flex;
	flex-flow: column nowrap;
	color: var(--col2);
	background-color: var(--backcol2);
	border: var(--bordcol2) 1px;
	padding: 7px;
	border-radius: 12px;
}

#mainpage {
	order: 2;
	width: 75%;
	display: flex;
	flex-flow: column nowrap;
	color: var(--col1);
	background-color: var(--backcol1);
	overflow: auto;
	scrollbar-color: #442244 #000000;
	padding: 7px;
	border: var(--bordcol1) 1px;
	border-radius: 0px 12px 12px 0px;
}