:root {
	--vh-store: 1vh;
	--vw-store: 1vw;
	--vh: var(--vh-store, 1vh);
	--vw: var(--vw-store, 1vw);
	--main-bg-color: example;
	--min-height: 50%;
	--ratio: 980/560;
	--ratio-rev: 560/980;
	--max-height: calc(min(75 * var(--vh), 560px));
	--max-height-ratio: calc(540px / var(--max-width));
	--max-height-adjusted: calc(min(75 * var(--vh), min(560px, var(--max-width) * var(--ratio-rev))));
	--max-height-adjusted: calc(min(75 * var(--vh), min(560px, var(--max-width) * var(--ratio-rev))));

	--max-width: calc(min(100 * var(--vw), 980px));
	--max-width-ratio: calc(980px / var(--max-height));
	--max-width-adjusted: calc(min(100 * var(--vw), min(980px, var(--max-height) * var(--ratio))));
	--left-margin: calc(((100 * var(--vw)) - var(--max-width-adjusted)) / 2);
	--left-margin-not-zero: calc(max(var(--left-margin), -1 * var(--left-margin)) / 2 + var(--left-margin)/2);
	--right-side-bottom: calc(100 * var(--vh) - var(--max-height));
	--margin-border-height: calc(0.2 * var(--vh));
	--margin-border-width: calc(0.2 * var(--vw));
	--max-plot-ratio: calc(560px / var(--max-height-adjusted));
	/*
	--margin-top-height: calc(10 * var(--vh));
	 */
	--margin-top-height: calc(10 * var(--vh));
	/* TODO use */
	--top-margin: 0;
	--bottom-margin-not-zero: calc(max(var(--max-height), -1 * var(--max-height)) / 2 + var(--max-height)/2);
	/* colors */
	--border-color: #495374;
	--border-width: min(5px, .2vb);
}

audio {
	display: none;
}

* {
	-ms-overflow-style: none;
	scrollbar-width: none;
/*
	cursor: none;
 */
}
*::-webkit-scrollbar {
	display: none;
}
body {
	display: block;
	flex-direction: column;
	background-color: #508ef2;
}

html, body {
	overflow-clip-margin: unset;
	overflow-x: hidden;
}
html, body, body * {
	padding: 0 0 0;
	margin: 0;
}
img {
	overflow: visible
}

.window {
	max-height: 1080px;
	max-width: 1920px;
}

.content {
	max-width: var(--max-width);
	position: relative;
	margin: 0;
	left: var(--left-margin);
	/*
	left: var(--left-margin-not-zero);

	 */
	display: inline-block;
}

@media (orientation: landscape) {

}



.sections {
	background: transparent;
	/*opacity: 0!important;
     */
	aspect-ratio: 980 / 560;
	max-width: calc(0.5 * var(--max-width));
	max-height: calc(0.5 * var(--max-height));
	position: fixed!important;
	left: 0!important;
	top: 0!important;
	/*object-position: 0% top!important;

     */
	pointer-events: none;
}


.segment {
	/* TODO set to 2500 between */
	z-index: 5000!important;
	width: var(--max-width-adjusted);
	height: calc(100 * var(--vh));
	top: 50%;
	padding: 0;
	margin:0;
}
.title {
	padding: 0vh 0vw 1vh 0vw;
	/*
	color: #527cfa;
	 */
	color: #495374;
}


.image-container {
	position: relative;
}
.image-block *, .image-block {
	/*
	border-bottom: 5px solid blue;
	 */
	position: fixed!important;
	aspect-ratio: 980 / 560;
	max-height: var(--max-height);
	max-width: var(--max-width);
	top: var(--margin-top-height)!important;
	object-fit: cover!important;
	pointer-events: none;
	left: var(--left-margin);
}