html {
	height: 100%;
	background: linear-gradient(to bottom, #523, #235) no-repeat fixed;
	color: #eee;
}
body {
	/* min-height: 100%; */
	/* margin: 0; */
	font-family: Consolas, monospace;
	border-radius: 25px;
	/* background-color: #F0F1; */
}
body > div {
	margin: 10px;
}
#header {
	font-size: 36pt;
}
#content {
	text-align: center;
}
#mainCtnr > div {
	vertical-align: middle;
	display: inline-block;
	/* display: inline-flex; */
	align-items: center;
	justify-content: center;
}
#mainCtnr > div > div:first-child {
	font-size: 22pt;
}
#mainCtnr > div:nth-child(odd) > div:first-child {
	text-align: left;
	color: #9CF
}
#mainCtnr > div:nth-child(even) > div:first-child {
	text-align: right;
	color: #F9C
}
.container {
	/* display: inline-block; */
	position: relative;
	top: 0px;
	width: 800px;
	height: 800px;
	margin: 0 auto;
}

/* Input div */
#baseCtnr {
	border: 5px dotted #9CF;
}
#baseDiv {
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #013, #000);
}
#text1Ctnr {
	position: absolute;
	bottom: 40px;
	width: 100%;
	text-align: center;
}
#text1 {
	display: inline;
	padding: 0px 50px 15px;
	color: #EEE;
	font-family: Roboto;
	font-size: 72pt;
	border-radius: 20px;
	background: radial-gradient(#928, #614);
	text-shadow: #000 0px 5px 4px;
}
#profilePicture {
	position: absolute;
	top: 25px;
	left: 25px;
	width: calc(100% - 50px);
	height: calc(100% - 229px);
	/* border: 1px solid white; */
	border-radius: 25px;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
}
#profilePicture img {
	/* width: 100%;
	height: 100%;
	object-fit: contain; */
	border-radius: 25px;
	
}

/* Output div */
#resCtnr {
	border: 5px dotted #F9C;
}
#form {
	position: absolute;
	top: 5px;
	left: calc(50% - 225px);
	background: #333C;
	min-width: 400px;
	padding: 25px;
	border-radius: 15px;
}


canvas, .base {
	width: 100%;
	height: 100%;
}
/* .appended {
	position: absolute;
	top: 15px;
	left: 15px;
	border-radius: 25px;
	/* box-shadow: 0px 10px 15px 10px #0008;
}*/