@charset "utf-8";

:root {
	--color1: #F2F0EB;
	--color2: #362E2B;
	--color3: #B2755F;
  }
body {
	background-image: u-rl("../images/ui/gate.png");
	background-color: var(--color1);
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;      
}
div{
	justify-content: center;
	box-sizing: border-box;
}
img{
	width:100%;
}
#Index{
	overflow: hidden;
}
#Index #header{
	width: 90%;
	left:5%;
	top:5%;
}
#Index #nav{

}

#Index #sidebar div{
	flex-basis: 55%;
}
#Index #sidebar div h2{
	font-size: 2vw;
}
#Index #content{
	position: absolute;
	padding:12vw 1vw 0 1vw;
	right: 25%;
	top:0;
	left: 0;
	bottom:0;
	overflow-y: scroll;
	-ms-overflow-style: none;
}
#Index #sidebar{
	position: absolute;
	top:14%;
	right: 0;
	left: 75%;
	bottom:0%;
	font-size: 2vw;
}

#header{

	cursor: pointer;
	flex-basis: 20%;
	padding:1%;
	z-index: 7;
}
#nav{
	display: flex;
	flex-basis: 80%;
	align-items: center;
	height: min-content;
	z-index: 6;
}
#content{
	flex-basis: 75%;
	overflow: visible;
	display: initial;
}
#sidebar{
	flex-basis: 25%;
	overflow-y: scroll;
	-ms-overflow-style: none;
}
#sidebar::-webkit-scrollbar, #content::-webkit-scrollbar {
	display: none;
}
#nav div{
	flex: 1;
	background-color: var(--color2);
	cursor: pointer;
	height:min-content;
	margin:1%;
	border: 1% solid var(--color1);
}
#nav div h2{
	margin:0;
	font-size: 1.5vw;
}
#nav div img{
	display: none;
	/*
	width: 28%;
	margin: -4px 0  -4px -22px;
	*/
}
#sidebar div {
	padding: 5%;
	cursor: pointer;
	box-sizing: border-box;
}
#sidebar div img{
	margin-bottom: 4%;
}
#sidebar div h2{
	font-size: 8vw;
	display:none;
}

.box{
	background-color: var(--color2);
	align-items: stretch;
	box-shadow: 0 0 8px 2px var(--color2);
	box-sizing: border-box;
	cursor: pointer;
	float:left;
	border: 32px solid var(--color1);
	border-radius: 32px;
	border-image: url(../images/ui/box1.svg) 49% stretch;
}
.box2{
	background-color: var(--color1);
	border: 32px solid var(--color1);
	border-radius: 32px;
	background-image: u-rl("../images/ui/gate.png");
	border-image: url(../images/ui/box3.svg) 49% stretch;
}
.box2 h2{
	text-shadow: 2px 2px 2px var(--color2);
}
.button, #nav div{
	align-items: stretch;
	background-color: var(--color2);
	box-sizing: border-box;
	cursor: pointer;
	float:left;
	display: flex;
	align-items: center;
	box-shadow: 0 0 4px 1px var(--color2);
	border: 32px solid var(--color1);
	border-radius: 44px;
	border-image: url(../images/ui/box2.svg) 49% stretch;
}
.button h2 {
	margin: 0;
}
.label{
	width:72%;
	margin: -5% -15% -5% 4%;
}
.flex{
	display: flex;
}
#content .button img{
	width: 28%;
	margin: -6px 0  -6px -24px;
}
.title {
	text-align: center;
	width: 100%;
	text-transform: small-caps;
}
.gallery{
	float: left;
	width: 100%;
}
.gallery > h2{
	display: none;
}


a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}
a:link {
    color: #FFFFFF;
}
a:visited {
    color: #FFFFFF;
}
a:hover {
    color: #ABA62F;
}
a:active {
	color: #D7E919;
}




h1   {
	color: var(--color2);
	text-align: center;
	font-size: 640%;
	letter-spacing: 1%;
	font-family: "Kingthings", Georgia, Verdana, Geneva, sans-serif;
	font-variant: small-caps;
	text-decoration: none;
	margin:1%;
	font-weight: 500;
}
h2  {
	color: var(--color1);
	text-shadow: 2px 2px 2px var(--color2);
	text-align: center;
	font-size: 1.3vw;
	letter-spacing: 0.5vw;
	font-variant: small-caps;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: 400;
	text-decoration: none;

	margin: 0 0 16px 0;
}
#sidebar   {
	display: flex;
	color: var(--color2);
	text-shadow: 2px 2px 2px var(--color1);
	text-align: center;
	font-size: 1.3vw;
	letter-spacing: 0.3vw;
	font-variant: small-caps;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: 400;
	text-decoration: none;
	flex-wrap: wrap;
}
#sidebar div{
	flex-basis: 48%;
}
h3	{
	color: var(--color1);
	text-shadow: 4px 4px 4px var(--color2);
	text-align: center;
	font-size: 1vw;
	letter-spacing: 0.5vw;
	font-variant: small-caps;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: 400;
	text-decoration: none;
}
h4 {
	color: var(--color1);
	text-align: center;
}

p, body {
	font-variant: small-caps;
	color: var(--color1);
	margin:1%;
	line-height: 1.5;
	font-family: Georga, serif;
}
@font-face{
	font-family: "Kingthings";
	src: url("../fonts/Kingthings.ttf");
}

.h4{
	height: 9vw;
}
.w1 {
	width:98%;
	margin: 1%;
}
.w3{
	width:23%;
	margin: 1%;
}
.w4{
	width:30%;
	margin: 1%;
}
.w33{
	width:31.3%;
	margin: 1%;
}
.w50{
	width:48%;
	margin: 1%;
}




#datavisualizationtools {
	
	margin: -5% -20% -5% 10%;
}


#webapplications h2 {
	letter-spacing: 0.4vw;
	
}