html {
	--color-primary: #3661D9;
}

.title {
	background-color: var(--color-primary);
	color: white;

	font-family: bold larger "JetBrains Mono", monospace;
	font-size: larger;
	text-align: center;

	display: block;
	overflow: hidden;

	height: 3%;
}

div.configs {
	background-color: rgb(74, 74, 74);
	padding: 0.4%;
}

div.configs.select {
	color: white;
	float: right;
}

div.ide-tabs {
	overflow: hidden;
	background-color: inherit;
	height: 3%;

	user-select: none;
}

div.ide-tabs button {
	background-color: inherit;
	float: left;

	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	text-align: center;
	font-style: bold;

	border: 3px black;
	height: 100%;
	width: fit-content;
	color: white;
	margin-left: 0.3%;

	background-color: #3d3d3f;
}

div.ide-tabs button:hover {
	background-color: #59595c;
}

div.ide-tabs button:active {
	background-color: #6c6c70;
}

/* Need this so that everything else scales perfectly like the editor */
html, body {
	height: 100%;
}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: white;

	margin: 0;
	padding: 0;
	background-color: rgb(38, 38, 38);
}


div.editor {
	width: 100%;
	height: 70%;
}

div.windows {
	width: 100%;
	height: 15%;
}

div.console, div.terminal {
	float: left;
	box-sizing: border-box;
	white-space: pre;
	overflow-y: scroll;

	width: 50%;
	height: 100%;

	box-sizing: border-box;
	color: white;
	font-family: 'Courier New', Courier, monospace;
	background-color: rgb(54, 54, 54);
	box-shadow: none;
	outline: none;

	border: none;
	resize: none;
}

div.console {
	user-select: none;
}

.contextmenu {
	background-color: #3d3d3f;
	color: white;

	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	font-size: 13px;
	outline: 0;
	padding: 5px 0;
}

div.popup {
	visibility: hidden;
	background-color: #6c6c70;
	border: 10px #4f6ec5;

	text-align: center;

	display: inline-block;
	position: fixed;

	top: 50%;
	left: 50%;

	width: 20%;
	height: 30%;

	margin-left: -10%;
	margin-top: -15%;
}

div.popup.input {
	height: 20%;
	padding: 30%;
}

/*
	Button CSS by Algolia
	https://getcssscan.com/css-buttons-examples
*/

div.controls {
	height: 4%;
}

div.controls button, div.popup button {
	align-items: center;
	appearance: none;

	background-color: var(--color-primary);

	border-radius: 4px;
	border-width: 0;
	box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
	box-sizing: border-box;
	color: #f0f0f0;
	cursor: pointer;
	display: inline-flex;
	font-family: bold "JetBrains Mono",monospace;
	height: 100%;
	justify-content: center;
	line-height: 1;
	list-style: none;
	overflow: hidden;
	padding-left: 16px;
	padding-right: 16px;
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: box-shadow .15s,transform .15s;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	will-change: box-shadow,transform;
	font-size: 18px;
}

div.controls button:focus, div.popup button:focus  {
	box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

div.controls button:hover, div.popup button:hover {
	box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
	transform: translateY(-2px);
}

div.controls button:active, div.popup button:active {
	box-shadow: #D6D6E7 0 3px 7px inset;
	transform: translateY(2px);
}