canvas {
	background-color: light-dark(#002233, #00559933);
	margin-left:auto;
	margin-right:auto;
}

.post-category {
	color: light-dark(#551100, #aaddff);
	background-color: light-dark(#d6d6d6, #333344);
	border: 1px solid light-dark(darkgray, #111);
	border-radius:5px;
	padding-left:5px;
	padding-right:5px;
	margin-right:5px;
}
.post-category:hover {color:light-dark(#113366, #33ddff);background-color:light-dark(#aabbcc, #004499);}

.blog-post {
	background-color: light-dark(#e0e0e0, #0e0e0ebb);
	padding:20px;
	border-radius:10px;
	margin-top:10px;
	margin-bottom:10px;
	margin-right:10px;
}

.post-container p a {
	text-decoration:underline;
}

.dark .blog-post {
	backdrop-filter:blur(2px);
}

.page-title {
	margin-left:20px;
	margin-right:20px;	
}

.dark .page-title{
	text-shadow:2px 2px 0px black;
}

.page-content {
	border-radius:10px;
	background-color: light-dark(#bbccdd, #33559999);
}

body.dark {
	background-image: url("https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExNHV4aGJzOG9ranI5YWVtOGZ6ZTZvajd4ZmVkeDRvZHdtdTFqNnowbyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/TxVVB6PfWMjE4/giphy.gif");
	background-repeat:repeat;
	image-rendering:pixelated;
	color-scheme:dark;
}

body.light{
	color-scheme:light;
}

.audio-player {
	margin-top:15px;
	width:300px;
}

audio{
	margin:0px;
	padding:0px;
	border-radius:0px;
	width:300px;
}

.mbar a {padding:5px;padding-left:10px;padding-right:10px;}
a:link {color: light-dark(teal, white);text-decoration:none;}
a:visited {color: light-dark(teal, white);}
a:hover {color:light-dark(blue, teal);font-weight:bold;}
.mbarcon {
	background-color: light-dark(white, black);
}
.side-bar {
	width:30%;
	background-color:light-dark(#aabacc, #333344aa);
	margin-left:auto;
	padding-left:10px;
	padding-right:10px;
	min-width:192px;
	max-width:240px;
}

.img-attachments {
	float:right;
	margin-left:2em;
	max-width:30%;
}
.img-attachments img{
	width:100%;
}

[role="menuitem"]{
	text-shadow:1px 1px 3px light-dark(white, red);
}
[role="menuitem"] img{
	filter:drop-shadow(0px 0px 3px light-dark(white, red));
}
[role="menuitem"] a:link, [role="menuitem"] a:visited{
	color: light-dark(black, white);
}