:root {
	--boss-size : 50vh;
	--boss-inner: calc(var(--boss-size)*.9);
}
@import url('https://fonts.googleapis.com/css?family=Raleway:200,300,400,400i,500,600,900');
/*
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  src: local('Raleway Italic'), local('Raleway-Italic'), url(../fonts/raleway/Raleway400i.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 200;
  src: local('Raleway ExtraLight'), local('Raleway-ExtraLight'), url(../fonts/raleway/Raleway200.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: local('Raleway Light'), local('Raleway-Light'), url(../fonts/raleway/Raleway200.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(../fonts/raleway/Raleway400.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: local('Raleway Medium'), local('Raleway-Medium'), url(../fonts/raleway/Raleway500.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url(../fonts/raleway/Raleway600.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 900;
  src: local('Raleway Black'), local('Raleway-Black'), url(../fonts/raleway/Raleway900.ttf) format('truetype');
}
 */
@font-face {
	font-family: "CustomBL";
	src        : url("../fonts/custom-bitlattice/Bitlattice-Medium.ttf");
}

.BL {
	font-family: "CustomBL";
}

a.twitter::before {
	content         : "";
	width           : 1em;
	height          : 1em;
	display         : inline-block;
	background-image: url("../images/tlogo.svg");
	margin-bottom   : -4px;
	margin-right    : 0.2em;
}
/* HEADER */
#topheader {
	position        : fixed;
	height          : 3rem;
	background-color: #eee;
	box-shadow      : inset 0 -17px 18px -20px #bbb;
	align-items     : center;
	display         : flex;
	justify-content : space-between;
	background      : #eee;
	color           : rgba(30, 30, 30, 0.5);
	cursor          : default;
	left            : 0;
	line-height     : 3.25rem;
	position        : fixed;
	top             : 0;
	width           : 100%;
	z-index         : 10001;
}

#topheader nav {
	width          : 100%;
	display        : flex;
	justify-content: flex-end;
}

#logo {
	position: absolute;
	z-index : 10001;
	opacity : 1;
	left    : -.2rem;
}

#topheader a {
	padding        : 0 2em;
	color          : rgba(30, 30, 30, 0.5);
	text-decoration: none;
}

#logo a {
	padding  : 0;
	font-size: 2rem;
	color    : #ccc;
}
/* BOSS */
#boss {
	margin-top     : 3rem;
	width          : 100%;
	height         : var(--boss-size);
	/* background-color: teal; */
	min-height     : var(--boss-size);
	position       : relative;
	display        : flex;
	align-items    : center;
	justify-content: center;
	box-shadow     : 0 -17px 18px 20px #bbb;
	margin-bottom  : 1rem;
}

#boss .ovl {
	position: absolute;
	width   : 100%;
	height  : 100%;
	z-index : 1000;
	/* background-image: linear-gradient(to right, rgba(255, 255, 255, 0.4) 0%,rgba(255, 255, 255, 0.4) 25%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.4) 75%, rgba(255, 255, 255, 0.4) 100%); */
}

#widelogo {
	position       : absolute;
	width          : 100%;
	overflow       : hidden;
	height         : var(--boss-size);
	display        : flex;
	align-items    : center;
	justify-content: center;
}

#widelogo > svg {
	position  : absolute;
	height    : var(--boss-size);
	min-height: var(--boss-size);
}

#animbox {
	transform      : rotate3d(0,0,1,180deg);
	position       : absolute;
	width          : var(--boss-size);
	height         : var(--boss-size);
	display        : flex;
	align-items    : center;
	justify-content: center;
}

#bossbase > svg {
	position: absolute;
	width   : var(--boss-inner);
	height  : var(--boss-inner);
}
@keyframes initpathanim {
	0% {
		stroke-dashoffset: 210.06;
		stroke-dasharray : 420.120 420.120;
	}

	50% {
		stroke-dashoffset: 260.06;
		stroke-dasharray : 520.120 320.120;
	}

	100% {
		stroke-dashoffset: 210.06;
		stroke-dasharray : 420.120 420.120;
	}
}
@keyframes pathanim {
	0% {
		stroke-dashoffset: 210.06;
		stroke-dasharray : 420.120 420.120;
	}

	50% {
		stroke-dashoffset: 235.06;
		stroke-dasharray : 470.120 370.120;
	}

	100% {
		stroke-dashoffset: 210.06;
		stroke-dasharray : 420.120 420.120;
	}
}

#bossbase > svg > path {
	stroke-dasharray         : 420.120 420.120;
	stroke-dashoffset        : 210.06;
	stroke-width             : 9;
	stroke                   : rgba(139,139,139,.3);
	animation-name           : initpathanim, pathanim;
	animation-duration       : 500ms, 5000ms;
	animation-delay          : 0ms, 500ms;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-iteration-count: 1, infinite;
}
@keyframes bossrot {
	0% {
		transform: rotate3d(0,0,0,0);
	}

	50% {
		transform: rotate3d(0,0,1,360deg);
	}

	100% {
		transform: rotate3d(0,0,0,0);
	}
}

#bossbase {
	width                    : var(--boss-inner);
	height                   : var(--boss-inner);
	animation-name           : bossrot, bossrot;
	animation-duration       : 1500ms, 9000ms;
	animation-delay          : 0ms, 1500ms;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-iteration-count: 1, infinite;
}
/* MESSAGE */
#message {
	position        : absolute;
	height: 4rem;
	background-color: #63a9de;
	border-radius   : 1.5rem;
	padding         : 0.3rem 1.5rem;
	display         : flex;
	align-items     : center;
	justify-content : center;
	flex-direction  : column;
	bottom          : -1.5rem;
	z-index         : 10000;
}

#message p {
	margin: 0;
	color : aliceblue;
}

#message a {
	color: aliceblue;
}
/* QUOTES */
.quotes {
	display        : flex;
	align-items    : center;
	justify-content: center;
	flex-flow      : nowrap;
}

.quotes blockquote {
	position   : relative;
	flex-grow  : 1;
	flex-basis : 0;
	flex-shrink: 0;
	align-self : end;
	/* justify-items: flex-start; */
	/* height: 100%; */
	margin     : 2em;
	border     : none;
}

.quotes blockquote::after,
.quotes blockquote::before {
	content          : "";
	width            : 1em;
	height           : 1em;
	display          : block;
	background-size  : contain;
	background-repeat: no-repeat;
	font-size        : 4em;
	position         : absolute;
}

.quotes blockquote::before {
	background-image: url("../images/quoteup.svg");
	left            : 0;
	top             : 0;
	opacity         : 0.1;
}

.quotes blockquote::after {
	background-image: url("../images/quotedngreen.svg");
	right           : 0;
	bottom          : 0;
	opacity         : 0.7;
	z-index         : -1;
}
/* FOOTER */
footer {
	min-height      : 12rem;
	width           : 100%;
	display         : flex;
	background-color: #555;
	align-items     : center;
	justify-content : center;
	flex-flow       : nowrap;
	padding         : 0 13%;
}

footer section {
	padding    : 1rem 0 1rem 1rem;
	flex-grow  : 1;
	flex-basis : 0;
	flex-shrink: 0;
	align-self : end;
	position   : relative;
}

footer section h3 {
	color: #eee;
}

footer section a {
	color          : #eee;
	font-size      : 1.4rem;
	font-family    : monospace;
	text-decoration: none;
}

footer section::before {
	content         : "";
	display         : block;
	position        : absolute;
	height          : 80%;
	width           : 2px;
	left            : 0;
	background-color: #888;
}