:root {
	--width: 25%;
	--rows: 3;
	--content: 'This is desktop';

	--colorPrimary: hsla(0, 95%, 35%, .8);
	--colorSecondary: hsla(0, 95%, 95%, .7);
	--colorTertiary: hsla(0, 95%, 15%, .6);

	--headerHeight: 10vh;
	--menuHeight: 10vh;
	--mainHeight: 75vh;
	--footerHeight: 10vh;

	--buttonWidth: 20%;
	--electButtonWidth: 10vw;
	--pagesTotal: 2;
	--menuWidth: 100vw;
	--menuButtonWidth: calc( 90vw / 4 );
}

@media only screen and (max-width: 480px) {
	:root{
		--width: 100%;
	}
}

@media only screen and ( max-width: 767px ) {
	:root{
		--width: 50%;
		--content: 'This is mobile';
	}

	#main,
	#content {
		width: 100vmin;
	}

}

@media only screen and ( max-width: 1096px ) {
	:root{
		--width: 50%;
		--content: 'This is desktop';
	}

	#main,
	#content {
		width: 100vmin;
	}
}

@keyframes dissolveOut {
	9%	{ opacity: 0.9 }
	39%	{ opacity: 0.7 }
	69%	{ opacity: 0.5 }
	89%	{ opacity: 0.3 }
	100%	{ opacity: 0 }
}

@keyframes dissolveIn {
	9%	{ opacity: 0 }
	39%	{ opacity: 0.3 }
	69%	{ opacity: 0.5 }
	89%	{ opacity: 0.7 }
	100%	{ opacity: 1 }
}

* {
	padding: 0;
	margin: 0;
}

h1 {
	font-size: 4vmin;
}

h2 {
	font-size: 3vmin;
}

button {
	border: unset;
	color: var( --colorPrimary );
	font-family: Consolas, Viga, Aleo;
	font-size: 3vmin;
	background: linear-gradient( to bottom, var(--colorSecondary) 0%, var(--colorTertiary) 90% );
	background: linear-gradient( to bottom, hsla( 10, 100%, 100%, 0.7 ) 15%, hsla( 0, 100%, 90%, 0.6 ) 89% );
	padding: 1vh 0 0.1vh;
	height: 50%;
	width: 40vw;
	letter-spacing: 0.3vmin;
	margin: unset;
}

button:hover,
#home-butt:hover {
	cursor: pointer;
!--	text-shadow: 2px 2px var( --colorPrimary ); --!
}

button:hover {
	color: var(--colorTertiary);
}

#home-butt:hover {
	color: var(--colorPrimary);
}

.ui-layer,
.foreground-layer,
.background-layer {
	position: fixed;
}

.ui-layer {
	z-index: 3;
}

.foreground-layer {
	z-index: 2;
}

.background-layer {
	z-index: 1;
}

#header-text,
#main,
#menu {
	left: 2.5vw;
}

#header-text,
#main,
#menu,
#pledge {
	display: flex;
}

#menu {
	top: 16vh;
	height: var(--menuHeight);
	width: var(--menuWidth);
	letter-spacing: 0.7vw;
}

#pledge,
#headth {
	width: 25vmin;
}

#headth {
	height: 25vmin;
}

#pledge {
	color: hsla( 0, 100%, 100%, .9 );

	font-family: Viga;
	font-size: 2vmin;

	padding: 1vmin;
	justify-content: center;
	background: radial-gradient( hsla( 10, 100%, 20%, 0.9 ) 0%, hsla( 0, 100%, 30%, 0.9 ) 79% );
	height: 70vh;
	top: 23vh;

	border: 0.5vmin groove hsla( 10, 90%, 45%, .8 );
	border-bottom-right-radius: 2vmin;
	border-bottom-left-radius: 2vmin;
}

#menu {
	width: 74.35vw;
}

#header {
	top: 3vh;
	height: var(--headerHeight);
}

#pledge-header {
	font-family: Century Gothic;
}

#menu,
#header {

}

h1 {
	text-shadow: 1px 1px hsla(18, 100%, 80%, .7);
}

#header-text {
	color: var(--colorPrimary);
}

#header-text,
#main {
	font-family: Gelasio, Constantia, Michroma, Manrope, Libre Bodoni;
}

#header-text,
#main,
#pledge {
	flex-direction: column;
}

#header-thumbnail {
	top: 1.5vh;
	left: 80.5vw;
}

#pledge {
	left: 80vw;
	font-family: DejaVu Serif, Liberation Mono;
	text-align: center;
	align-items: center;
	overflow: scroll;
}

#header-text,
#header-thumbnail {

}

.content-string {
}

#content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#content,
#main {
	height: var( --mainHeight );
	width: 70vw;
}

#main {
	top: 16vh;

	color: "indianred";
	font-family: Viga, Neuton, Alef, sans-serif;
	font-weight: bold;
	font-size: 1.8vw;

	background-blend-mode: darken;
	background-size: 90vw calc(90vh * (4vw / 5vw));
	background-repeat: no-repeat;
	background-position: 50% 50%;

	border-right: 2px groove hsla(0, 100%, 45%, .8);
	border-left: 2px groove hsla(0, 100%, 45%, .8);

	padding: 3vh 2vw;

	overflow: scroll;
}