:root {
  --bodytext: #333;
  --highlighter: #09f;
  --midgrey: #ddd;
  --white: #efefef;
  
  --gradcol1: #111;
  --gradcol2: #777;
  --gradcol3: #046;
  
  --widprop: 60vw;
  --higprop: 60vh;
  --wide: 0.5em;
  --high: 0.5em;
}

*{
	user-select: none;
	
	transition-property: opacity, display;
	transition-duration: 0.5s;
	transition-behavior: allow-discrete;
}

.hidden {
  opacity: 0;
  display: none;
}

body>*:not(#sb){
	visibility: hidden;
	opacity: 0;
	display: none;
}


svg {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
	
button {
	width: 2em;
	height: 2em;
	cursor: pointer;
	background: none;
	transition: fill 350ms ease-in-out;
	border: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	padding: 0;
	fill: var(--bodytext);

	&:hover {
		fill: var(--highlighter);
	}
}

#sb{
	font-family: 'Switzer', sans-serif;
	font-size: 2em;
	font-weight: 500;
	user-select: none;
	
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	margin: 0;
	padding: 0;
	
	--_w: calc(50vw - (var(--higprop) * 0.5));
	--_h: calc(50vh - (var(--higprop) * 0.5));
	
	display: grid;
	grid-template-columns: var(--_w) var(--higprop) var(--_w);
	grid-template-rows: var(--_h) var(--higprop) var(--_h);
	
	@media only screen and (orientation: portrait) {
		--_w: calc(50vw - (var(--widprop) * 0.5));
		--_h: calc(50vh - (var(--widprop) * 0.5));
		
		grid-template-columns: var(--_w) var(--widprop) var(--_w);
		grid-template-rows: var(--_h) var(--widprop) var(--_h);
	}
	
	#info{
		grid-area: 1 / 1 / 2 / 2;
		line-height: 1.5;
		padding: 0.5em 0 0 0.5em;
		
		.title{
			background: linear-gradient(90deg, var(--gradcol2) 20%,
			var(--gradcol1) 40%, var(--gradcol1) 60%, var(--gradcol2) 80%);
			background-size: 200% 100%;
			background-clip: text;
			text-fill-color: transparent;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			animation: highlight 35s linear infinite;
			white-space: nowrap;
		}
		
		a{
			text-decoration: none;
			background: linear-gradient(90deg, var(--gradcol3) 20%,
				var(--gradcol1) 40%, var(--gradcol1) 60%, var(--gradcol3) 80%);
			background-size: 200% 100%;
			background-clip: text;
			text-fill-color: transparent;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			animation: highlight 35s linear infinite;
		}
	}
	
	#tv{
		grid-area: 2 / 2 / 3 / 3;
		justify-content: center;
		justify-items: center;
		align-content: center;
		align-items: center;
		
		transition-property: opacity, display;
		transition-behavior: allow-discrete;
		transition-duration: 1s;
		
		ul, li, .photo{
			padding: 0;
			margin: 0;
			width: 100%;
			height: 100%;      
		}
		
		.hidden {
			opacity: 0;
			display: none;
		}
		
		ul.picset{
			list-style: none;  
			position: relative;
						
			li{
				position: absolute;
				.photo{
					object-fit: cover;
				}
				
				&:not(:has(.select)){
					opacity: 0;
					display: none;
				}
			}
		}
	}
	
	#ig{
		grid-area: 3 / 3 / 4 / 4;
		justify-self: end;
		align-self: end;
		text-align: right;
		vertical-align: bottom;
	
		position: fixed;
		bottom: 1.5em;
		right: 1.5em;
		
		padding: 0 2em 2em 0;
		
		@media only screen and (orientation: portrait) {
			bottom: auto;
			top: 2em;
		}
		
	}

}
		

@-webkit-keyframes highlight {
	0% {
		background-position:-20%
	}
	to {
		background-position:180%
	}
}

@keyframes highlight {
	0% {
		background-position:-20%
	}
	to {
		background-position:180%
	}
}