body {
	background-color: #181a1b;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-direction: column;
	font-family: sans-serif;
	color: #e8e6e3;
}

.result_preview {
	height: 100%;
	width: 100%;
	border-radius: 0 8px 8px 0;
	background: repeating-conic-gradient(#aaa 0 25%, #ccc 0 50%) 50% /32px 32px;
}

iframe {
	border: none;
	height: 100%;
	width: 100%;
}

.result_area {
	width: 50%;
	height: 50%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.result_css {
	height: 100%;
	width: 100%;
}

.result_css textarea {
	box-sizing: border-box;
	border: 0;
	height: 100%;
	width: 100%;
	outline-color: transparent;

	font-family: 'Roboto Mono', Courier, monospace;
	resize: none;
	border-radius: 8px 0 0 8px;
	color: rgba(200, 195, 188, 0.3);
	background-color: rgb(58, 62, 65);
}

.result_css textarea:focus {
	outline-color: #00a8fc;
	outline-style: solid;
	outline-width: 4px;
	outline-offset: -4px;
}

::-webkit-scrollbar-thumb {
	background-color: #454a4d !important;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #575e62 !important;
}
::-webkit-scrollbar {
	background-color: #202324 !important;
}

/* form {
	display: flex;
	flex-direction: column;
	align-items: end;
} */