* {
	box-sizing: border-box;
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	letter-spacing: -0.06em;
	font-weight: normal;
}
.chapter {
	position: relative;
	display: block;
	float: left;
	height: auto;
	width: 100%;
}
.frame {
	position: relative;
	display: block;
	float: left;
	clear: both;
	width: 100%;
	height: 100vh;
	padding: 30px;
	box-sizing: border-box;
}

p, body {
	font-size: 1.5vw;
}
h1, .character {
	font-size: 6.5vw;
}
h2 {
	font-size: 4.5vw;
}
h3 {
	font-size: 3vw;
}
h1, h2, h3 {
	text-align: center;
}

.overview {
	width: 100%;
	text-align: center;
}
.center {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.fullscreen {
	padding: 0;
	overflow: hidden;
}
.fill {
	overflow: hidden;
}
.character {
	position: fixed;
	bottom: 30px;
	left: 30px; 
	color: gray;
}
.caption {
	color: gray;
	position: absolute;
	bottom: 30px;
	text-align: center;
	z-index: 999;
	width: 100%;
	left: 0;
}
.caption.red {
	color: red;
}

iframe {
	width: 100vw;
	height: 100vh;	
}
video {
	position: relative;
    width: 100%;
    height: 100vh;
    background: rgb(125, 0, 255);
}

.framed img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
.fullscreen video {
	min-width: 100%;
	width: auto;
	height: 100vh;
}
.fill video {
	min-width: 200vw;
	min-height: 200vh;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
}
.fullscreen img {
	width: 100%;
	height: auto;
	position: relative;
	display: block;
}


.blue {
	background-color: blue;
	color: red;
}
.purple {
	background-color: rgb(125, 0, 255);
	color: lightgray;
}
.black, .black video {
	background: black ;
}
.white, .white video {
	background: white ;
}
.green {
	background-color: rgb(0, 255, 0);
	color: #333;
}

.blue a {
	color: red;
}

/* Type */
@font-face {
	font-family: "koosvera";
    src: url("../fonts/dumplingGX.ttf");

}

#type-experiment * {
	font-family: "Arial";
	font-family: "koosvera";
	margin: 0;
	padding: 0;
}


#type-experiment p {
	font-size: 10vw;
	width: 100%;
	display: block;
	/*background-color: red;*/
	display: block;
	line-height: 0.8;
	letter-spacing: 0px;
	height: auto;
	
	color: white;
	text-align: center;
}

#type-experiment p .char {
	line-height: 0.8;

}
.hidden *  {
	visibility: hidden;
}
.hidden video {
	display: none;
}