@font-face {
	src: url(SecularOne-Regular.ttf);
	font-family: Secular;
}
body {
	background-color: #111;
	overflow: hidden;
}
textarea {
	border: none;
	overflow-x: scroll;
}
#leftside {
	transition: left 0.2s ease-out;
	position: fixed;
	top: 0;
	left: 0;
	width: 50vw;
	height: 100vh;
}
#toolbar {
	position: absolute;
	top: 0;
	left: 0;
	width: 50vw;
	height: 30px;
}
#toolbar button {
	background-color: transparent;
	color: white;
	border: none;
	font-size: 22px;
	transition: box-shadow 0.2s ease-out;
	box-shadow: inset 0px 0px 0px #FFF2;
	cursor: pointer;
	font-family: Secular;
}
#toolbar button:hover {
	box-shadow: inset 0px -30px 0px #FFF2;
}
.code {
	margin: 0;
	font-size:24px;
	position: absolute;
	top: 30px;
	left: 0;
	height: calc(100vh - 30px);
	width: calc(50vw - 4px);
	overflow: auto;
	tab-size: 53px;
	resize: none;
	padding-left: 5px;
}
#inputcode {
	outline: none;
	color: transparent;
}
#outputcode {
	pointer-events: none;
	border: none;
	overflow: hidden;
}
#gamewindow {
	bottom: 0;
	right: 0;
	height: 100vh;
	width: 50vw;
	overflow: hidden;
	position: fixed;
	background-color: #4D97FF;
}
#gamewindow iframe {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #4D97FF;
	border: none;
}
.contextMenu {
	animation: contextMenuAppear 0.2s linear;
	position: fixed;
	background-color: #222;
	width: 200px;
}
.contextMenuItem {
	text-align: left;
	width: 200px;
	height: 20px;
	font-size: 15px;
	background-color: #222;
	color: white;
	border: none;
	transition: background-color 0.2s ease-out;
	cursor: pointer;
}
.contextMenuItem:hover {
	background-color: #333;
}
@keyframes contextMenuAppear {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
#floatingwindow {
	position: fixed;
	left: calc(50vw + 25px);
	top: 25px;
	width: calc(50vw - 50px);
	height: calc(100vh - 50px);
	background-color: #000C;
	z-index: 2;
	transition: opacity 0.2s;
	overflow-y: auto;
}
#floatingwindow #closingbutton {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}
#floatingwindow #closingbutton:hover {
	background-color: red;
}
#floatingwindow input[type="color"] {
	border-radius: 5px;
	width: 50px;
	height: 50px;
	border: none;
	outline: none;
	cursor: pointer;
	background-color: transparent;
}
#floatingwindow .inputspan {
	color: white;
	vertical-align: top;
	font-size: 30px;
	margin-top: 4px;
	display: inline-block;
	text-transform: capitalize;
	font-family: "Secular";
}
#floatingwindow .colorslot {
	width: 47%;
	display: inline-block;
	white-space: nowrap;
}
#floatingwindowcontents .presetstitle {
	font-size: 40px;
	font-family: "Secular";
	color: white;
	margin: 10px;
}
#floatingwindowtitle {
	font-size: 40px;
	font-family: "Secular";
	color: white;
	margin: 10px;
	border-bottom: 1px solid white;
}
#floatingwindow .presetbutton {
	width: calc(100% - 10px);
	display: block;
	position: relative;
	background-color: transparent;
	font-size: 24px;
	border: 1px solid white;
	color: white;
	font-family: "Secular";
	margin: 5px;
	text-align: left;
	cursor: pointer;
	transition: all 0.2s ease-out;
	box-shadow: 0px 0px 0px white;
}
#floatingwindow .presetbutton:hover {
	opacity: 0.7;
	margin-bottom: 10px;
	box-shadow: 0px 5px 0px white;
}
#floatingwindow .colorcircle {
	position: absolute;
	top: 0;
	height: 100%;
	width: 3%;
}
#leftsidebar {
	position: absolute;
	height: 380px;
	width: 320px;
	top: calc(50vh - 190px);
	left: -25px;
	user-select: none;
}
.hidden {
	pointer-events: none;
}
#leftsidebar .toolboxcontainer {
	height: 50px;
	margin-bottom: 5px;
	cursor: pointer;
}
.hidden .toolboxcontainer {
	pointer-events: none;
}
#leftsidebar .toolboxcircle {
	height: 50px;
	width: 50px;
	display: inline-block;
	border-radius: 50px;
	transition: all 0.2s ease-out;
}
.hidden .toolboxcircle {
	border-radius: 0px !important;
	width: 28px !important;
	height: 55px !important;
}
#leftsidebar .toolboxcontainer:hover .toolboxcircle {
	width: 100px;
}
#leftsidebar .toolboxtitle {
	display: inline-block;
	vertical-align: top;
	margin: 5px;
	font-family: "Secular";
	transition: transform 0.2s ease-out;
}
.hidden .toolboxtitle {
	transform: translateX(-320px);
}
.codeblocksopened #gamewindow {
	transform: translate(min(50vw, 500px));
}
.codeblocksopened #leftside {
	transform: translate(min(50vw, 500px));
}
.codeblocksopened .code {
	height: 100vh;
	top: 0;
}
.codeblocksopened .toolboxtitle {
	text-shadow: 2px 2px 1px #0004;
}
.codeblocksopened .toolboxcircle {
	box-shadow: 2px 0px 0px #0002;
}
#codeblocks {
	position: absolute;
	left: max(-50vw, -500px);
	top: 0;
	width: min(50vw, 500px);
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
}
#codeblocks #closingbutton {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}
#codeblocks .bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #0001;
}
#codeblocks #closingbutton:hover {
	background-color: red;
}
#codeblocks #codeblockstitle {
	color: white;
	font-family: "Secular";
	margin: 10px;
	user-select: none;
}
#codeblocks #codeblockscontents {
	background-color: white;
	margin: 30px;
	padding: 10px;
	border-radius: 40px;
	min-height: 100px;
	box-shadow: inset 0px -4px 0px #0002, inset 0px 4px 0px #0002;
	text-align: center;
}
#codeblockscontents .singlebox {
	display: inline-block;
	width: clamp(150px, 40%, 300px);
	height: 100px;
	position: relative;
	background-color: black;
	border-radius: 10px;
	margin: 10px;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.2s ease-out;
}
#codeblockscontents .singlebox:hover {
	height: 110px;
	box-shadow: inset 0px -6px 0px #0004;
	filter: brightness(1.1);
	margin-top: 0px;
}
#codeblockscontents .singlebox .singleboxtitle {
	font-family: "Secular";
	font-size: 20px;
	position: absolute;
	top: 0;
	color: white;
	text-align: center;
	width: 100%;
}
#codeblockscontents .singlebox .singleboxcode {
	resize: none;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	opacity: 0.3;
	color: white;
	background-color: transparent;
	pointer-events: none;
}
:root {
	--boolean: #00CCFF;
	--classes: #FF8800;
	--numbers: #00FF00;
	--default: #FFFFFF;
	--special: #9999FF;
	--strings: #FF77FF;
	--comment: #999999;
	--backgnd: #000000;
	--tcursor: #FFFFFF;
	--tselect: #444444;
}
.com {color: var(--comment);}
.kwd {color: var(--boolean);}
.typ {color: var(--classes);}
.lit {color: var(--numbers);}
.pln {color: var(--default);}
.pun {color: var(--special);}
.str {color: var(--strings);}
::selection {
	background: var(--tselect);
}
#inputcode {
	caret-color: var(--tcursor);
	background-color: var(--backgnd);
}
.toggleable {
	pointer-events: all;
	cursor: pointer;
	transition: all 0.2s ease-out;
}
.toggleable:hover {
	background-color: var(--boolean);
	border-radius: 5px;
	color: white;
}
.colorpicker {
	border-radius: 5px;
	cursor: pointer;
	pointer-events: all;
}
.colorpicker:hover {
	opacity: 0.8;
}
.runbutton {
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
	transition: background-color 0.2s ease-out;
}
.runbutton:hover {
	background-color: #030;
}