/* F O N T S  
___________________________________________________*/


@font-face {
	font-family: Pantasia;
	src:
		url('../fonts/PantasiaNovusBeta6-RegularWeb.woff2') format('woff2'),
		url('../fonts/PantasiaNovusBeta6-RegularWeb.woff') format('woff'),
		url('../fonts/PantasiaNovusBeta6-RegularWeb.ttf') format('truetype');
	font-weight: normal;
	}
@font-face {
	font-family: Superachachi;
	src:
		url('../fonts/Superachachi-Medium.woff2') format('woff2'),
		url('../fonts/Superachachi-Medium.woff') format('woff');
	font-weight: normal;
	}
@font-face {
	font-family: Superachachi;
	src:
		url('../fonts/Superachachi-MediumItalic.woff2') format('woff2'),
		url('../fonts/Superachachi-MediumItalic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	}

html, body {
	font-family: 'Superachachi', sans-serif;
	font-size: 14pt;
	margin: 15px;
	margin-left: 12px;
	background: #000;
	color: #fff;
	}

a:link, a:visited {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	}
a:hover{
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	}

header {
	padding-left: 0.2rem;
	z-index: 100;
	position: relative;
	margin-bottom: 1em;
	}
.header_logo img {
	-webkit-animation:spin 10s linear infinite;
	-moz-animation:spin 10s linear infinite;
	animation:spin 10s linear infinite;
	width: 100%;
	}
.header_logo {
	width: 2rem;
	height: 2rem;
	position: relative;
	mix-blend-mode: difference;
	padding-left: 0;
	margin-bottom: .5em;
	z-index: 100;
	position: relative;
	}
@-moz-keyframes spin { 
	100% { -moz-transform: rotate(360deg); } 
	}
@-webkit-keyframes spin { 
	100% { -webkit-transform: rotate(360deg); } 
	}
@keyframes spin { 
	100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
	}




main {
	line-height: 1.2em;
	}
.text, .worklinks {
	padding: 0;
	margin-right: 0;
	margin-top: 0;
	display: inline-block;
	z-index: 100;
	position: relative;
	margin-bottom: .5em;
	}
.works {
	display: inline-block;
	}
.work {
	display: block;
	position: relative;
	opacity: 1;
	margin-bottom: .5em;
	}
a.worklink {
	background: transparent;
	color: #fff;
	text-decoration: none;
	transition: color 0.2s;
	display: inline-block;
	position: relative;
	padding: 0rem;
	margin-right: 0rem;
	margin-top: 0rem;
	background: transparent;
	border-radius: 0;
	border: none;
	z-index: 100;
	position: relative;
	}
a.worklink .link {
	border-bottom: 1px solid currentColor;
	line-height: 1.15;
	display: inline;
	}
.bgimage {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1;
	background-size: cover;
	background-position: center;
	transition: opacity 0.2s;
	opacity: 0;

	}
.linkinfo {
	z-index: 999;
	font-size: 10pt;
	background: none;
	font-family: 'Pantasia';
	line-height: 1.2em;
	border-radius: 0;
	padding: 0;
	position: relative;
	display: block;
	margin-top: .5em;
	}

.comma {
	display: none;
	}

@media screen and (min-width: 1000px) { 
	html, body {
		font-size: 2.2vw;
		margin: 2.4vw;
		letter-spacing: 0.01em;
		min-height: calc(100vh - 10vw);
		}
	a:link, a:visited {
		color: #fff;
		text-decoration: none;
		border-bottom: 2px solid currentColor;
		}
	a:hover{
		color: #fff;
		text-decoration: none;
		border-bottom: 2px solid transparent;
		}
	header {
		padding-left: 0.2rem;
		z-index: 100;
		position: relative;
		margin-bottom: 0.1em;
		}
	.header_logo img {
		-webkit-animation:spin 10s linear infinite;
		-moz-animation:spin 10s linear infinite;
		animation:spin 10s linear infinite;
		width: 100%;
		}
	.header_logo {
		width: 1rem;
		height: 1rem;
		position: relative;
		mix-blend-mode: difference;
		padding-left: 0.2rem;
		z-index: 100;
		position: relative;
		}
	main {
		line-height: 1.2em;
		}
	.text {
		padding: 0.2rem;
		margin-right: -0.2rem;
		margin-top: -0.2rem;
		display: inline;
		z-index: 100;
		position: relative;
		}
	.works {
		display: inline-block;
		}
	.work {
		display: inline-block;
		position: relative;
		opacity: 1;
		margin-bottom: 0;
		}
	.comma {
		display: inline;
		position: relative;
		z-index: 100;
	}
	a.worklink {
		background: transparent;
		color: #fff;
		text-decoration: none;
		transition: color 0.2s;
		display: inline-block;
		position: relative;
		padding: 0.2rem;
		margin-right: -0.2rem;
		margin-top: -0.2rem;
		background: transparent;
		border-radius: 10px;
		border: none;
		z-index: 100;
		position: relative;
		}
	a.worklink .link {
		border-bottom: 2px solid currentColor;
		border: none;
		line-height: 1.15;
		display: inline-block;
		text-decoration: underline;
		text-decoration-thickness:  2px;
		text-underline-offset: 0.12em;
		}
	.bgimage {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1;
		background-size: cover;
		background-position: center;
		transition: opacity 0.2s;
		opacity: 0;

		}
	.linkinfo {
		z-index: 999;
		font-size: 10pt;
		background: red;
		font-family: 'Pantasia';
		line-height: 1.2em;
		border-radius: 10px;
		padding: 0.2rem;
		position: fixed;
		top: 100vw;
		transition: top 0.2s;
		width: calc(100% - 0.4rem);
		min-width: 5rem;
		}
	a.worklink:hover {
		z-index: 999;
		background: #000;
		cursor: pointer;
		}
	a.worklink:hover .link {
		border-bottom: 2px solid transparent;
		border-bottom: none;
		text-decoration: none;
		}
	a.worklink:hover + .bgimage {
		transition: opacity 0.2s;
		opacity: 1;
		z-index: 99;
		}
	a.worklink:hover .linkinfo {
		display: inline-block;
		position: absolute;
		z-index: 9999;
		transition: top 0.4s;
		top: 110%;
		left: 0;
		right: 0;
		}
	.worklinks {
		padding-left: 0.2rem;
		}

	}