body {
	font-family: Sans-Serif;
	font-size: 32pt;
}

h1 {
	font-size: 0.5em;
	display: inline;
}

input:focus,
button:focus {
	border-bottom: thick solid Blue;
}

input {
	width: 100%;
}

input,
button {
	border: thin solid White;
	padding: 0.5em 2em;
	background-color: #EEE;
	font-size: 24pt;
	font-weight: bold;
}

#button-container {
	display: flex;
}

#u-submit {
	flex: 2;
}

#u-reset {
	flex: 1;
	font-style: italic;
	color: Blue;
}

#remember {
	font-size: 20pt;
	font-style: italic;
	float: right;
}

#bird {
	height: 0.6em;
	margin-right: 0.1em;
	float: left;
}

#miyamoto {
	display: block;
	margin: auto;
	margin-top: 1em;
	width: 40%;
}

.reachable,
.unreachable {
	color: White;
	text-align: center;
}

.reachable {
	background-color: Green;
}

.unreachable {
	background-color: DarkRed;
}

.ip,
.domain,
.port {
	font-family: monospace;
}

.ip,
.domain,
.error,
.state {
	margin: 0;
}

.reason {
	color: LightGray;
	font-style: normal;
}

.error {
	color: Aqua;
	font-style: italic;
}

.state {
	font-size: 1.33em;
}

.ip {
	display: inline;
	margin-right: 64px;
}

.country {
	vertical-align: middle;
}

#form {
	clear: both;
}

#invalid-tip {
	margin: 0;
	margin-top: 1em;
	font-size: 20pt;
	visibility: hidden;
}

#ip-container {
	position: relative;
	width: 100%;
}

@keyframes pulse {
	to {
		opacity: 0;
	}
}

#invalid {
	position: absolute;
	width: 100%;
	height: 100%;
	background: Red;
	visibility: hidden;
	opacity: 0.6;
	animation: ease-out forwards pulse 1s;
	pointer-events: none;
}