* {
	padding:0;
	margin:0;
	font-family:monospace;
	color:#f0f7ee;
}

html, body {
	width:100%;
	background-color:#040f16;
}

header {
	display:flex;
	position:fixed;
	z-index:1;
	height:80px;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	width:100%;
	background-color:inherit;
}

#header-left {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	gap:15px;
}

#header-sub {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:space-around;
	gap:8.5px;
}

#logo {
	width:72px;
	height:auto;
}

#header-right {
	position:relative;
	display:inline-block;
}

#header-right:hover #options-popup {
	display:block;
}

#header-right:hover #options-button {
	background-color:#f0f7ee;
	color:#4fb477;
}

#options-button {
	width:85px;
	height:30px;
	border:solid #f0f7ee 1px;
	background-color:#4fb477;
	color:#f0f7ee;
	margin-right:10px;
	position:relative;
}

#options-popup {
	position:absolute;
	right:0px;
	margin-right:10px;
	display:none;
	width:83px;
	border:solid #f0f7ee 1px;
}

#options-popup button {
	width:100%;
	min-height:35px;
	color:#f0f7ee;
	background-color:#4fb477;
	border:none;
}

#options-popup button:hover {
	background-color:#27645c;
}

#options-popup button:active {
	background-color:#4fb477;
}

#codespace {
	width:100%;
	position:absolute;
	top:85px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	gap:10px;
}

#input-container {
	width:100%;
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	justify-content:space-around;
}

.input-container-sub {
	width:calc((100% - 20px) / 3);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
}

#button-html, #button-css, #button-js {
	width:100%;
	height:30px;
	background-color:#4fb477;
	border:none;
}

textarea {
	width:calc(100% - 7.5px);
	resize:none;
	background-color:#1e212b;
	border:solid #4fb477 1px;
	border-radius:0 0 2px 2px;
	padding:3px;
	height:200px;
	font-family:monospace;
}

textarea:focus {
	outline:none;
}

::placeholder {
	color:#4fb477;
}

#result {
	height:100vh;
	background-color:white;
	width:calc(100% - 10px);
	visibility:hidden;
	border:none;
}

a {
	color:inherit;
}

a:hover {
	color:#4fb477;
}

@media (max-width:650px) {
	#input-container {
		flex-direction:column;
		justify-content:flex-start;
		gap:10px;
	}

	.input-container-sub {
		width:100%;
	}

	#button-html, #button-css, #button-js {
		width:calc(100% - 10px);
	}

	textarea {
		width:calc(100% - 18px);
	}
}