/* OVERWRITE DEFAULT VARIABLES */
:root {
	--clr-background: #001628;
	--clr-text: #DEC45B;

	--clr-highlight: #7AAF4C;
	--clr-highlight-mild: rgb(154, 175, 135);

	--clr-a: #98c379;

	--clr-lines: #7AAF4C;
	--clr-non-focused: #becbd2;

}


textarea {
	height: 200px;
}

#output_area {
	margin-bottom: 100px;
}

a:hover {
	text-decoration: underline;
}

rt {
	color: #DEC45B;
}


.output_area {
	font-size: 1.8em;

}

span.gismu {
	cursor: pointer;
	color: orangered;
}

span.rafsi:nth-child(odd) {
	color: orange;
}

span.gismu:hover {
	color: #fff;
}

span.unknown {
	color: #ccc;
	font-style: italic;
}

span.cmene {
	color: #999;
}

span.cmavo {
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	color: #666;
}


span.cmavo.basics {
	color: #c678dd;
}

span.cmavo.terminator {
	color: aqua;
}

span.cmavo.connectives {
	color: #98c379;
}


span.cmavo.emphasized {
	color: greenyellow;
}



p button {
	vertical-align: middle;
	margin-right: 10px;

	color: white;
	background-color: #282525;
	border: none;

	cursor: pointer;
}




svg {
	border: 1px solid #ccc;
}

svg line {
	stroke: #98c379;
	/* stroke-opacity: 0.6; */
}

svg text {
	fill: #DEC45B;
	font-family: 'Century Gothic', 'Arial Narrow';
	/* font-family: sans-serif; */
}

svg circle {
	fill: #DEC45B;
	cursor: pointer;
}

svg .link {
	fill: none;
	stroke: #98c379;
	stroke-width: 1.5px;
}


svg.node text {
	font-size: 12px;
	fill: #DEC45B;
}

svg .node circle {
	fill: DEC45B;
	r: 5;
}