@font-face {
	font-family: 'Theinhardt-Light';
	src: url('/fonts/Theinhardt-Light.otf') format('opentype');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Theinhardt-Medium';
	src: url('/fonts/Theinhardt-Medium.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Theinhardt-Regular';
	src: url('/fonts/Theinhardt-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
	
body {
	font-family: 'Theinhardt-Light', Arial, sans-serif;
	margin: 0; 
	background: #444; color: #eee;
	width: 100vw; height: 100vh;
	background: url('/img/bg-dark.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
}
		
.boldtext { font-family: 'Theinhardt-Regular', Arial, sans-serif; }
.dottext { font-family: Arial, sans-serif; color: #ccc; }
        
.container {
	height:100vh;
	display: grid;
	grid-template-rows: 12% 76% 12%;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-areas: 
		". header login login"
		"navi content content ."
		"version . footer footer"
	;
}
		
header {
	background: url('/img/bg-line-top.png');
	background-repeat: no-repeat;			
	background-size: 64px 100%;
			
	font-family: 'Theinhardt-Light', Arial, sans-serif;
	font-size: xx-large;
	text-shadow: 0px 0px 4px #666;
	align-self: end;
	margin-left: -9px;
	grid-area: header;
}

login {
	font-size: small;
	color: #999;
	margin-right: 10%;
	text-align: right;
	align-self: end;
	grid-area: login;
}	
	
navi {
	position: relative;
			
	background: url('/img/bg-line.png');
	background-repeat: no-repeat;
	background-position: right;
	background-size: 64px 100%;
			
	height: 76vh;
	overflow: hidden;
			
	font-size: xx-large;
	text-shadow: 0px 0px 4px #666;
	color: #999;
	text-align: right;
	grid-area: navi;
}

.scroll-container {
	width: 100%;
	height: 90%;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
}
.scroll-container:active { cursor: grabbing; }
.scroll-container::-webkit-scrollbar { display: none; }
.scroll-arrow {
	position: absolute;
	bottom: 5px;
	left: 90%;
	transform: translateX(-50%);
	font-size: 24px;
	color: rgba(255, 255, 255, 0.8);
	pointer-events: none; 
	transition: opacity 0.3s ease;
	opacity: 0; 
	animation: bounce 2s infinite;
	z-index: 10;
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
	40% { transform: translate(-50%, -8px); }
	60% { transform: translate(-50%, -4px); }
}

content {
	background:url('/img/logo2.png') no-repeat;
	background-position: center; 
	background-size: 256px 256px;
						
	font-size: large;
	color: #ddd;
	text-align: center;
	
	align-self: center;
	align-content: center;	/* Text vertical centered */
	min-height: 70vh;
	padding: 20px;
	grid-area: content;
}

content-prj {						
	font-size: large;
	color: #ddd;			
		
	align-self: start;	
	padding-left: 40px;
	padding-top: 29px;
	padding-right: 15px;
		
	grid-area: content;
	
	height: 100%;
	min-height: 0;
	overflow: hidden;
	display: flex;
    flex-direction: column;
}
.scroll-content {	
	height: 90%;
	min-height: 0;
	overflow-y: scroll;
	overflow-x: none;	
	flex: 1;
	
	scrollbar-width: thin;
	/* scrollbar-color: #ccc rgba(255, 255, 255, 0.04); */
	scrollbar-color: #ccc transparent;
}

.next-button {
    position: sticky;    
    margin-top: 0;    
}
	
version {
	margin-right: 9px;
	font-size: small;
	color: #999;
	text-align: right;
	grid-area: version;
}

footer {
	font-size: medium;
	color: #999;
	a { color: #999; text-decoration: none; }
	a:hover { color: #ddd; text-decoration: none; }
	margin-right: 10%;
	text-align: right;
	grid-area: footer;
}

div.noslide { width:100%; overflow:hidden; }
	
div.slide-right { width:100%; overflow:hidden; }
div.slide-right p { animation: slide-right 0.5s; }
.time0 { animation: slide-right 0.5s; }
@keyframes slide-right {
	from { margin-left: -100%; width: 300%; }
	to { margin-left: 0%; width: 100%; }
}

div.slide-left { width:100%; overflow:hidden; }
div.slide-left p { animation: slide-left 1s; }
.time1 { animation: slide-left 0.50s; }
.time2 { animation: slide-left 0.55s; }
.time3 { animation: slide-left 0.60s; }
.time4 { animation: slide-left 0.65s; }
.time5 { animation: slide-left 0.70s; }
.time6 { animation: slide-left 0.75s; }
.time7 { animation: slide-left 0.80s; }
.time8 { animation: slide-left 0.85s; }
.time9 { animation: slide-left 0.90s; }
.time10 { animation: slide-left 0.95s; }
.time11 { animation: slide-left 1.00s; }
.time12 { animation: slide-left 1.05s; }
.time13 { animation: slide-left 1.10s; }
.time14 { animation: slide-left 1.15s; }
.time15 { animation: slide-left 1.20s; }
.time16 { animation: slide-left 1.25s; }
.time17 { animation: slide-left 1.30s; }
.time18 { animation: slide-left 1.35s; }
.time19 { animation: slide-left 1.40s; }
.time20 { animation: slide-left 1.45s; }
.time21 { animation: slide-left 1.50s; }
.time22 { animation: slide-left 1.55s; }
.time23 { animation: slide-left 1.60s; }
.time24 { animation: slide-left 1.65s; }
.time25 { animation: slide-left 1.70s; }
.time26 { animation: slide-left 1.75s; }
.time27 { animation: slide-left 1.80s; }
.time28 { animation: slide-left 1.85s; }
.time29 { animation: slide-left 1.90s; }
.time30 { animation: slide-left 1.95s; }
		
@keyframes slide-left {
	from { margin-left: 100%; width: 300%; }
	to { margin-left: 0%; width: 100%; }
}

div.fade-in { animation: fade-in 2s; }		
@keyframes fade-in {
	from { opacity: 0 }
	to { opacity: 1 }
}

p { margin: 0; }
		
a { font-family: 'Theinhardt-Regular', Arial, sans-serif; color: #aaa; text-decoration: none; }
a:hover { color: #fff; text-decoration: none; }

a.role { 
	font-family: 'Theinhardt-Regular', Arial, sans-serif; color: #0099cc; text-decoration: none; text-shadow: 0px 0px 2px #666; font-size: medium;
	background-color: rgba(0, 0.796, 1, 0.1); padding-left: 3px; padding-right: 3px;
}
a.role:hover { color: #00ccff; text-decoration: none; }
.role-selected {
	font-family: 'Theinhardt-Regular', Arial, sans-serif; color: #00ccff; text-shadow: 0px 0px 2px #666; font-size: medium;
	background-color: rgba(0, 0.796, 1, 0.1); padding-left: 3px; padding-right: 3px;
}
.role-deselected {
	font-family: 'Theinhardt-Regular', Arial, sans-serif; color: #0099cc; text-shadow: 0px 0px 2px #666; font-size: medium;
	background-color: rgba(0, 0.796, 1, 0.1); padding-left: 3px; padding-right: 3px;
}

a.start { font-family: 'Theinhardt-Regular', Arial, sans-serif; color: #fff; text-decoration: none; }
a.start:hover { color: #ccc; text-decoration: none; }

.app-mode {
	font-family: 'Theinhardt-Regular', Arial, sans-serif; color: #ffcc00; text-shadow: 0px 0px 2px #666; font-size: large;
	background-color: rgba(1, 0.796, 0, 0.1); padding-left: 3px; padding-right: 3px;
}
		
.button {
	font-family: 'Theinhardt-Medium', Arial, sans-serif;
	display: inline-block; border: 0; border-radius: 10px; 
	background: #bbb; color: #333; padding: 10px 12px; 
	cursor: pointer; text-decoration: none; 
	box-shadow: 0 0px 8px 0 rgba(0,0,0,0.4);
}
.button:hover { background: #eee; color: #666; }

.buttonTour {
	font-family: 'Theinhardt-Regular', Arial, sans-serif;
	font-size: large;
	padding: 4px 10px 2px 10px;
	background-color: rgba(255,255,255,0.25);
	display: inline-block; 
	border: 0; 
	border-radius: 10px; 
	color: #333;
	cursor: pointer; text-decoration: none; 
	box-shadow: 0 0px 8px 0 rgba(0,0,0,0.4);
}
.buttonTour:hover { background: #fff; color: #666; }
.buttonTour:focus { background: #fff; color: #666; }
		
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #fff;
	margin: 0 0;
    padding: 0;
	opacity: 0.25;
}

img.shadow { box-shadow: 0 0px 8px 0 rgba(0,0,0,0.4); }		

.postit {
	font-family: 'Theinhardt-Light', Arial, sans-serif;
	text-align: center; font-size: small;
	/* 
	border: 0; border-radius: 10px; 
	background-color: rgba(255,255,255,0.25);
	background-color: #fff7a3;
	*/
	
	background-color: rgba(255,247,163,0.95);
	
	color: #1a1a1a; padding: 8px;	
	box-shadow: 0 0px 8px 0 rgba(0,0,0,0.4);
}