@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/PretendardVariable.woff2') format('woff2-variations');
}

@font-face {
	font-family: 'Monument Grotesk';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/EduMonumentGrotesk-Regular.otf') format('opentype');
}

@font-face {
	font-family: 'Monument Grotesk Mono';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/EduMonumentGroteskMono-Regular.otf') format('opentype');
}

@font-face {
	font-family: 'Stencil';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('./fonts/stencildisplayopti.otf') format('opentype');
}



* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: black;
	perspective: 30vw;
	overflow:  hidden;
	cursor: none;
	user-select: none;
}


canvas {
	pointer-events: none;
	display: block;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 0;
	width: 100vw !important;
	height: 100vh !important;
	position: absolute;
	opacity: 0.2;
	display: none;
}


body.inactive * {
	/*transition: all 3s;*/
	/*border:  1px solid white !important;*/
	/*80FF00*/
	transition: all 0.5s;
	filter:  blur(0px) !important;
	/*background: linear-gradient(180deg, black, #6100FF, black, #6100FF, black) !important;*/
}

.inactive-0 {
	background: #80FF00;
	color: black;
}
.inactive-1 {
	background: pink;
	color: black;

}
.inactive-2 {
	background: #6100FF;
	color: black;
}
.inactive-3 {
	background: transparent;
	color: #6100FF;
	outline: 1px solid #6100FF;
}
.inactive-4 {
	background: transparent;
	color: #80FF00;
	outline: 1px solid #80FF00;
}
.inactive-5 {
	background: gray;
	color: gray;
	-webkit-text-stroke: 1px black;
}
.inactive-6 {
	background: lightgray;
	-webkit-text-stroke: 1px black;
}
.inactive-7 {
	background: linear-gradient(180deg, black, #6100FF, black, #6100FF, black);
}
.inactive-8 {
	background: linear-gradient(180deg, black, #80FF00, black, #80FF00, black);
}
.inactive-9 {
	background: linear-gradient(180deg, black, #bbb, black );
}
.inactive-10 {
	background: linear-gradient(180deg, #bbb, black,#bbb, );
}



#sequence {
	position: absolute;
	z-index: 999;
	font-size: 20;
	font-family: 'Monument Grotesk Mono', monospace;
}

/*Fields */

.fields {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.field {
	position: relative;
	display: block;
	float: left;
	overflow-x: hidden;
	letter-spacing: -0.01rem ;
	line-height: 1.4;
	clear: none;
	height: 100vh;
	white-space: preline;
	overflow-y: hidden;
	word-break: break-word;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-content: stretch;
	align-items: flex-end;
	color: #bbb;
	font-size: 0.7vw;
	background-color: #000;
	color: #bbb;
	counter-reset: section; 
	transition: width 3s;
	border-left: 1px solid #555; 
}

.field:nth-of-type(3) {
	border-right: 1px  solid  #555 !important; 
}

.field * {
	transition: color 1s, background-color 1s, border-color 1s;
}

.field:after {
	bottom: 0;
	background: linear-gradient(0deg, #000, #0000);
	top: auto;
}


.current-field {
	width: 50vw;
	padding: 1vw 0px calc(1.5vw * 2.8) 0px;
	font-size: 2.1vw;
}

.field:not(.current-field) {
	width: 25vw;
	padding: 1vw 0px calc(1.5vw * 2.8) 0px;
	font-size: 1.5vw;
	font-family: 'Arial', sans-serif;
	font-weight: 400;
	letter-spacing: -0.01rem;
	line-height: 1.4;
	justify-content: flex-end;
	flex-wrap: nowrap;
}

.field:not(.current-field) span {
	display: inline;
}
.field:not(.current-field) span:after {
	content:  " ";
	border: 1px solid black;
	margin-right: -1px;
	background-color: black;
}

.field:before {
	line-height: calc(2.1vw * 1.4);
	position: absolute;
	bottom: 0;
	color: #555;
	font-size: 0.7vw;
	border-top: 1px solid #555;
	width: 100%;
	font-family: 'Monument Grotesk Mono' !important;
}

.korean:before {
	content: "\00a0" 'KR TRANSLATION';
}

.english:before {
	content: "\00a0" 'EN    TRANSLATION';
}

.dutch:before {
	content: "\00a0" 'NL    TRANSLATION';
}

.korean.current-field:before {
	content: "\00a0" '이상';
	line-height: calc(2.1vw * 1.4);
	position: absolute;
	bottom: 0;
	color: #555;
	font-size: 0.7vw;
	border-top: 1px solid #555;
	width: 100%;
	z-index: 555;

	font-family: 'Monument Grotesk Mono' !important;
}

.dutch.current-field:before {
	content: "\00a0"  'PAUL VAN OSTAIJEN';
	/*line-height: calc(2.1vw * 1.4);*/
	position: absolute;
	font-size: 0.7vw;
	color: #555;
	font-family: 'Monument Grotesk Mono' !important;
	bottom: 0;
	z-index: 555;
}

.english {
	font-family: "Monument Grotesk";
}

.dutch {
	font-family: "Monument Grotesk";

}

.korean {
	font-family: 'Pretendard Variable';
}


/*—————————*/
/* Lines  */
/*—————————*/

.line {
	position: relative;
	float: left;
	clear: both;
	display: block;
	line-height: 1.4;
	/*border-bottom: 1px solid #555;*/
	padding: 0 10px;
	font-family: 'Monument Grotesk', sans-serif;

}

.line:first-of-type {
	/*border-top: 1px solid #555;*/
}


.current-field .line:before {
	font-size: 0.7vw;
}

.container {
	width: 100%;
	height: auto;
	position: relative;
	display: block;
}

.line.current {
	width: 100%;
}

.line:not(.current) {
	width: 100%;
}

span {
	transition: blur 0.25s;
}


span[type="0"] {
	filter:  blur( 0em );

}
span[type="1"] {
	filter:  blur( calc(var(--blur)/10 * 1em) );
}
span[type="2"] {
	filter:  blur( calc(var(--blur)/10*2 * 1em) );

}
span[type="3"] {
	filter: blur( calc(var(--blur)/10*3 * 1em) );

}
span[type="4"] {
	filter: blur( calc(var(--blur)/10*4 * 1em) );

}
span[type="5"] {
	filter: blur( calc(var(--blur)/10*5 * 1em) );

}
span[type="6"] {
	filter: blur( calc(var(--blur)/10*6 * 1em) );

}
span[type="7"] {
	filter: blur( calc(var(--blur)/10*7 * 1em) );

}
span[type="8"] {
	filter: blur( calc(var(--blur)/10*8 * 1em) );

}
span[type="9"] {
	filter: blur( calc(var(--blur)/10*9 * 1em) );

}
span[type="10"] {
	filter: blur( calc(var(--blur)/10*10 * 1em) );

}


.line.current span:last-of-type {
/*	color: #bbb;
	background-color: #bbb;
	border:  0.1px solid transparent;*/
}

.line span {
	/*border:  0.1px solid transparent;*/
}

/*————————————*/
/*Transformations*/
/*————————————*/

.bubble {
	counter-reset: bubble;
}

.bubble > * {
	/*display: inline-block;*/
	/*float: left;*/
}
.oval-half-upper span, .oval-half-lower span {
	display: inline-block;
	width: 1vw;
	height: 1vw;
}
.oval-full-upper span, .oval-almost-half-upper span,  .oval-almost-half-inner span  {
	transform-origin: 50% 50%;
	width: auto;
	position: absolute;
	height: auto;
	display: inline-block;
}
.vertical {
	display: flex;
	flex-direction: column;
	width: 20% !important;
	height:  0;
}

.rotate-little  {
	width: auto !important;
	transform: rotate(-12deg);
}

.justified {
	text-align: justify;
}
.justified:after {
	content: '';
	display: inline-block;
	width: 100%;
}
.line.right {
	text-align: right;
	float:  right;
}
.line.center {
	text-align: center;
	margin: 0 auto;
	float: none;
}
.line.left {
	text-align: left;
	float: left;
}

/*————————————*/
/* Typefaces  */
/*————————————*/

.lineheight-6 {
	line-height: 8.4;
}

.lineheight-3 {
	line-height: 4.2;
}

.lineheight-2 {
	line-height: 2.9;
}

.lineheight-1 {
	line-height: 0.8;
}
.lineheight-1-5 {
	line-height: 1.4;
}

.lineheight--1 {
	/*line-height: -1;*/
	line-height: 1;
	display: block;
	position: relative;
	width: auto !important;
	float: left;
	background: red;
	clear: none;
	padding: 0 0.3em 0 0;
}

.lineheight-0-5 {
	line-height: 0.5;
}

/*————————————*/
/*Type sizes*/
/*————————————*/

.typesize-xxs {
	font-size: 0.5vw;
}
.typesize-xs {
	font-size: 1vw;
}
.typesize-s {
	font-size: 1.5vw;
}
.typesize-s-m {
	font-size: 2vw;
}
.typesize-m {
	font-size: 2.5vw;
}
.typesize-m-l {
	font-size: 3vw;
}
.typesize-l {
	font-size: 3.5vw;
}
.typesize-l-xl {
	font-size: 4vw;
}
.typesize-xl {
	font-size: 4.5vw;
}
.typesize-full-width {
	font-size: 10vw;
}


.thin {
	font-family: "Arial Narrow";
	/*text-transform: uppercase;*/
	font-weight: 100;
}

.impact	{
	font-family: 'Impact';
}

.monospace {
	font-family: 'Monument Grotesk Mono', monospace;
}
.stencil {
	font-family: 'Stencil';
}
.serif  {
	font-family: 'Times New Roman', serif;
}
.serif-italic  {
	font-family: 'Times New Roman', serif;
	font-style: italic ;
}
.sans {
	font-family: 'Arial Bold', sans-serif;
}