:root{
	--sideWidth: calc( ( 100vh / 1920 ) * 1080 );
	--logoSize: 120px;
	--titlesize: 96pt;
	--fontSize: 24pt;
	--menuPadding: 0pt;
	--textColor: #000;
	--backgroundColor: #fff;
}
*{
	font-family: sans-serif;
	cursor: url("cursor22.png"), default;
	line-height:0.9em;
	letter-spacing: -0.05em;
	color: var(--textColor);
}
* a:hover,
* a:hover *,
* a:hover #poster p{
	color: blue;
}
body{
	display: flex;
	flex-direction: row;
	min-height:100vh;
	margin: 0;
	background: var(--backgroundColor);
}
p, h1, h2, h3, h4, h5, h6{
	transition: font-size 0.05s linear;
	font-size: var(--fontSize);
	font-weight: normal;
	padding: 0;
	margin: 0;
}
p, h4{
	font-size: var(--fontSize);
}
h5{
/*	font-size: 8pt;*/
	font-size: calc( var(--fontSize) - 4pt );
}
img{
/*	max-height: 420px;*/
	max-width: 100%;
}
#titleContainer{
	max-height: var(--titleSize);
	overflow: auto;
	position:relative;
	mask-image: url("titlelogo.png");
	mask-size: contain;
	mask-repeat: no-repeat;
	background: var(--textColor);
	display: inline-block;
/*	height:65px;*/
}
#title{
	font-size: var(--fontSize);
	font-weight: bold;
	opacity: 0;
}
#logos{
	display: block;
	max-width: var(--logoSize);
	height: var(--logoSize);
	mask-image: url("logosheet.png");
	mask-size:cover;
	border-radius: calc( var(--logoSize) / 2 );
	/*background: black;*/
	backdrop-filter: invert(1);
	-webkit-backdrop-filter: invert(1);
}
#main{
/*	background: linear-gradient(#DDFFDF, #acd);*/
	flex-grow:1;
	flex-shrink:1;
	padding: 13pt;
}

#main ul{
	list-style: none;
	margin:0;
	padding: 0;
}
.larger .label{
	font-size: calc( var(--fontSize) + 8pt);
	color: red;
}
.larger p{
	white-space: pre-wrap;
}
.label{
	width:100%;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.expandable > *:not(:first-child){
	display:none;
}
.expandable > *:first-child{
	display: initial;
}
.expandable > *:first-child:hover,
.expandable.expanded > *:first-child:hover{
	color:blue;
}
.expandable.expanded > *:first-child{
	color:purple;
}
.expandable.expanded > *:not(:first-child){
	height:initial;
}
.expandable.expanded > *:last-child{
	padding-bottom:3pt;
	height:initial;
/*	display: block;*/
}
.expandable.expanded > *{
/*	color:initial;*/
	display: block;	
}

.expanded .expanded h4{
	#font-size: 24pt;
	#font-weight: bold;
}
.description{
	width:100%;
	max-width: 800px;
	padding: 4pt 0;

}
#main ul li:hover{
	color: blue
}
.description{
	white-space: pre-wrap;
}
.inlineLink:not(:has(p))::after,
.inlineLink:has(p) p::after,
#poster p::after{
	content:"";
	display: inline-block;
/*	width: 	calc( var(--fontSize) - 4pt );
	height: calc( var(--fontSize) - 4pt );*/
	width: 	calc( 1em - 4pt );
	height: calc( 1em - 4pt );
	margin-left: 2pt;
	background: black;
	mask-image: url("external.png");
	mask-size: cover;
}.inlineLink:not(:has(p)):hover::after,
.inlineLink:has(p) p:hover::after,
#poster:hover p::after{
	background: blue;
}
#sideBar{
	transition: transform 0.05s;
}
#sideBar,
a{
	text-decoration: none;
}
#poster{
	transition: height 0.05s linear,
				width 0.05s linear;
	display: flex;
	flex-direction: column;
/*	background: linear-gradient(transparent, #ffffffcc), url("posters/sample.png");*/
	background-size: cover;
	background-location-x:0;
	box-sizing: border-box;
	box-shadow: 0 0 12pt #0003;
}
#poster.empty{
	background-image: url("camel.gif");
}
#poster p{
	color: black;
	#font-weight:bold;
}
#posterPadding{
	flex-grow:1;
}

/*#logos{
	position: fixed;
	background: url("logos.png")	
}*/

#lightBox:has(.hidden){
	display: none;
}
#lightBox{
	position: fixed;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	background: #00000099;
	padding:4pt;
	box-sizing: border-box;
}
#lightImage{
	width: initial;
	height: initial;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}
/* Temp? */
#logoContainer{
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	z-index: 200;
	padding: 50vh 50vw;
}
#logoContainer #logos{
	transition: width 0.05s linear,
				height 0.05s linear;
	pointer-events: initial;
	width:	var(--logoSize);
	height:	var(--logoSize);
	margin-top: 0;
	max-width: initial;
	border-radius: 100%;	
	transform: translateX(-50%) translateY(-50%);
}
#logoContainer{
	transition: opacity 0.15s linear,
				background-position 0s linear 2s,
				filter 0.15s linear; 
}
body:has( .expanded) #logoContainer{
/*	z-index: -100;
	opacity: 0.6;
	filter: blur(0.5pt);*/
}
body:has(.expanded .expanded) #logoContainer{
/*	opacity: 0.2;
	filter: blur(1pt);*/
}
body.negative{
	
}
body:has(#titleContainer.playing){
	background: url("camel.gif");
/*	background-size: contain;*/
}


@media (prefers-dark-interface){
	--textColor: #fff;
}
[data-theme="dark"],
body:has(#titleContainer.playing){
	--textColor: #fff;
	--backgroundColor: #000;
}
@media (orientation: landscape) {
	:root{
		--fontSize: 16pt;
	}
	#sideBar{
		flex-shrink: 0;
		display: block;
		flex-grow: 0;
		width:  var(--sideWidth);
		max-width: calc( 50vw - ( var(--logoSize) / 2 ) - 8pt );
	}
	#titleContainer{
		
	#left: -4px;
	}
	#poster{
		height:100%;
		max-height: 100vh;
		position: sticky;
		top: 0;
		padding: 0 20pt;
	}
	#logos{
		margin-top: 18pt;
	}
	#posterInfo{
		margin: 0;
		margin-bottom: 20pt;
		display: block;
	/*	font-weight: bold;
		font-size:24pt;*/
	}
}
@media (orientation: portrait) {
	:root{
		--fontSize: 28pt;
		--titleSize: 146pt;
		--logoSize: 96pt;
	}
	#poster p::after{
		margin-bottom: -4pt;
	}
	#sideBar{
		margin: 6pt;
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 1000;
	}
	#poster{
		padding: 4pt;
		width: 46vw;
		height: calc( 46vw * 1.414 );
	}
	#poster.empty{
		opacity: 0.5;
	}
/*	body:has(.expanded) #sideBar{
		transform: translateX(50%);
	}*/
	body:has(.expanded .expanded) #sideBar,
	body:has(.larger.expanded) #sideBar{
		transform: translateX(110%);
	}
	#poster.shadow{
		box-shadow: 0 0 4px #00000066;
	}
	#main{
		overflow-x: hidden;
	}
	#titleContainer{
	/*	max-height: var(--titleSize);
	/*	min-width: calc( 100% + 13pt - -4px);*/
		mask-repeat: no-repeat;
		left: 2pt;
		
	/*	min-height: 83.2pt; */
		width: 100%;
	}
}