#container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

#wrapper {
	width: 480pt;
	height: 480pt;
	border-radius: 18pt;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #313034aa;
	backdrop-filter: blur(10pt);
	padding: 24pt;
	transition-duration: 0.5s;
}

#wrapper > form {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 20pt;
}

#wrapper > form > * {
	margin-top: 10pt;
}

#logoWrapper {
	margin: 48pt 20pt auto 20pt;
	width: 100%;
	position: relative;
}

#logoWrapper > img {
	height: auto;
	align-items: center;
	display: flex;
	flex-direction: column;
	filter: drop-shadow(0pt 10pt 10pt rgba(0, 0, 0, 0.3));
	user-select: none;
	margin: 0pt auto;
}

#logoWrapper > p {
	font-size: 18pt;
	margin-top: 10pt;
	width: 100%;
	text-align: center;
	color: white;
}

#content {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

#field {
	border: solid 2pt #9995;
	outline: none;
	background: #5555;
	color: white;
	padding: 15pt 10pt;
	font-size: 15pt;
	transition-duration: 0.25s;
}

#field:focus,
#field:hover {
	border: solid 2pt #ffe989;
	transition-duration: 1s;
}

#field:focus {
	background: #ffe98911;
	transition: 0s;
}

#submit {
	color: black;
	height: 36pt;
	margin-bottom: 10pt;
}

#submit-text {
	font-weight: bold;
}

#submit-text,
#error {
	font-size: 14pt;
	color: black;
}

#error {
	background: #f88;
	color: black;
	width: 100%;
	height: 36pt;
	display: flex;
	align-items: center;
	justify-content: center;
}

#field,
#submit,
#error {
	border-radius: 6pt;
	transition-duration: 0.5s;
}

#IPAddress {
	font-family: "Courier New", Courier, monospace;
	font-weight: 100;
	color: #323031;
}

#ipOverlay {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
}

@media (min-width: 700px), (min-height: 800px) {
	#wrapper > img {
		width: 440pt;
	}

	#ipOverlay {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		/* Transform from center */
		transform: translate(-200pt, -6pt);
		transition-duration: 0.5s;
	}

	#IPAddress {
		font-size: 19pt;
		transition-duration: 0.5s;
	}
}

@media (max-width: 700px), (max-height: 800px) {
	#wrapper {
		width: 100%;
		height: 100%;
		border-radius: 0pt;
		padding: 0pt;
		transition-duration: 0.5s;
	}

	#logoWrapper > img {
		width: 375px;
		transition-duration: 0.5s;
	}
	#ipOverlay {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		transform: translate(-131pt, -10pt);
		transition-duration: 0.5s;
	}
	#IPAddress {
		font-size: 14pt;
		transition-duration: 0.5s;
	}

	#field,
	#submit,
	#error {
		font-size: 12pt;
		transition-duration: 0.5s;
	}
}
