/* so elements reach the edges of the browser window */
:root{
	--norm: 1.7777777;
	--neg-norm: -1.7777777;
	--bgcolor: white;
	--arrow-width: 12%;
	--max-arrow-width: 50px;
	--width-comp: 85%;
	--max-width-comp: 640px;
	--button-width: 30px;
	--rounding1: 10px;
	--max-height-comp: calc( var(--max-width-comp) / var(--norm) );
	--height-comp: calc( var(--width-comp) / var(--norm) );
	--half-height: calc( var(--height-comp) / var(--norm) );
	--max-half-height: calc( var(--max-height-comp) / var(--norm) );
	--float-play-width: calc(
		min(
			var(--height-comp),
			var(--max-height-comp)
		) / 4 );
	--gallery-nav-margin: calc(
		min(
			var(--arrow-width),
			var(--max-arrow-width)
		) / 2 + calc( min(40%,300px) / -2 )
	);
}
@font-face{
	font-family: HelveticaNeueLTStd-Bd;
	src: url( "fonts/HelveticaNeueLTStd-Bd.otf" );
}
html, body {
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: Roboto, sans-serf;
}

/* hide shadow DOM elements */
#shadow {
	display: none;
}

/* template gallery */
.template-gallery {
	overflow-x: scroll;
	white-space: nowrap;
	scrollbar-width: none;
	box-shadow: rgba(0,0,0,0.2) 0 0 30px;
}
.thumb {
	display: inline-block;
	width: 40%;
	max-width: 300px;
	overflow: hidden;
	white-space: nowrap;
	padding: 1px;
	cursor: pointer;
}
#gallery-nav {
	margin-top: var(--gallery-nav-margin);
	margin-bottom: calc( var(--gallery-nav-margin) * -0.5 );
	display: flex;
	pointer-events: none;
}
.arrow {
	flex: 1;
	pointer-events: none;
	z-index: 0;
}
.arrow > img {
	background-color: #2ed2d8;
	border: white solid 2px;
	height: 6vw;
	max-height: var(--max-arrow-width);
	border-radius: 50%;
	cursor: pointer;
	pointer-events: all;
}
#arrow-left {
	text-align: left;
	display: none;
}
#arrow-right {
	text-align: right;
}

/* canvas/composition */
#comp {
	width: var(--width-comp);
	max-width: var(--max-width-comp);
	max-height: 360px;
	background-color: #444;
	border-radius: var(--rounding1);
	padding: 0;
	margin: 0;
	cursor: pointer;
}
.cr-boundary {
	display: inline-block;
	text-align: center;
	background-color: black;
	border-radius: var(--rounding1);
}
.croppie-container {
	display: inline-block;
	text-align: center;
	overflow: hidden;
	font-size: 0;
}
.canvas {
	text-align: center;
	padding: 14px 0px 0px 0px;
	border: none;
	margin: 0;
	font-size: 0;
}

/* controls like play, pause, stop, etc.. */
#timeline {
	background-color: gray;
	width: 100%;
	max-width: var(--max-width-comp);
	display: inline-block;
	border: none;
	border-radius: var(--rounding1);
}
.controls {
	width: var(--width-comp);
	max-width: var(--max-width-comp);
	display: inline-block;
	text-align: center;
	padding: 5px 0px 0px 0px;
}
button {
	cursor: pointer;
}
.button-row {
	white-space: nowrap;
	display: flex;
}
input#file, overlay {
	display: none;
}
.left > *, .right > *, .center > * {
	display: inline-block;
	border-radius: 999vw;
	margin: 2px;
	background-color: #2ed2d8;
	border: 1px solid #2ed2d8;
	padding: min(.5vw,4.5px) 0;
	font-size: min(4vw, 34px);
	width: 100%;
	cursor: pointer;
	text-align: center;
	color: white;
}
.left p, .right p, .center p{
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}
.button-row > * > *:hover, .button-row > * > *:active {
	background-color: var(--bgcolor);
	color: #2ed2d8;
	-webkit-transition-property: all;
	-moz-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	-moz-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	transition-timing-function: ease;
}
.left, .right, .center {
	display: inline-block;
	white-space: nowrap;
	padding: max(1vh,7px) 0 0 0;
	margin: 0;
	flex: auto;
}
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
label > svg, #float-play > svg {
	fill: #fff;
	height: min(6.3vw,60px);
	vertical-align: middle;
	cursor: pointer;
}
label > svg { scale: 1.5; }
label:hover svg, label:active svg,
#main-buttons > div.column > span > label:hover,
#main-buttons > div.column > span > label:active
{
	fill: #2ed2d8;
	-webkit-transition-property: all;
	-moz-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	-moz-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	transition-timing-function: ease;
}
#float-play {
	height: 0;
	position: relative;
	pointer-events: none;
	margin-top: calc(
		min(
			var(--half-height),
			var(--max-half-height)
		)*-1);
	margin-bottom: min(
		var(--half-height),
		var(--max-half-height)
	);
}
#float-play > img {
	width: var(--float-play-width);
	margin-top: calc( var(--float-play-width) * -0.5 / var(--norm) )
}
#float-progress > svg {
	position: relative;
	display: block;
	margin-top: max(-27vw, -245px);
	z-index: -1;
}
#float-progress {
	position: absolute;
	/* display: inline-block;
	margin-top: -99999px; */
	z-index: -1;
	margin-left: calc(var(--width-comp)/2*1.04);
	margin-top: calc(var(--height-comp)/var(--neg-norm)*1.085);
}
#progress {
	position: absolute;
	margin-top: calc(
		min(
			var(--height-comp),
			var(--max-height-comp)
		)*-.6);
	color: white;
	font-size: 4vh;
	text-align: center;
	width: 100vw;
	opacity: 0%;
	z-index: -1;
}
#upload {
}
	
input.file, .source-video, .source-audio {
	/* display: none; */
}

/* primarily for ios/safari but probably a good idea anyway.
essentially this will make things visible to the DOM but
not to the user */
#backstage {
	position: fixed;
}
#curtain {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 1;
	background-color: var(--bgcolor);
}
.log {
	z-index: 1;
	position: relative;
}
.flex-row {
	display: flex;
}
.wide {
	width: 100%;
}
#keyboard-focuser {
	opacity: 0;
	z-index: -1;
	display: block;
	position: absolute;
	margin: -100% 0 0 0;
}
#crop-buttons, #text-buttons {
	display: inline-block;
}
.on-top {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: -1; /* increase value when container is populated */
}
.popup > button {
	font-size: 14pt;
	border: none;
	background-color: lightgray;
	padding: var(--rounding1);
	border-radius: var(--rounding1);
	margin-bottom: var(--rounding1);
}
.popup > h4 {
	margin-top: var(--rounding1);
}
.popup > * > a,
.popup > button
{
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	background-color: #2ed2d8;
	padding: 48px 0px;
	border-radius: var(--rounding1);
	width: 100%;
	display: inline-block;
	font-size: min(3vw,27px);
}
.popup {
	background-color: #e8e8e8;
	display: inline-block;
	padding: var(--rounding1);
	border-radius: var(--rounding1);
	margin-top: min( 50%, var(--max-height-comp) );
	box-shadow: 0px 5px 30px rgba(0,0,0,0.5);
	width: 100%;
}
.to-dl {
	transition: all 0.6s ease-in-out;
}
#logo > img {
	width: 100%;
	padding-top: 4em;
}

.explanation-image {
	margin-top: 3em;
}
.explanation-image img {
	max-width: var(--max-width-comp);
}