@font-face {
	font-family: 'Anthony';
	src: url('../fonts/Anthony.woff') format('woff'),
		url('../fonts/Anthony.woff2') format('woff2'),
		url('../fonts/Anthony.eot') format('eot');
}

@font-face {
	font-family: 'Suisse Mono';
	src: url('../fonts/SuisseIntlMono-Regular.otf') format('opentype'),
		 url('../fonts/suisseintlmono-regular-webfont.woff') format('woff'),
		 url('../fonts/suisseintlmono-regular-webfont.woff2') format('woff2');
}

:root {
	--slant: 100;
	--circle: 0;
	--highlight: rgba(125, 0, 255, 0.99);
	--bg: #ddd;
	--fg: #555;
	--padding: 15px;

}

* {
	margin: 0;
	padding: 0;
	font-family: 'Suisse Mono', sans-serif;
	font-size: 18px;
	box-sizing: border-box;
}
body {
	overflow-x: hidden;
}
h1, h2, h3 {
	font-weight: normal;
	color: var(--highlight);
	transition: all 0.5s;
}
h3 {
	margin-left: 0;
	text-transform: uppercase;
}
#header {
	position: relative;
	display: block;
	float: left;
	width: 100%;
	/*padding: calc(15px * 1.3);*/
	/*padding-bottom: 2vw;
	transition: all 0.1s ease;
	font-family: 'Anthony';
	font-size: 15vw;
	line-height: 0.8;
	overflow: hidden;
	user-select: none;
	overflow: hidden;
	width: 100%;
	font-variation-settings: 'slnt' var(--slant), 'wdth' -70, 'shpe' calc(var(--circle)), 'ntch' calc(100 - var(--circle));
*/
	color: var(--highlight);
	padding: var(--padding);
}


svg {
	overflow: visible;
}

path {
	fill: var(--highlight);
	transform-origin: 50% 50%;
	transition: all	0.2s;
	cursor: pointer;
}
path:hover {
	animation-play-state: paused !important;
}
path:nth-of-type(3n):hover {
	animation-play-state: paused;
	transform: rotate(90deg);
}
path:nth-of-type(3n+1):hover {
	animation-play-state: paused;
	transform: rotate(-90deg);
}
path:nth-of-type(3n+2):hover {
	animation-play-state: paused;
	transform: rotate(-120deg);
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	80% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
	
}

body { 
	background-color: var(--bg);
	color:var(--fg);
	line-height: 1.3;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	padding-bottom: var(--padding);
 }

p {
	max-width: 800px;
}
 .block {
 	position: relative;
 	display: block;
 	float: left;
 	width: 100%;
 	height: auto;
 	padding: 0 var(--padding);
	clear: both;
 }

 .visible {
 	display: block;
 }

 .left {
 	position: relative;
 	display: block;
 	float: left;
 	height: 100%;
 	margin-right: 20px;
 	width: calc(50% - 20px);
 	margin-bottom: 20px;
 }
 .right {
 	position: relative;
 	display: block;
 	float: left;
 	height: 100%;
 	margin-left: 20px;
 	width: calc(50% - 20px);
 }
 .column {
 	position: relative;
 	display: block;
 	float: left;
 	height: 100%;
 	width: 100%;
 	-webkit-column-count: 2;
 	    -moz-column-count: 2;
 	         column-count: 2;
 	-webkit-column-gap: 40px;
 	   -moz-column-gap: 40px;
 	        column-gap: 40px;
 }
 .flex-row {
 	width: 100%;
 	position: relative;
 	display: flex;
 	float: left;
 	clear: both;
 	align-items: baseline;
 	justify-content: space-between;
/* 	text-transform: uppercase;*/
 	padding: 3px 0 0 0;
 	/*background-color: var(--highlight);
 	color: var(--bg);*/
 }
 .column-block {
 	position: relative;
 	display: block;
 	height: 100%;
 	float: left;
 	break-inside: avoid;
 	padding-bottom: var(--padding);
 }
 .content {
 	position: relative;
 	display: block;
 	float: left;
 	padding-top: calc(15px * 1.3);
 	display: none;
 }

