@font-face {
		font-family: mono;
		src: url(font/SourceCodePro-Regular.otf.woff);
	}

	@font-face {
		font-family: monoIt;
		src: url(font/SourceCodePro-It.otf.woff);
	}

	body {
		margin: 0;
		padding: 0;
		font-family: mono;
	}

	a {
		color: #f00;
	}

	a:hover {
		font-style: italic;
	}

	input {
		/* left: 5px;	 */
		/* background: #fff; */
		/* position: absolute; */
		width: 150px;
		/* border: solid 3px #000; */
		height: 20px;
		float: left;
		z-index: 2;
	}

	h2 {
		background-color: #000;
		color: #fff;
	}

	h3 {
		background-color: #000;
		color: #fff;
	}

	li {
		font-family: mono;
		font-size: 12px;
	}

	code {
		font-family: monoIt;
		background: #bbb;
	}

	/*styling buttons*/

	button {
		/* position: absolute;
		left: 5px; */
		background-color: #fff;
		border: solid 3px #000;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bolder;
		font-size: 70%;
		/* padding-top: 3px; */
	}

	button:hover {
		border: solid 3px #0f0;
	}

	/*class description*/

	/* .cnv{
		position: absolute;
		left: 0px;
		z-index: 0;
		border: solid 3px #000;
		padding: 5px 5px 3px 5px;
	} */

	.inputValue {
		/* position: absolute;
		left: 185px; */
		background: #fff;
		color: #000;
		font-family: Helvetica;
		font-weight: bolder;
		font-size: 70%;
		/* border: solid 3px #000; */
		z-index: 2;
		/* padding: 0.2em; */
	}

	.textElement {
		overflow-y: scroll;
		display: none;
		position: absolute;
		background-color: rgba(255, 255, 255, 0.7);
		color: #000;
		font-family: Helvetica;
		font-weight: bolder;
		font-size: 100%;
		border: solid 3px #000;
		z-index: 2;
		padding: 5px 5px 3px 5px;
	}

	.resizeElement {
		position: absolute;
		background-color: rgba(255, 255, 255, 0.7);
		color: #000;
		font-family: Helvetica;
		font-weight: bolder;
		font-size: 100%;
		border: solid 3px #000;
		z-index: 2;
		padding: 5px 5px 3px 5px;
	}

	.menu {
		position: fixed;
		left: 0px;
		width: 200px;
		padding: 5px;
	}

	.container {
		right: 0px;
		width: 70%;
		height: 100%;
		/* min-height: 800px; */
		display: block;
		margin: auto auto auto 200px;
	}

	#p5Sketch {
		padding: 5px;
		position: relative;
		/* left: 0px; */
		display: block;
		margin: auto;
		min-width: 250px;
		height: 80%;
		width: auto;
		z-index: -1;
	}

	#warning {
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #ffffffcc;
		font-size: 10vh;
		text-align: center;
		z-index: 9999;
	}

	#content {
		position: fixed;
		width: min-content;
		width: -moz-min-content;
		width: -webkit-min-content;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
	}

	@media screen and (orientation:portrait) {

		#warning {
			display: block;
		  /* -ms-transform: rotate(-90deg);
		  -webkit-transform: rotate(-90deg);
		  transform: rotate(-90deg);
		  width:;
		  height:;
		  overflow: scroll; */
		}
	  }