::selection{
	background-color: #0F0 !important;
	color: #000 !important;
	border-radius: 10px; 
}
body{
	font-family: Atkinson Hyperlegible,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif;
	color: white;
	background: black;

	margin: auto;
}

.body{
	margin: auto;
}
.listcaption{
	margin-top: -0.65em;
}
@media screen and (orientation:portrait) {
	body .body{
		width: 75%;
	}
	img.figure{
		max-width:75%;
		text-align: center;

		margin-left: 12.5%;
	}
	.rec img{
		max-width:75%;
		text-align: center;

		margin-left: 12.5%;
	}
	.item{
		width: 75%;
	}
	figcaption{
		max-width: 75%;
		margin: auto;
	}
	.sticker{
		display: none;
	}
}
@media screen and (orientation:landscape) {
	body .body{
		width: 30em;
	}
	img.figure{
		max-width:30em;
	}
	.rec img{
		max-width:30em;
	}
	.item{
		width: 30em;
	}
	figure img{
		max-width: 30em;
	}
	figure figcaption{
		max-width: 30em;
		min-width: 100%;
	}
	.sticker{
		position: fixed;
		right: 10em;
		top: 6em;
		width: 225px;
		transform: rotate(25deg);
		text-align: right;
	}
}
.portfolio {
	list-style-type: none;
}
.errormsg{
	display: flex;
	justify-content: center;
	margin: auto;
	padding: 2em;
}
details[open] summary ~ * {
	animation: toggle 0.75s ease-in-out;
}
@keyframes toggle {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}
details.easteregg{
	display: inline-block;
	font-size: calc(1.5vh + 2px);
}


details div{

	text-align: center;
}
details.easteregg summary{

	list-style-type: '';
}
details.easteregg summary::-webkit-details-marker{
	display: none;
}
details summary > * {
	display: inline-block;
}
.pronouns{
	font-size: calc(1vh + 2px) !important;
	background-color: #333139;
	border-radius: 5px;
	width:fit-content;
	margin:auto;
}
ul {
    margin-top: -.5em;
}
p.intro{
	font-size: calc(2vh + 2px);
}
.pronouns p{
	padding: 0.25rem;
}
img.bonus{
	max-width: 30rem;
	border-radius: 1rem;
}
@keyframes spin{
	100% {
		transform: rotate(360deg);
	}
}
@keyframes bounce {
	0%,to {
		transform: translateY(-25%);
		animation-timing-function: cubic-bezier(.8,0,1,1)
	}

	50% {
		transform: none;
		animation-timing-function: cubic-bezier(0,0,.2,1)
	}
}
ul{
	font-size: 2vh;
}
.linkheader{
	font-size: calc(2vh + 2px);
}
.links li {
	display: flex;
	align-items: center;
	margin: 10px 0;


	line-height: 10px;

	list-style: none;
}
a.link:visited{
	color: aqua;
}
a.link:link{
	color: aqua;
}
a:link{
	color: lightcyan;
}
a:visited{
	color: aqua;
}
.link{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.header{
	display: flex;
}
.header p{
	font-weight: initial;
}
img.avatar{
	height: 5rem;
	width:5rem;
	vertical-align: top;
	border-radius: 50%;
	transform: scaleX(-1);
	margin-right: 0.75rem;
}

img.icon{
	display: block;
	flex-shrink: 0;
	height: 2rem;
	width: 2rem;
	margin-right: 10px;

	vertical-align: middle;

}
div.icon{
	display: inline-block;
	flex-shrink: 0;
	height: 2rem;
	width: 2rem;
	margin-right: 10px;

	vertical-align: middle;

	background-size: contain !important;
	border-radius: 20%;
	content: '';
}
.icon.cohost{
	background-color: rgb(255, 171, 92) !important;
	background: url('assets/eggbug.png') no-repeat left center;
}
.icon.twitter{
	background-color: #1da1f2 !important;
	background: url('assets/twitter.png') no-repeat left center;
}
.icon.mastodon{
	background: url('assets/mastodon.png') no-repeat left center;

}
.icon.discord{
	background: url('assets/discord.gif') no-repeat left center;
}
.icon.instagram{
	background: url("assets/insta.png") no-repeat left center;
}
.icon.email{
	background: url("assets/email.png") no-repeat left center;
}
.icon.steam{
	background: linear-gradient(to top, #1386B7 0%, #145689 25%, #0F2556 50%, #07193F 75%, #111D2E 100%) no-repeat left center;
}
.icon.soundcloud{
	background: url("assets/soundcloud.png") no-repeat left center;
}
.icon.steam img{

	height: 2rem;
	width: 2rem;

}
.icon.merch{
	background: url("assets/merch.png") no-repeat left center;
}
.icon.twitch{
	background: url("assets/twitch.png") no-repeat left center;
}
.icon.buelfest{
	background: url("assets/buelfest.png") no-repeat left center;
}
.icon.wrir{
	background: url("assets/wrir.png") no-repeat left center;
}
.icon.patreon{
	background: url("assets/patreon.png") no-repeat left center;
}
.anim{
	display:inline-block;
}
.emote{
	width: 2em;
	height: 2em;
	vertical-align: middle;
	display: inline-block;
	margin-right: 2px;
	margin-left: 2px;
}
.rec{
	color: white !important;
	text-align: left;
}
.recBody{
	border-radius: 10px;
	background-color: #333139;
	min-width: fit-content;
	padding: 1em 1em 1em 2em;
	margin-top: 0;
	margin-bottom: 10px;
}
.recDeets summary{
	border-radius: 10px;
	background-color: #4B455B;
	padding:0 0.5em 0.15em 0.5em;
	margin-bottom: 10px;
	width: fit-content;
	vertical-align: middle;

	cursor: pointer;
}
span.tag{
	border-radius: 1em;
	background-color: #26465B !important;
	color: #00E7D1 !important;
	padding: 3px 6px 3px 5px;
	border: 1px solid cyan;
	display: inline-block;
	margin: 3px 0 3px 0;
}
.\#easy{
	border: 1px solid #00ff00 !important;
}
.\#hard{
	border: 1px solid #ff0000 !important;
}
#muteButton{
	width:2em;
	height:2em;
	position:absolute;
	margin: 1em;
	cursor: pointer;
}
#muteButton img{
	width:2em;
	height:2em;
}
#footer{
	font-size: 0.5em;
	color: #aaa;
}
.webring-container{
	display: flex;
	overflow-x: scroll;
	overflow-y: hidden;
}
.webring-item a img{
	max-width: 240px;
	max-height: 60px;
}