@font-face {
    font-family: 'WhiteRabbit';
    src: url('../font/WhiteRabbit.eot');
    src: url('../font/WhiteRabbit.eot?#iefix') format('embedded-opentype'),
        url('../font/WhiteRabbit.woff2') format('woff2'),
        url('../font/WhiteRabbit.woff') format('woff'),
        url('../font/WhiteRabbit.ttf') format('truetype'),
        url('../font/WhiteRabbit.svg#WhiteRabbit') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

a {
	/* ffca61 */
	--color: #F7B267;
	--hover: #F7B267;
	--active: #ff6161;
	text-decoration: none;
}
a:link{   color: var(--color);} 
a:visited{color: var(--color);} 
a:hover{  color: var(--hover); text-decoration: underline; } 
a:focus{  color: var(--active);} 
a:active{ color: var(--active);} 

* { box-sizing: border-box; }
button:focus, input:focus {outline:0;}
.clearfix { clear:both; }

.pixelize {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

hr {
	border-color:#acacac;
	max-width:98%;
}

html {
	margin:0px;
	padding:0px;
}

body{
	xfont-family:Arial;
	xbackground-color:#1d6349; /*grey 282828, green 1d6349  262a2e */
    background-color: #000912;
	background-color: #07222a;
	xbackground-color: #000000;
	xbackground-image:url('https://chazu.arkku.net/files/img/cross.png');
	font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
	color:#8e8e8e;
	xwidth:100vw;
	padding:0px;
	margin:0px;
	overflow-x:hidden;
	xoverflow-y:hidden;
	xfont-size:1.2em;
	display: flex;
  	flex-direction: column;
  	min-height: 100vh;
}




#content {
	xborder: 1px solid #00a2d2;
	xmin-height: 90vh;
	text-align: center;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);	
	xmax-width: 1200px;
	width: 97%;
	margin: 50px auto auto auto;
	padding: 5px;
	border-radius: 5px;

	display:flex;
	flex-direction:row;
    justify-content: center;
    align-items:center;
	flex: 1;
}


.section {
  /* == settings from scifi button == */
  --font-family: 'WhiteRabbit';
  --font-size: 1em;
  --color:  white ;
  --hover-color: cyan;
  --background-color:  rgba(0, 0, 0, 0.9);
  --border-color: #00AFB9;
  --border-width: 1px;
  --border-cut:  10px;
  --button-shape: polygon(0 var(--border-cut), var(--border-cut) 0, calc(50% - var(--border-cut) - 10px) 0%, calc(calc(50% - var(--border-cut) - 10px) + var(--border-cut)) var(--border-cut), calc(calc(50% - var(--border-cut) - 10px) + var(--border-cut) + 20px) var(--border-cut), calc(calc(50% - var(--border-cut) - 10px) + var(--border-cut) + 20px + var(--border-cut)) 0, calc(100% - var(--border-cut)) 0, 100% var(--border-cut), 100% calc(50% - var(--border-cut) - 5px), 100% calc(100% - var(--border-cut)), calc(100% - var(--border-cut)) 100%, calc(calc(50% - var(--border-cut) - 10px) + var(--border-cut) + 20px + var(--border-cut)) 100%, calc(calc(50% - var(--border-cut) - 10px) + var(--border-cut) + 20px) calc(100% - var(--border-cut)), calc(calc(50% - var(--border-cut) - 10px) + var(--border-cut)) calc(100% - var(--border-cut)), calc(calc(50% - var(--border-cut) - 10px)) 100%, var(--border-cut) 100%, 0 calc(100% - var(--border-cut)));
}

.section {
	border: 1px solid #00a2d2;
	border-radius: 5px;
	width: 80%;
	display:inline-block;
	margin: auto 10px 20px 10px;
	background: #003c4e;
	font-size: 1em;
	xfont-family: var(--font-family);
	font-size: var(--font-size);
	color: var(--color) !important;
	border: 0;
	xdisplay: inline-flex;
	align-items: center;
	justify-content: start;
	justify-self: center;
	align-self: center;
	vertical-align: middle;
	flex-direction: column;
	appearance: none;
	box-sizing: border-box;
	xtext-decoration: none;
	position: relative;
	xword-spacing: 3px;
	xletter-spacing: 0.4px;
	xcursor: pointer;
	xtransition: all 0.3s;
	line-height: initial;
	min-height: 500px;
	min-width: 70px;
	xwhite-space: nowrap;
	z-index: 1;
	user-select: none;
	outline: 0;
	padding: 20px 0px;
	background-color: transparent;
}

.section:before,
.section:after {
  content: '';
  inset: 0;
  background: var(--border-color);
  position: absolute;
  z-index: -1;
  clip-path: var(--button-shape);
  box-shadow: inset 0 0 25px -10px var(--border-color);
}

.section:after{
  inset: var(--border-width);
  background: var(--background-color);
}

.section helper-1{
  content: '';
  position: absolute;
  inset: calc(var(--border-cut) /2);
  background: var(--border-color);
  z-index: -2;
}


.section > .title {
	text-align: left;
	font-size: 18px;
	padding-left: 55px;
	margin-bottom: 5px;	
	font-family: 'WhiteRabbit';
	color: cyan;
	align-self: baseline;
}

.section > .content {
	text-align: left;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;

}

.section > .content > .item {
	border-top: 1px solid cyan;
	display:flex;
	padding: 5px 30px 10px 30px;
	xfont-family:consolas, monospace;
	xfont-family: 'WhiteRabbit';
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	width: calc(100% - 2px) !important;
}

.section > .content > .item:last-child  {   
  border-bottom: 1px solid cyan;
}

.section > .content > .item:hover {
	xbackground:rgba(100, 255, 255, 0.1);
}

.section > .content > .item > .info {
	display: flex;
	flex-direction: column;
}

.section > .content > .item > .info > .date {
	font-family:consolas, monospace;
	color: rgb(0, 180, 180);
}

.section > .content > .item > .info > .title {
	color: cyan;
	font-family: 'WhiteRabbit';
	font-family:consolas, monospace;
}

.section > .content > .item > .content {

}

.section.timeline.item-content-hidden > .content > .item > .content {
	display: none;
}

.section.timeline.one-line-item-title > .content > .item > .title,
.section.timeline.one-line-item-title > .content > .item > .date {
	display: inline-block;
}

.section.one-line-item-title > .content > .item > .info {
	flex-direction: row;
}

.section.one-line-item-title > .content > .item > .info > .date {
	margin-right: 20px;
	min-width: 100px;
	text-align: right;
}