.heraldryMode {
    --primary-color: #5B81B5;
    --secondary-color: #73A8F2;
    --ambient-color: #486D9E;
    --accent-color: #FFD8BE;
    --dark-color: #424242;
    --light-color: #EFF0F0;

    --background-gradient-top: var(--primary-color);
    --background-gradient-bottom: var(--ambient-color);

    --border-color: var(--accent-color);
    --border-radius-top: 12px 12px 0 0;
    --border-radius-bottom: 0 0 12px 12px;
    --border-width: 2px;
    
    background-color: var(--primary-color);
    background-image: linear-gradient(135deg, var(--background-gradient-top), var(--background-gradient-bottom));
	overflow: hidden;
}

.heraticMode {
    --primary-color: #67455A;
    --primary-color-dark: #5C3D50;
    
    --background-gradient-top: var(--primary-color);
    --background-gradient-bottom: var(--primary-color-dark);
}

.siteBackground {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-image: url('./assets/blue-square-pattern.png');
	display: flex;
}

.sideImage {
    position: relative;
    height: auto;
    bottom: -7em;
    left: -10em;
}

.mainContainer {
    width: 100%;
	margin: 1em 5em 1em 0;
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.siteTitle {
	text-align: center;
}

.sectionLabel {
	position: relative;
	left: .5em;
	bottom: .5em;
	width: 5%;
	margin: 0;
	text-align: right;
}

.statusContainer {
    height: fit-content;
	display: flex;
}

.statusLabel {
	position: relative;
	left: .5em;
	width: 10%;
	margin: 0;
	align-self: center;
}

.statusContent {
	background: var(--ambient-color);
    border-color: var(--border-color);
    border-radius: var(--border-radius-top);
    border-width: var(--border-width);
    border-style: solid;
	width: 90%;
	padding: 12px;
}

.pageContainer {
	height: 70%;
	display: flex;
}

.pageLabel {
	position: relative;
	left: .5em;
	width: 10%;
	margin: 0;
}

.pageWindow {
    background: var(--ambient-color);
    border-color: var(--border-color);
    border-width: var(--border-width);
    border-style: solid;
    padding: 12px;
	width: 90%;

    h1 {
		margin: 0;
    }
}

.controlContainer {
    display: flex;
}

.navContainer {
    display: none;
}

.controlLabel {
	position: relative;
	left: .5em;
	width: 10%;
	margin: 0;
}

.commandContainer {
	background: var(--ambient-color);
    border-color: var(--border-color);
    border-radius: var(--border-radius-bottom);
    border-width: var(--border-width);
    border-style: solid;
    padding: 12px;
	width: 90%;
	display: flex;
	justify-content: space-between;

    .commandInput {
	width: 90%;
	background: var(--dark-color);
	border-color: transparent;
	border-radius: 0 0 0 4px;
    }

    .commandButton {
		width: 10%;
	border-color: transparent;
	border-radius: 0 0 4px 0;
	background: var(--accent-color);
	color: var(--dark-color);
    }
}