/* Homepage */
/* General */
body {
	background-color: var(--col-drk);
	color: var(--col-brt);
}

footer {
	background-color: var(--col-brt);
	color: var(--col-drk);
}

ul {
	padding: 0pt;
	list-style-type: none;
}

/* Logo & title */
#navlogo, #navtitle {
	position: absolute;
	/* Dynamic scroll display. */
	opacity: 0;
	transition: all var(--tsn-dur) var(--tsn-eas);
}

/* Sections */
/* Header */
header {
	display: grid;
	width: 100vw;
	max-width: 100%;
	text-align: center;
	padding: 0;
}

header .wrapp {
	width: 600pt;
	max-width: calc(100% - (var(--lay-nvh) * 1.5));
	margin: auto;
	padding: calc(var(--lay-nvh) * 3) 0 calc(var(--lay-nvh) * 3) 0;
}

@media only screen and (max-width: 800px) {
	header .wrapp {
		width: calc(100% - (var(--lay-nvh) * 1.5));
	}
}

header p {
	text-align: var(--fnt-txa);
}

header.h1 {
	font-size: 0pt;
	margin: 0;
}

#Welcome h2 {
	margin: 3em 0 1em 0;
}

#Concept li img {
	width: 100%;
}

#Services li, #Contact li {
	display: inline-block;
	vertical-align: top;
}

#Contact li {
	width: 60pt;
	max-width: calc(100% - (var(--lay-nvh) * 0.5));
	margin: calc(var(--lay-nvh) * 0.25) calc(var(--lay-nvh) * 0.25) calc(var(--lay-nvh) * 0.25) calc(var(--lay-nvh) * 0.25);
	text-align: center;
}

#Contact ul {
	margin: calc(var(--lay-nvh) * 1) calc(var(--lay-nvh) * 0) calc(var(--lay-nvh) * 1) calc(var(--lay-nvh) * 0);
}

#Contact li img {
	display: inline-block;
	width: 40pt;
}

#Contact li a {
	display: inline-block;
	font-size: 0pt;
	border-radius: 50%;
	overflow: hidden;
	line-height: 1em;
}

#Areas li {
	display: inline-block;
	width: 142.5pt;
	max-width: calc(100% - (var(--lay-nvh) * 1.4));
	margin: var(--lay-nvh) calc(var(--lay-nvh) * 0.70) var(--lay-nvh) calc(var(--lay-nvh) * 0.70);
	text-align: center;
}

#Areas h3 {
	margin: -17pt 0pt 0pt 0pt;
	font-size: 1em;
}

@media only screen and (max-width: 470px) {
	#Areas li {
		width: 100%;
	}
}

.profile {
	margin: var(--lay-nvh) calc(var(--lay-nvh) * 0.5) var(--lay-nvh) calc(var(--lay-nvh) * 0.5);
	text-align: center;
}


/* WebGL */
.wGLinstCnt, header h1 .wGLinstCnt, .profile .wGLinstCnt{
	display: inline-block;
}

#Areas .wGLinstCnt, #Services .wGLinstCnt, #Concept .wGLinstCnt {
	width: 100%;
	max-width: 70vw;
	aspect-ratio: 1 / 1;
}

header h1 .wGLinstCnt {
	width: 50vw;
	min-width: 120pt;
	max-width: 600pt;
	aspect-ratio: 1 / 1;
}

.profile .wGLinstCnt {
	width: 142.5pt;
	max-width: calc(100% - (var(--lay-nvh) * 1));
	aspect-ratio: 1 / 1;
	border-radius: 100%;
}

#profilePicture {
	overflow: hidden;
}

@media only screen and (max-width: 600px) {
	.profile .wGLinstCnt {
		width: 100pt;
	}
}