/*!
 * Editor
 *
 * author: sizeof(cat) <sizeofcat AT riseup DOT net> http://sizeof.cat
 * url: http://sizeof.cat/e/
 * copyright: 2019-2025
 * license: GPLv3
 * 
 *           o8o                                  .o88o.   .o                         .   o.   
 *           `"'                                  888 `"  .8'                       .o8   `8.  
 *  .oooo.o oooo    oooooooo  .ooooo.   .ooooo.  o888oo  .8'   .ooooo.   .oooo.   .o888oo  `8. 
 * d88(  "8 `888   d'""7d8P  d88' `88b d88' `88b  888    88   d88' `"Y8 `P  )88b    888     88 
 * `"Y88b.   888     .d8P'   888ooo888 888   888  888    88   888        .oP"888    888     88 
 * o.  )88b  888   .d8P'  .P 888    .o 888   888  888    `8.  888   .o8 d8(  888    888 .  .8' 
 * 8""888P' o888o d8888888P  `Y8bod8P' `Y8bod8P' o888o    `8. `Y8bod8P' `Y888""8o   "888" .8'  
 *                                                         `"                             "'   
 */

*,
*:before,
*:after {
	box-sizing: border-box;
}

html {
	width: 100%;
	height: 100%;
}

body {
	display: flex;
	width: 100%;
	height: 100%;
	background-color: #1e1e2e;
	align-items: center;
	justify-content: center;
	margin: 0;
	font-family: "Work Sans", "helvetica neue", helvetica, arial, geneva, sans-serif;
}

textarea {
	display: block;
	width: 800px;
	height: 70vh;
	border: 0;
	color: #f5f4fa;
	background-color: #1e1e2e;
	box-shadow: inset 0 0 1px 0 #f5f4fa;
	padding: 40px;
	outline: none;
	font-size: 14px;
	resize: none;
	line-height: 22px;
}

#toolbar a {
	color: #f5f4fa;
	text-decoration: none;
}

#toolbar {
	position: absolute;
	top: 10px;
	left: 10px;
	opacity: 0.2;
	font-size: 13px;
}

#toolbar:hover {
	opacity: 1;
}

#toolbar div {
	display: inline-block;
	cursor: pointer;
	padding: 10px;
	color: #f5f4fa;
}

#toolbar a:hover,
#toolbar div:hover {
	text-decoration: underline;
}