:root {
	--casters-background-image-opacity: 1;
	--login-background: url(/media/CDpattern_Black25.webp);
}

@media (prefers-color-scheme: dark){
	:root {
		--login-background: url(/media/CDpattern_Black100.webp);
	}
}

@media (prefers-color-scheme: light){
	:root {
		--login-background: url(/media/CDpattern_Black25.webp);
	}
}

body {
	background: var(--theme-basic);
	font-family:var(--font-family);
	margin:0;
	min-height: 100vh; /* The body takes the height of the content. Without this rule when the content is shorter than the viewport height, the background will not span the full height. */
	position: relative; /* Without this rule the ::before and ::after and pseudo-elements will not span the full width and height of the body, but the full width and height of the viewport. */
}

/* We employ before and after pseudo-elements only because we need to change the CDpattern.webp's opacity when switching from light to dark themes.
We could do away with these pseudo-elements if we swapped images. Other alternatives, like applying a filters or masks to background images, or
using an svg image (either in a separate file or inline in the css) and have it inherit the correct fill color are not currently supported by
any browsers (in the case of inline svgs the correct fill collor is indeed inherited when the file is loaded, but subsequent changes to the value
of the root custom variable defining the fill color does not trigger a repaint of the svg image). */
body::before {
	background-image: var(--login-background);
	background-repeat:repeat;
	background-size: 288rem;
	bottom: 0;
	content: "";
	left: 0;
	opacity: var(--casters-background-image-opacity);
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: var(--zIndex-behind);
}

body::after {
	background-repeat: repeat;
	background-size: auto;
	bottom: 0;
	content: "";
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: var(--zIndex-behind);
}

.divMainContainer {
	background: none;
	display: grid;
	place-items: stretch;
}

.flex {
	justify-content: center;
}

.divApplicationLogo {
	margin: 20rem auto;
	width: 200rem;
}

.divInputContainer {
	margin: 20rem 0;
	text-align: right;
}

.bttnText_Input_Add_On {
	background: var(--accent-color);
	border-left: 1rem solid var(--theme-basic);
	box-shadow: 0 1rem 1rem rgba(0, 0, 0, .15) inset;
}

text-input:focus > .bttnText_Input_Add_On {
	border-left: 1rem solid var(--theme-highlight);
}

.bttnText_Input_Add_On:focus {
	outline: var(--border-width) solid var(--theme-highlight);
	outline-offset: calc(-1 * var(--border-width));
}

.divText {
	color: var(--theme-highlight);
	font-size: 18rem;
	line-height: normal;
	margin-bottom :0;
	text-align: center;
	width: 330rem;
}

.bttnText {
	font-size: 14rem;
	margin-top: 10rem;
}

.bttnText:hover {
	text-decoration: none;
}

.bttnStyle1 {
	margin-top: 20rem;
	width: 200rem;
}

.svgBrand_Logo {
	margin: 50rem auto 0;
	width: 275rem;
}

.bttnText_Input_Add_On visibility-icon {
	fill: var(--accent-color-varient);
}

.bttnText_Input_Add_On visibility-icon:hover {
	fill: var(--theme-highlight);
	transition: .3s ease fill;
}

visibility-icon {
	display: block;
	height: var(--icon-square-xs);
	width: var(--icon-square-xs);
}

/* Desktop landscape layout. */
@media (min-width: 1330px) {
	body::after {
		background-image: linear-gradient(to right, var(--theme-basic) 65%, transparent);
		background-position: right;
		background-size: 100%;
		animation-direction: alternate;
		animation-duration: 10s;
		animation-iteration-count: infinite;
		animation-name: Change-Background-Size;
		animation-timing-function: linear;
	}

	@keyframes Change-Background-Size {
		from {
			background-size: 100%;
		}
		to { 
			background-size: 157.14%;
		}
	}

	.divMainContainer {
		grid-template-columns: 1fr 1fr;
	}

	.divAnnouncements {
		grid-column: 2;
	}

	.divForms {
		grid-column: 1;
		grid-row: 1; /* Apparently, without this rule the browser will place this div in a second row. */
	}
}

/* Desktop portrait layout. */
@media (min-width: 742px) and (max-width: 1330px) {
	body::after {
		background-image: linear-gradient(to right, transparent, var(--theme-basic) 20% 80%, transparent);
	}

	.divMainContainer {
		grid-template-rows: 1fr 3fr;
	}

	.divAnnouncements {
		grid-row: 1;
	}

	.divForms {
		align-self: start;
		grid-row: 2;
	}
}

@media (max-width: 742px) { 
	body::after {
		background-image: linear-gradient(to right, transparent, var(--theme-basic) 20% 80%, transparent);
	}

	.divMainContainer {
		grid-template-rows: auto;
	}

	.divAnnouncements {
		grid-row: 1;
	}

	.divForms {
		align-self: start;
		box-sizing: border-box;
		grid-row: 2;
		padding: 20rem;
	}

	.divText,
	.bttnStyle1 {
		width: 100%;
	}
}