:root{
	--logoOverhang: -20px;
}
html{
	background: #fff;
	transition: background 0.2s;
}
html.dimlights{
	background: #111;
}

.dimlights #exlabel{
	background-color: #111;
	border-color: #333;
	color: #fff;
}
.dimlights #imgContainer{
	background-color: #fff;
}
main{
	max-height: 100vh;
}
.dimlights #changelog{
	color: #333;
}
#changelog{
	position: fixed;
	z-index: 100;
	color: #666;
	filter: blur(0.5pt);
	-webkit-filter: blur(0.5pt);
	transform:scale(1.1);
/*	text-shadow: 0 1px 0 #161;*/
}
#changelog a{
	color: blue;
	text-shadow: 0 1px 0 #116
}
#changelog a:hover{
	color: blue;
	text-shadow: 0 1px 0 #116
}
/*.dimlights #changelog{
	color: #6f6;
}*/
#changelog li,
#changelog #intro,
#changelog #staytuned{
	opacity: 0.8;
}
#changelog.hiding li,
#changelog.hiding #intro,
#changelog.hiding #staytuned{
	opacity: 0;
}
#changelog li,
#changelog #intro,
#changelog #staytuned{
	transition: opacity 0s;
	transition-delay: calc( 0.1s * var(--i) );
}
#changelog #staytuned{
	transition-delay: 1.8s;
}
#staytuned,
#changelog a:hover{
	color: #f33;
	text-shadow: 0 1px 0 #633;
}
#excontainer{
	position: fixed;
	height:100%;
	max-width: calc( 100vw - var(--pageCrop) );
	display: flex;
	align-items: center;
}
#videoContainer{
	position: relative;
	margin-right: var(--logoOverhang);
	width: 100%;
}
#smthElse smth{
	position: absolute;
	position: absolute;
	bottom: 10%;
}
#exhibit{
	display: flex;
	flex-direction: row;
	gap: 6px;
	padding: 0 32px 0 12px;
}
#exhibit > *:first-child{
	display: flex;
	align-items: end;
}
#exlabel{
	max-width: 100%;
	width: 260px;
	background-image: url("/images/assets/background/marble.gif");
	background-color: #fff;
	background-blend-mode: multiply;
	box-sizing: border-box;
	border: 1px outset #fff;
	padding: 3px;
	font-size: 10pt;
	transition: background-color 0.5s; 
}
#exlabel button{
	border: none;
	border-radius: 0;
	border-width: 1px;
	padding: 4px;
	background: #fff;	
}
video{
	position: relative;
/* This magically fixed the extra space at bottom issue! */
    width: 100%;
    height: 100%;
    display: flex;
}
#imgContainer{
	display: inline-block;
	background-color: black;
	mask-image: url("/post/salvation1080/web.png");
	-webkit-mask-image: url("/post/salvation1080/web.png");
	mask-size: 100%;
	mask-position: bottom right;
	mask-repeat: no-repeat;
/*}
#salvationTitle{*/
	position: absolute;
	bottom: var(--logoOverhang);
	right:  var(--logoOverhang);
	max-width: 70%;
}
#salvationTitle{
	opacity: 0;
}
#usercards{
	position: fixed;
	bottom: 0;
	right: 0;
	display: flex;
	flex-direction: row;
	transform: scale(0.8);
	transform-origin: bottom right;
	bottom: -20px;
/*	right: -4px;*/
	right: calc( var(--pageCrop) - 20px );
	pointer-events: none;
}
#usercards > *{
	position: relative;
	transition: transform 0.05s;
	pointer-events: initial;
	transform: translateY( 200% );
}
#usercards > *:first-child{
	right: -150px;
	transition-delay: 0.2s;
}
#usercards > *:last-child{
	transition-delay: 0.1s;
/*	z-index: -1;*/
}

@media(orientation: portrait){
	
	#exhibit{
		flex-direction: column-reverse;
	}
	
	#usercards{
		transform: scale(0.6);
		flex-direction: column;
	}
	#usercards > *:first-child{
		right: -50px;
		bottom: -60px;
	}
}