vizchange-animation-story/css/browning.css

beta testing story tool for vizchange.net

:root {
	--vh-store: 1vh;
	--vw-store: 1vw;
	--vh: var(--vh-store, 1vh);
	--vw: var(--vw-store, 1vw);
	--main-bg-color: example;
	--min-height: 50%;
	--max-height: calc(min(100 * var(--vh), 540px));
	--left-margin: calc((100% - 980px) / 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));

	/*
	--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);
}


* {
	-ms-overflow-style: none;
	scrollbar-width: none;
/*
	cursor: none;
 */
}
*::-webkit-scrollbar {
	display: none;
}


body {
	background-color: #508ef2;
}

html, body {
	overflow-x: hidden;
}
html, body, body * {
	padding: 0 0 0;
	margin: 0;
}

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

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

	 */
	display: inline-block;
}

@media (orientation: landscape) {

}



.sections {
	background: transparent;
	/*opacity: 0!important;
     */
	position: fixed!important;
	max-height: 100%!important;
	width: auto!important;
	left: 0!important;
	top: 0!important;
	/*object-position: 0% top!important;

     */
	pointer-events: none;
}


.segment {
	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;
	height: 100vh!important;
	max-height: var(--max-height);
	width: auto;
	top: var(--margin-top-height)!important;
	object-fit: cover!important;
	pointer-events: none;
	left: var(--left-margin);
}