.container {
	position: fixed;
	width: 100vw;
	height: 100vh;
}

.door {
	position: fixed;
	border: 0;

	z-index: 100;
}

iframe {
	/*position: fixed;*/
	margin: -0.5rem;
	border: 0;
}

iframe.root {
	position: fixed;
}

iframe:not(.root) {
	width: 14vw;
	height: 14vw;
	border-radius: 25vw;
}

iframe:not(.root):hover {
	width: 20vw;
	height: 20vw;
	border-radius: 25vw;
}

.key-in {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	cursor: zoom-in;	
}

.specimen {
	mix-blend-mode: normal;
	z-index: -1000;

	padding: 0;
}

@media only screen and (max-width: 600px) {
	.specimen {
		padding-bottom: 0;
	}
}

.specimen-frame.root {
	width: 100vw;
	height: 100vh;
}

.letter {
	mix-blend-mode: normal;
	background-color: rgba(0,0,0,0);
}

.dot {
	mix-blend-mode: normal;
	border: none;
}






.header {
	position: fixed;
	top: 0;
	left: 0;
	width: calc(100vw - 2rem);
	height: fit-content;
	padding: 1rem;

	display: flex;
	justify-content: space-between;

	/*background-color: rgba(255,255,255,0.3);*/
	mix-blend-mode: exclusion;
}

.header-item {
	/*flex: 1;*/
}

.header > a > .favicon {
	height: 1.25rem;
	cursor: alias;
}

.header > p {
	font-family: sans-serif;
	font-size: 0.75rem;
	line-height: 0.75rem;
	color: white;

	margin: 0;
}