/* Server business palette: navy, lavender, purple, mint, and warm white. */
/* Align game actions when the cards share a row; retain stacked mobile flow. */
@media screen and (min-width: 981px) {
	#three .row > .col-4 {
		display: flex;
		flex-direction: column;
	}

	#three .row > .col-4 > .image {
		flex-shrink: 0;
	}

	#three .row > .col-4 > .actions {
		margin-top: auto;
	}
}

:root {
	--navy: #a99af0;
	--lavender: #a99af0;
	--purple: #6654b8;
	--mint: #a7e5d1;
	--warm-white: #fff4e6;
	--black: #000000;
	--deep-plum: #141e3f;
}

#one .image-column {
	display: flex;
	align-items: center;
	justify-content: center;
}

#one .image-column > .image.fit {
	margin: 0;
}

body, .main.style1 {
	background-color: var(--deep-plum);
	color: var(--navy);
}

body, input, select, textarea, button, code, pre {
	font-family: "JetBrains Mono", monospace;
	font-optical-sizing: auto;
}

strong, b, h1, h2, h3, h4, h5, h6, label {
	color: var(--navy);
}

h2, .main.style1
{
	color: var(--warm-white)
}

a {
	color: var(--purple);
	border-bottom-color: var(--purple);
}

a:hover {
	color: var(--navy);
}

header.major:after {
	background: var(--lavender);
}

#header {
	background-color: var(--navy);
	background-image: url("images/overlay2.png"), url("images/overlay3.svg"), linear-gradient(45deg, #20283f 5%, #6654b8 95%);
	color: var(--warm-white);
}

#header:after {
	background-image: linear-gradient(45deg, #20283f, #6654b8);
}

.main.style2 {
	background-color: var(--navy);
	background-image: url("images/overlay1.png");
	color: var(--warm-white);
}

#footer {
	background-color: var(--navy);
	background-image: url("images/overlay2.png");
	color: var(--warm-white);
}

.icon.style1, .icon.style3, .icon.style5 {
	color: var(--mint);
}

.icon.style2, .icon.style4, .icon.style6 {
	color: var(--lavender);
}

#header .icon.major, .main.style2 .icon.major {
	color: var(--mint);
}

#header a:hover, .main.style2 a:hover, #footer a:hover {
	color: var(--mint);
}

input[type="submit"], input[type="reset"], input[type="button"], button, .button {
	box-shadow: inset 0 0 0 1px var(--purple);
	color: var(--purple) !important;
}

input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover, .button:hover {
	background-color: rgba(169, 154, 240, 0.18);
}

input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary, button.primary, .button.primary,
#header .button.primary, .main.style2 .button.primary, #footer .button.primary {
	background-color: var(--purple);
	box-shadow: none !important;
	color: #ffffff !important;
}

input[type="submit"].primary:hover, input[type="reset"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,
#header .button.primary:hover, .main.style2 .button.primary:hover, #footer .button.primary:hover {
	background-color: #55449f;
}

#header .button, .main.style2 .button, #footer .button {
	box-shadow: inset 0 0 0 1px var(--lavender);
	color: var(--warm-white) !important;
}

#header .button:hover, .main.style2 .button:hover, #footer .button:hover {
	background-color: rgba(169, 154, 240, 0.18);
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
	border-color: var(--purple);
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--lavender);
	outline-offset: 4px;
}

.header-nav {
	position: fixed;
	top: 1.5em;
	right: 1.5em;
	z-index: 1000;
}

#footer #copy-email {
	text-transform: none;
	letter-spacing: normal;
	max-width: 100%;
	padding: 0 1em;
}

#copy-email-status {
	font-size: 0.9em;
	margin: 0.75em 0 0;
}

.copy-email-wrapper {
	position: relative;
}

#copy-email-status.copy-success {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	color: var(--mint);
	pointer-events: none;
}

#header .panel-button {
	background-color: var(--lavender);
	box-shadow: none;
	color: #292332 !important;
	border-radius: 999px;
	min-height: 44px;
	padding: 0 1.75em;
	text-transform: none;
	letter-spacing: 0.04em;
	font-weight: 600;
}

#header .panel-button:hover {
	background-color: var(--mint);
	color: #292332 !important;
}

@media screen and (max-width: 480px) {
	.header-nav {
		top: 1em;
		right: 1em;
	}
}