util  Check-in [689acafd82]

body {
	background: #370017;
	color: #FFE1ED;
	max-width: 35em;
	padding: 1em;
	margin: auto;
	font-family: Alegreya, Junicode, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, serif;
	font-size: 15pt;
}
$widget-accent:#610028;
%widget {
	font-family: Alegreya, Junicode, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, serif;
	font-size: 14pt;
	border: 1px inset darken($widget-accent,8);
	background: $widget-accent;
	color: white;
	padding: 0.3em;
	flex-grow: 2;
	text-shadow: 0 0 10px #E84B8C;
	box-sizing: border-box;
	&:focus {
		outline: none;
		background: lighten($widget-accent,5);
	}
}
textarea { @extend %widget; }
input {
	@extend %widget;
	&[type=submit] {
		position: absolute;
		flex-grow: 0;
		width: 30%;
		right: 0;
		top: 1em;
		text-shadow: 0 0 10px #E84B8C;
		border: 1px solid black;
		&:hover {
			background-color: #E31E6F;
			color: black;
		}
		&:active {
			background-color: darken($widget-accent,9);
			color: lighten($widget-accent,60);
			padding-bottom: calc(0.3em - 2px);
			padding-top: calc(0.3em + 2px);
		}
	}
}
code {
	font-family: Inconsolata, Monaco, monocode;
	padding: 0.2em 0.3em;
	background: #740C38;
	border: 1px solid #260010;
}
textarea {
	height: 6em;
}
form {
	> div {
		position: relative;
		display: flex;
		width: 100%;
		align-items: center;
	}
	label {
		margin-right: 0.5em;
		margin-bottom: 0.5em;
		margin-top: 0.5em;
		font-weight: bold;
	}
}
a[href] {
	$a-color: #FF2E84;
	color: $a-color;
	text-decoration-color: darken($a-color,30);
	&:hover {
		color: lighten($a-color,40);
		text-decoration-color: lighten($a-color,20);
	}
}
h1 {
	font-weight: 100;
	margin-bottom: 0.0em;
	border-bottom: 1px solid #FF7AB1;
	a[href] {
		color: #FF7AB1;
		text-decoration: none;
	}
}