html, body {
	width: 100%;
	height: 100%;
  	margin: 0;
  	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: black;
}

html {	
	flex-direction: column;
}

body {
	width: 100vw;
	height: 100vh;
	flex-direction: row;
	overflow: hidden;
	touch-action: none;
	position: relative;
	background: #000;
}

main {
	position: relative;
	width: min(100vh,100vw);
	height: min(100vh,100vw);
	background: #F2F0ED;
}

#frame {
	width: 80%;
	height: 80%;
	top: 10%;
	left: 10%;
	border-radius: min(.2vh,.2vw);
	position: absolute;
	display: block;
	background: #D6CFC4;
	box-shadow: inset 0 0 min(.2vh,.2vw) #BBB0A0;
	z-index: 0;
	overflow: hidden;
	filter: blur(1px);
}

div.shades {
	background: #6F675C;
	border-radius: 10%;
	overflow: visible;
	position: absolute;
	display: block;
}

div.shape {
	z-index: 100;
	overflow: visible;
	position: absolute;
	display: block;
}

canvas {
	z-index: 100;
	margin: auto;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

#frame canvas {
	width: 100%;
	height: 100%;
}

#defaultCanvas0 {
	opacity: .6;
}

#defaultCanvas1 {
	opacity: .7;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}