*{box-sizing: border-box;}

html, body{
	font-family: sans-serif;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: #777;
	min-width: 800px;
	min-height: 600px;
}

.disabled{
	opacity: 0.25;
	pointer-events: none;
}

#mainGrid{
	display: grid;
	width: 100%;
	height: 100%;
	grid-template-columns: 1fr;
	grid-template-rows: 70px 1fr 64px 170px;
}

h1{
	background-color: rgb(20,230,20);
	margin: 0;
	padding: 16px;
	font-weight: bolder;
	color: #fff;
	text-shadow: 0 1px 2px #000;
}

#wrapper{
	position: relative;
	width: 100%;
	height: 70vh;
	min-height: 550px;
}

#editor{
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10+ and Edge */
	user-select: none;
}

#textWrapper{
	padding: 32px;
}
main{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99;
	width: 100%;
	height: 100%;
	color: #ddd;
	text-align: justify;
	pointer-events: none;
}
main::before{
	content: '';
	float: right;
	width: 100%;
	height: 100%;
	shape-outside: polygon(	100% 100%,
						100% 32px,
						calc(100% - 64px - 5%) 32px,
						32px calc(100% - 32px - 5%),
						32px 100%
				);
}

p{
	line-height: 1.5em;
	margin-top: 0;
}

canvas{
	position: absolute;
	width: 100%;
	height: 100%;
}

#viewportMaxWidth{
	position: absolute;
	bottom: 33px;
	right: calc(64px - 51px);
	width: 50px;
	z-index: 999;
}

#settings{
	background-color: #555;
	padding: 5px 10px;
	display: grid;
	grid-template-columns: 1fr 84px;
	line-height: 0;
}

#left{
	display: flex;
	flex-wrap: nowrap
}

#interpolation{
	display: inline-block;
}












#previewContainer{
	padding: 8px 0;
	text-align: center;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAY0lEQVQoU4WQPQ7AIAhGYXXhHMzcgPtfxoWVBlNJta0wSXzh+0FV9d47mBnMaa0BEeUeDxQRr6ABMrOfLsVfKCb4JTehUBxgBaXH3fjz0rSFkXqJd3vaA77Av6oW8NRnglXpF0tSRoKaUfEqAAAAAElFTkSuQmCC');
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10+ and Edge */
	user-select: none;
	cursor: ew-resize;
	overflow: hidden;
}

#ruler{
	border-bottom: 1px dashed #888;
	height: 10px;
	margin-bottom: 6px;	
	font-size: 0.8em;
	color: #ddd;
}

#previewIframeContainer{
	margin: auto;
	width: calc(100% - 32px);
}

#preview{
	width: 100%;
	height: 100%;
	border: 0;
	max-height: 128px;
	text-align: center;
	background-color: #555;
	pointer-events: none;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	will-change: transform;
}

#right{
	text-align: right;
}


.segmentedControl, button{
	border: 1px solid #aaa;
	background-color: #ddd;
	border-radius: 8px;
	display: inline-block;
	overflow: hidden;
	line-height: 1em;
	vertical-align: top;
	min-width: 48px;
	margin-right: 6px;
}

.segmentedControlSegment{
	display: inline-block;
	border-right: 1px solid #aaa;
}

.segmentedControlSegment img, button img{
	display: block;
	margin: auto;
}

.segmentedControlSegment:last-of-type{
	border-right: none;
}

.segmentedControl input{
	display: none;
	visibility: hidden;
}

.segmentedControl label, button{
	display: block;
	padding: 2px;
	width: 100%;
	height: 100%;
	text-align: center;
	padding-left: 4px;
	padding-right: 4px;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
	background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
	background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
	background-color:#ededed;
	cursor:pointer;
	color:#000;
	font-size:14px;
	text-decoration:none;
	text-shadow:0px 1px 0px #e1e2ed;
}
.segmentedControl input:checked + label{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
	background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	cursor:pointer;
	color:#ffffff;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
}
.segmentedControl input:checked + label img{
	filter: invert(100%);
}

button{
	display: inline-block;
	width: auto;
	height: 52px;
}
#cssButton{
	margin-right: 0;
}

#inputPoints, #inputBezier{
	display: inline-block;
}

#inputs fieldset{
	display: inline-block;
	color: #fff;
	font-size: 0.9em;
	padding: 8px 4px 4px 4px;
	border-radius: 4px;
}

#inputs fieldset legend{
	font-size: 0.7em;
}

#inputs fieldset label{
	display: inline-block;
	width: 20px;
}
#inputs fieldset input{
	width: 55px;
}


#codemirror{
	width: 100%;
	height: 100%;
}

.CodeMirror { 
	height: 100%;
}















@keyframes appearScaleFade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes appearFade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.popupBackdrop{
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	background-color: rgba(0,0,0,0.5);
	z-index: 9999;

	backdrop-filter: blur(2px);
	animation: appearFade .1s ease;
}

.popupContainer{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 80vw;
	height: 60vh;
	margin: auto;

	min-width: 320px;
	min-height: 320px;

	max-width: 600px;

	padding: 0;
	background-color: #fff;
	border: #f9f9f9;
	border-radius: 8px;
	overflow: hidden;
	z-index: 99999;
	animation: appearScaleFade .1s ease;

	box-shadow: 0 0 16px #000;

	border-radius: 8px;
	border: none;
	padding: 48px 16px 16px 16px;
}


@media only screen and (max-width : 768px) {
	.popupContainer{
		width: 80vw;
		height: 60vh;
		min-width: 320px;
		min-height: 320px;
		max-width: 600px;
	}
}
@media only screen and (max-width : 600px) {
	.popupContainer{
		width: 90vw;
		height: 80vh;
		min-width: 320px;
		min-height: 320px;
	}
}

.popupContent{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow: auto;
}