/* Default Colors */
:root {
	--text: #303030;
	--menu-active: #000000;
	--menu-inactive: #5F5F5F;
	--bg: #FFFFFF;
	--bg-page: #C9BCB6; /* if bg image or video doesn't load */
	--bg-card: #F6F0DF;
	--bg-input: #000000;
	--bg-input-hover: #333333;
	--text-input: #CCCCCC;
	--bg-image: url("paintbrush.jpg");
	}

body { margin: 3em 0 0 0; padding: 0; font-family: Verdana; font-size: 12pt;
	color: var(--text); background-color: #000000;
	background-image: var(--bg-image); background-repeat: no-repeat; background-size: cover; }

div, input, button, select, textarea, #menu, #menu li, img { box-sizing: border-box; }

input, button, select, textarea { border: none; margin: 0.25em 0; padding: 0.5em; width: 100%; 
	background-color: var(--bg-input); color: var(--text-input); }
textarea { height: 7em; resize: vertical; }
button { max-width: 30%; cursor: pointer; }
button:hover { background-color: var(--bg-input-hover); }

.text-right { text-align: right; }
.text-center { tex-align: center; }
.text-h1 { font-size: 1.4em; }

#background-video { width: 100vw; height: 100vh; object-fit: cover; position: fixed; inset: 0 0 0 0; z-index: -1; }

#topbar { padding: 1em; position: fixed; top: 0; left: 0; width: 100%; height: 3em; box-shadow: 0 0 0.4em 0 #777777; text-align: center; }

#topbar, #header, #menu, #content, #footer { background-color: var(--bg); }

#topbar div { margin: 0; padding: 0; width: 49%; display: inline-block; }
#topbar_left { text-align: left; }
#topbar_right { text-align: right; }

#header, #menu, #content { margin: 0 auto; width: 90%; max-width: 60em; }

#header { min-height:50vh; margin-top: 5em; margin-bottom: 2em; text-align: center; }

#header_text { margin: 1em; width: 50%; }
#header_logo { width: 10%; }
#header_tag { margin: 1em; width: 30%; }

#menu { display: block; padding: 0.5em; text-align: center; }
#menu li { display: inline-block; padding: 0 1em; list-style-type: none; cursor: pointer; color: var(--menu-inactive); }
#menu a { text-decoration: none; color: var(--menu-inactive); }
#menu a:hover { color: #000; color: var(--menu-active); box-shadow: 0em 0.5em 0.5em -0.5em; #777777; }

#content { min-height:80vh; padding: 1em 0 ; }

#content p { line-height: 1.5em; font-size: 14pt; }

#content hr { border: dotted 3pt #000000; border-bottom: none; width: 95%; margin: 1em; }

#footer { margin: 1em 0 0 0; padding: 1em; width: 100%; height: 3em; } 

/* ----------------------------------------- */

.page { display: none; } 
.page p { margin: 0.5em 1em; }

.banner-image { width: 100%; margin: 0; }

.two-column > div { display:inline-block; width: 49.5%; vertical-align: top; }
.two-column > div:nth-of-type(1) img { max-width: 100%; } 

.two-column-1-2 > div { display:inline-block; vertical-align: top; }
.two-column-1-2 > div:nth-of-type(1) { width: 33%; } 
.two-column-1-2 > div:nth-of-type(2) { width: 65%; }

.two-column-2-1 > div { display:inline-block; vertical-align: top; }
.two-column-2-1 > div:nth-of-type(1) { width: 65%; } 
.two-column-2-1 > div:nth-of-type(2) { width: 33%; }

#content img.title-image { display: block; margin: 0.5em; height: 2em; }
#content .card { margin: 1.5em; padding: 1em; background-color: var(--bg-card); }
#content .card div { vertical-align: middle; }
#content .card p { line-height: 1.2em; font-size: 12pt; }

.fakebutton { display: block; width: fit-content; margin: 0 auto; padding: 0.5em 1.5em; border: none; text-align: center; text-decoration: none; 
  background-color: var(--bg-input); color: var(--text-input); }
.fakebutton:hover { background-color: var(--bg-input-hover); color: #FFF; }

/* ***************************************** */
/*  Mobile Only                              */
/* ***************************************** */

@media(max-aspect-ratio: 1/1) {

 #background_video { display: none; } 

 #header_text { margin: 1em; width: 70%; }
 #header_logo { width: 20%; }
 #header_tag { margin: 1em; width: 50%; }

}