@font-face {
	font-family: "monogram";
	src: url("./monogram-extended.ttf");
	ascent-override: 69%;
    font-style: normal;
}

@font-face {
	font-family: "monogram";
	src: url("./monogram-extended-italic.ttf");
	ascent-override: 69%;
    font-style: italic;
}

body {
	margin: 0;
}

.use-monogram {
	font-family: 'monogram', monospace;
	font-size: 32px;
	line-height: 26px;

	font-smooth: never;
	-webkit-font-smoothing: none;
	font-synthesis: none;
	filter: contrast(1);
}

.italic {
    font-style: italic;
}

#tester-holder {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;

	width: 256px;
	height: 256px;

	gap: 8px;
	padding: 2px 12px 10px 16px;

	background: #1d2b53;
}

#tester-top {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

#tester-header {
	grid-column: 1 / 3;
	margin: 0;
	color: #ff77a8;
	user-select: none;
}

#fancy-toggle {
	grid-column: 3 / 3;
	position: relative;
	background: none;
	padding: 0;
	top: 4px;

	color: #1d2b53;
	background: #065ab5;
	border: 2px solid #065ab5;
	box-shadow: 0px 2px 0 black;

	line-height: 0;
}

#fancy-toggle.enabled {
	color: #1d2b53;
	background: #ff77a8;
	border: 2px solid #ff77a8;
}

#fancy-toggle:active {
	top: 6px;
	box-shadow: 0px -2px 0 black;

	color: #000;
	background: #111d35;
	border: 2px solid #111d35;
}

#fancy-toggle.enabled:active {
	color: #000;
	background: #7E2553;
	border: 2px solid #7E2553;
}

#fancy-toggle span {
	position: relative;
	top: -4px;
	right: -1px;
}

#tester-pre {
	flex-grow: 1;
	margin: 0;
}

#tester-body {
	border: none;
	outline: none;
	box-shadow: none;
	resize: none;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;
	background: transparent;
	color: #fff1e8;
	caret-color: #ffa300;

	-ms-overflow-style: none;
	scrollbar-width: none;
}

#tester-body::-webkit-scrollbar {
	display: none;
}

#tester-body::selection {
	background: #ffa300;
	color: #065ab5;
}