lyne-solver.css

@charset "utf-8";

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-size: 16px;
	font-family: sans-serif;
}

html {
	color: #efebdf;
	background-color: #1e1e1e;
	background-size: 12.5vmax 12.5vmax;
	background-image:
		linear-gradient(45deg, #1e1e1e 33%, transparent 33%),
		linear-gradient(135deg, #1e1e1e 33%, transparent 33%),
		linear-gradient(225deg, #1e1e1e 33%, transparent 33%),
		linear-gradient(315deg, #1e1e1e 33%, transparent 33%),
		linear-gradient(0deg, #3b3b39, #3b3b39)
	;
}
textarea {
	background-image: none;
	background-color: #1e1e1e;
	color: inherit;
	border-color: currentColor;
}
a,
:link,
:visited {
	color: #4ab2ff;
	text-decoration: none;
}

#svgdefs {
	/* For some reason, using display:none in this SVG will prevent the clip-path from working correctly. */
	/* display: none; */

	/* Workaround: */
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
}

article {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
}

article > section:first-child {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 8em;

	display: flex;
	flex-direction: column;
}
article > section:last-child {
	flex-grow: 1024;
	flex-shrink: 1;
	flex-basis: 14em;
}

article > section:first-child > * {
	flex-grow: 0;
	flex-shrink: 0;

	display: block;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

article > section > textarea#puzzleinput {
	flex-grow: 1;

	box-sizing: content-box;
	min-height: 5.1em;
	min-width: 4em;
	min-width: 7.1ch;
	width: auto;

	font-family: "Inconsolata", monospace;
	font-size: 1.5em;
	line-height: 1em;
}
article > section > div#messages {
	min-height: 2.2em;
	line-height: 1.1em;
	margin: 1ex 0;
	white-space: pre-wrap;
	white-space: pre-line;
}
article > section > p {
	margin: 0;
	margin-top: 1ex;
}

div#messages.busy:before {
	content: "⌛"; /* HOURGLASS */
	/*content: "⏳";*/ /* HOURGLASS WITH FLOWING SAND */
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1em;
	text-align: center;
	animation: spinner 2000ms infinite linear;
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

article > section > svg#svgsolution {
	flex-grow: 1;
	flex-shrink: 1;
}

#svgsolutioncontainer {
	display: block;
	width: 100%;
	height: 100vh;
	max-width: 100vw;
	position: relative;
}
#svgsolutioncontainer > svg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	max-width: 100vw;
	max-height: 100vh;
}
#svgsolutioncontainer > svg .edge {
	stroke-width: 0.125px;
	display: none;
}
#svgsolutioncontainer.hidearrows > svg .edge {
	marker-mid: none;
}