html,
body {
	height: 100%;
	width: 100%;
	margin: 0;
	background: url("img/sddm-lain-wired-theme/bgN5.gif") repeat repeat;
	color: #c1b492;
	font-family: serif;
	letter-spacing: 0.3em;
	overflow-x: hidden;
	-webkit-user-select: none;
	user-select: none;
	cursor: default;
	scrollbar-color: #c1b492 #000;
}

::selection {
	/* For some reason, the background is slightly transparent on
	 * WebKitGTK and I can't find a solution to this. It completely
	 * ruins the effect. */
	background-color: #c1b492;
	color: #000;
}

#content {
	width: 100%;
	height: 100%;
	text-align: center;
	transition: opacity 1.5s;
}

#content > img,
#content > input {
	margin: 0 auto;
}

#content > * {
	display: block;
}

input[type="text"],
input[type="password"] {
	background-color: #000e;
	border: 2px solid #d2738a;
	/*border-radius: 0.25rem;*/
	font-family: monospace;
	padding: 0.8rem;
	color: #c1b492;
	transition: border-color 0.125s, width 0.125s ease-in;
	width: 15em;
}

input[type="text"]:focus,
input[type="password"]:focus {
	border-color: #c1b492;
	width: 20em;
}

input[type="text"][disabled],
input[type="password"][disabled] {
	background-image: url("img/disabled.png");
	-webkit-user-select: none;
	user-select: none;
}

#subtitle {
	font-size: 75%;
	letter-spacing: 0.1rem;
	margin-top: 3rem;
}

#error,
#sessionDisplay {
	color: #d2738a;
	font-weight: bold;
	background-color: #000e;
	border: 0.25rem solid #000e;
	/*border-radius: 0.25rem;*/
	margin-top: 1rem;
	width: auto;
}

#shortcutsGuide {
	background-color: #000e;
	border: 2px solid #d2738a;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 50%;
	z-index: 1;
	pointer-events: none;
	transition: opacity 0.125s;
	display: flex;
	padding: 0 1rem;
}
#shortcutsGuide ul {
	flex: 1;
	list-style-type: none;
	padding-left: 0;
	white-space: nowrap;
}
#shortcutsGuide ul:last-child {
	font-weight: bold;
	text-align: right;
}

#blanker {
	width: 100%;
	height: 100%;
	background-color: #000;
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

#glitch {
	position: relative;
	font-size: 44px;
}
#glitch::before,
#glitch::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#glitch::before {
	left: 1px;
	text-shadow: -1px 0 red;

	/* important: opaque background masks the original */
	background: black;

	clip: rect(24px, 450px, 36px, 0);

	animation: glitch-anim-1 1s infinite linear alternate-reverse;
}
#glitch::after {
	left: -1px;
	text-shadow: -1px 0 blue;

	/* important: opaque background masks the original */
	background: black;

	clip: rect(35px, 500px, 56px, 0);

	animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
	0% {
		clip: rect(70px, 2000px, 76px, 0);
	}
	20% {
		clip: rect(29px, 2000px, 16px, 0);
	}
	40% {
		clip: rect(76px, 2000px, 3px, 0);
	}
	60% {
		clip: rect(42px, 2000px, 78px, 0);
	}
	80% {
		clip: rect(15px, 2000px, 13px, 0);
	}
	100% {
		clip: rect(53px, 2000px, 5px, 0);
	}
}
@keyframes glitch-anim-2 {
	0% {
		clip: rect(-10px, 2000px, 10px, 0);
	}
	20% {
		clip: rect(29px, 2000px, 16px, 0);
	}
	40% {
		clip: rect(76px, 2000px, 3px, 0);
	}
	60% {
		clip: rect(42px, 2000px, 78px, 0);
	}
	80% {
		clip: rect(15px, 2000px, 13px, 0);
	}
	100% {
		clip: rect(53px, 2000px, 5px, 0);
	}
}