@media (max-width: 1000px) {
	.left, .right {
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}
	.column {
		-webkit-column-count: 1;
		    -moz-column-count: 1;
		         column-count: 1;
	}
}

 h1, h2 {
 	font-weight: normal;
 	text-transform: uppercase;
 	clear: both;
 }
 h1 {
 	/*border-bottom: 1px solid rgb(166, 133, 255);*/
	border-top: 1px solid var(--fg);
	font-size: 24px;
	padding: 3px 0;
 }
 .title {
 	text-transform: uppercase;
 	font-size: 24px;
 	line-height: 1.3;
 	color:  var(--highlight);
 	/*line-height: 1;*/
 }
 .title div {
 	font-size: 24px;
 	line-height: 0.9;
 }
 h1.last {
 	border-bottom: 1px var(--fg);
 }
 h2 {
 	position: relative;
 	display: block;
 	float: left;
 	clear: both;
 	font-size: 24px;
 	color: var(--highlight);
 	width: 100%;
 }


  p, table, ul, ol, h3 { 
 	/*font-size: 25px;*/
  }

  ul, ol, table, p {
  	display: block;
  	width: 100%;
  	float: left;
  	position: relative;
  	clear: both;
 	margin-bottom: var(--padding);
 }
 p {
 	position: relative;
 	float: left;
 	display: block;
 	clear: both;
 	width: 100%;
 }

 a {
	color: var(--highlight);
	text-decoration: none;
	font-weight: 300;
	transition: all 0.25s;

/*	border-bottom: 1px solid var(--fg);*/
 }
 p a:hover::after,
 ul a:hover::after {
 	content: "☞";
 }	

 img {
 	mix-blend-mode: multiply;
 }
 
 .row {
 	position: relative;
 	width: 100%;
 	float: left;
 	border-bottom: 1px solid var(--fg);
 	padding: 3px 0;
 }

  .row:first-of-type {
 	border-top: 1px solid var(--fg);
 }
 .tab {
 	position: relative;
 	width: 150px;
 	display: block;
 	float: left;
 	height: 100%;
 	/*background-color: red;*/
 }
 .desc {
 	position: relative;
 	width: calc(100% - 150px);
 	display: block;
 	float: left;
 	height: 100%;
 	/*background-color: red;*/
 }
 .half {
 	position: relative;
 	width: 50%;
 	display: block;
 	float: left;
 	height: 100%;
 }
 *::selection {
 	background-color: var(--highlight);
 	color: var(--bg);
 }
  
 ul {
 	display: block;
 	position: relative;
 	float: left;
 	clear: both;
 	list-style-type: "☞ ";

 	padding-left: 0;
 	float: left;
 }
 ul li, ol li {
 	margin-left: 1em;
 	margin-right: -1em;

 }
 a.reveal {
 	width: 100%;
 	height: 100%;
 	display: block;
 	position: relative;
 	float: left;
 	border-bottom: none;
 	transition: all 0.25s;
 	color: var(--highlight);
 }

 .element {
 	position: relative;
 	display: block;
 	float: left;
 	page-break-inside: avoid;
 }

.green {
	background-color: var(--highlight);
	color: var(--bg);
}

.blue {
	background-color: var(--fg);
	color: var(--bg);

}
.footer {
	background-color: var(--bg);
	position: fixed;
	bottom: 0px;
	padding-left: 5px;
	left: 0px;
	padding-bottom: 5px;
}
 /*, 
 a.reveal:active,
 a.reveal:focus 
*/
 a.reveal:hover {
 	background-color: var(--highlight);
 	color: var(--bg);

 }
 a.reveal:hover h1 {
 	color: var(--bg);
 }