:root {
  --text: black;
  --mbg: white;
}
   .theme-light {
    --text: black;
    --mbg: white;
  }
  .theme-dark {
    --text: gray;
    --mbg: black;
  }
  
body {
	background:var(--mbg);
	color:var(--text);
	font-family:"Arial", sans serif;
	font-size:14px;
	line-height:1.6em;
}
	a:link { color: DodgerBlue; text-decoration:underline; }
	a:visited { color: DodgerBlue; text-decoration:underline; }
	a:hover { color: YellowGreen; text-decoration:underline; cursor:help; }

.container {
	display: grid;
	grid-template:
		"myHeader myHeader"
		"mySidebar myMainContent"
		"mySidebar myMainContent"
		/ 1fr 3fr;
	grid-gap:10px;
	width:1200px;
	overflow:hidden;
}

header { 
	grid-area: myHeader;
	background:White;
	position:fixed;
	width:100%;
	margin-top:-10px;
	margin-left:-20px;
	padding-left:20px;
	border-bottom:2px solid DodgerBlue;
	z-index:999;
}

aside { 
	grid-area: mySidebar;
	margin-top:80px;
	position:fixed;
}

.sidebox {
	width:300px;
	padding:10px;
	border: 2px solid DodgerBlue;
	margin-top:10px;
	text-align:left;
	
}

main { 
	grid-area: myMainContent;
	width:100%;
	margin-top:80px;
	margin-left:40px;
}

h1 {
	font-size:40px;

}

h2 {
	font-size:16px;
}

hr {
	border:1px dashed DodgerBlue;
}

summary {
	background:rgba(0,0,0,.07);
	border-bottom:2px solid DarkGrey;
	padding:5px;
}

summary:hover {
	background:var(--mbg);
	border:1px solid DarkGrey;
}

details {
	margin-bottom:5px;
	width:97.75%;
}

.maincat {
	font-size:24px;
	background:DodgerBlue;
	color:White;
	border:0;
	margin-bottom:5px;
	width:100%;
}

.maincat:hover {
	font-size:24px;
	background:YellowGreen;
	color:White;
	border:0;
}

/* Kao Gallery */

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.tags {
	position: fixed;
	padding: 0 10px;
	display:none;
	width:300px;
	height:70px;
	background:#fff;
	overflow-y:hidden;
	left:0;
	top:0;
	margin-top:160px;
	margin-left:10px;
	font-size:12px;
}

.graphic {
	margin:2px;
	padding-left:12px;
	position: relative;
}

.graphic:hover .tags {
	display:inline;
}

button {
	background:#fff;
	width:200px;
	border:4px double DodgerBlue;
	color:DodgerBlue;
	padding:8px;
}

button:hover {
	background:DodgerBlue;
	color:White;
	border:4px double White;
}

button:active {
	background:YellowGreen;
	color:White;
	border:4px double White;
}

#faq {
	position:absolute;
	z-index:999;
	background:White;
	width:1000px;
	height:640px;
}

.faqwindow {
	background:White;
	padding:10px;
	width:700px;
	height:500px;
	overflow-y:scroll;
	border:2px solid DodgerBlue;
	box-shadow: 12px 15px DarkGrey;
}

.faqheader {
	background:DodgerBlue;
	color:White;
	width:700px;
	font-size:24px;
	margin-top:20px;
	padding:5px 10px;
	border:2px solid DodgerBlue;
	box-shadow: 12px 15px DarkGrey;
}

.closewindow {
	margin-left:352px;
	width:50px;
	height:50px;
}