@charset "utf-8";

:root {
	--color1: #F2F0EB;
	--color2: hsl(176, 11%, 60%);
	--color3: #362E2B;
  }
body {
	background-image: u-rl("../images/ui/gate.png");
	background-image: url("../images/ui/circuit.svg");
	
	background-color: var(--color2);
	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;      
/*
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);*/
}
div{
	justify-content: center;
	box-sizing: border-box;
}
img{
	width:100%;
}
#Index{
	overflow: hidden;
}
#Index #header{
	width: 90%;
	height: min-content;
}

#Index #sidebar div{
	flex-basis: 55%;
	padding: 5%;
}
#Index #sidebar div h2{
	font-size: 2vw;
}
#Index #content{
	position: absolute;
	padding:7vw 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% 0 1% 1%;
	z-index: 7;
}
#header>div{
	display: flex;
	align-items: center;
}
#header div img{
	width: 20%;
	flex: 1;
}
#header div div{
	flex: 4;
}
#header h1{
	font-size: 2.9vw;
	margin: -0.5vw auto -1vw auto;
}
#header h2{
	font-size: 1.2vw;
}
#nav{
	height: min-content;
	display: flex;
	flex-basis: 80%;
	align-items: center;
	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   {
	display: flex;
	color: var(--color1);
	text-align: center;
	font-size: 1.3vw;
	letter-spacing: 0.3vw;
	font-family: "NTR", sans-serif;
	font-weight: 400;
	text-decoration: none;
	flex-wrap: wrap;
}
#sidebar div{
	flex-basis: 48%;
}
#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{
	padding: 2%;
	background-color: var(--color2);
	background-image: url("https://www.transparenttextures.com/patterns/circles.png");
	align-items: stretch;
	box-shadow: 0 0 8px 2px var(--color2);
	transition: border-radius 4s;
	box-sizing: border-box;
	cursor: pointer;
	float:left;
	border: 4px double var(--color1);
	border-image: url(../images/ui/box1.sv.g) 49% stretch;
}
.box h2, .w1 h2{
	font-size: 2vw;
}
.box:hover{
	border-radius: 10%;

}
.box2{
	padding: 10px;
	border: 2px solid var(--color1);
	border-radius: 0;
	background-image: u-rl("../images/ui/gate.png");
	border-image: url(../images/ui/box3.sv.g) 49% stretch;
}
.box2 h2{
	text-shadow: 2px 2px 2px var(--color2);
}
.button, #nav div{
	padding: 12px;
	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: 2px solid var(--color1);
	border-radius: 4%;
	border-image: url(../images/ui/box2.sv.g) 49% stretch;
	background-image: url("https://www.transparenttextures.com/patterns/circles.png");
}
.button h2 {
	margin: 0;
}
.label{
	width:67%;
	margin: 0 0 0 10%;
}
.flex{
	display: flex;
}
.flex>div{
	flex: 1;
}
#content .button img{
	width: 26%;
}
.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(--color1);
	text-align: center;
	font-size: 504%;
	letter-spacing: 1%;
	font-family: "NTR", sans-serif;
	text-decoration: none;
	margin:1%;
	font-weight: 500;
}
h2  {
	color: var(--color1);
	text-align: center;
	font-size: 1.3vw;
	letter-spacing: 0.2em;
	font-family: "NTR", sans-serif;
	font-weight: 400;
	text-decoration: none;

	margin: 1vw 0;
}
h3	{
	color: var(--color1);
	text-shadow: 4px 4px 4px var(--color2);
	text-align: center;
	font-size: 1vw;
	letter-spacing: 0.5vw;
	font-family: "NTR", sans-serif;
	font-weight: 400;
	text-decoration: none;
}
h4 {
	color: var(--color1);
	text-align: center;
}

p, body {
	color: var(--color1);
	margin:1%;
	line-height: 1.8;
	letter-spacing: 1;
	font-family: "NTR", sans-serif;
}
.h4{
	height: 9vw;
}
.w1 {
	width:98%;
	margin: 1%;
}
.w3{
	width:23%;
	margin: 1%;
}
.w4{
	width:31%;
	margin: 1%;
}
.w33{
	width:31.3%;
	margin: 1%;
}
.w50{
	width:48%;
	margin: 1%;
}
.w5c{
	width:48%;
	margin: 2% auto;

}




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


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