@charset "UTF-8";

:root
{
	--overtanger-background-color:              rgba(   0,   0,   0, 0.75 );
	--overtanger-border-color:                  rgb(  128, 192, 255 );
	--overtanger-text-color:                    rgb(  255, 255, 255 );

	--overtanger-headline-text-color:           rgb(  128, 192, 255 );

	--overtanger-button-background-color:       rgb(   32,  48,  64 );
	--overtanger-button-background-color-hover: rgb(   64,  96, 128 );
}

html
{
	overflow: scroll;
	min-height: 100%;
}

body
{
	background-image: url( "../images/background.png" );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;

	font-family: monospace;
	font-size: 1rem;

	margin: 0px;
	padding: 0px;
}

img.overtanger-photos
{
	margin: 8px;

	border: 2px solid var( --overtanger-border-color );
}

pre
{
	margin: 0px;
}

div.overtanger-content
{
	display: block;
	position: absolute;
	width: 100%;
	margin: auto;
}

div.overtanger-main
{
	background: var( --overtanger-background-color );
	border: 4px solid var( --overtanger-border-color );

	width: fit-content;
	height: fit-content;
	margin-left: auto;
	margin-right: auto;
	margin-top: 16px;
}

div.overtanger-headline
{
	font-size: 24px;
	color: var( --overtanger-headline-text-color );

	padding: 8px;
}

div.overtanger-photos
{
	font-size: 16px;
	color: var( --overtanger-text-color );
	text-align: center;
}

div.overtanger-thumbnail
{
	width: fit-content;
	height: fit-content;
}

div.overtanger-thumbnail img
{
	background: rgb( 255, 255, 255 );
	width: 20vw;
	display: block;
	-webkit-transition: all 0.25s ease-in-out;
	        transition: all 0.25s ease-in-out;
}

div.overtanger-thumbnail img.overtanger-large
{
	left: 50vw;
	top: 50vh;
	max-height: 80vh;
	position: fixed;
	z-index: 50;
	width: 0vw;
	object-fit: contain;
	-webkit-transform: translate( -50%, -50% );
	        transform: translate( -50%, -50% );
}

div.overtanger-thumbnail:hover img.overtanger-large
{
	z-index: 60;
	width: 80vw;
}