@font-face{

	font-family: 'mono';
	src: url('./fonts/diatype_mono.ttf');
}

*{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none; 
	transition: 300ms all;
}

:root {
	--bg: #F7F3EE;
  --pr: #000000;
  --hi: #F1DDF1;
  --hig: #E2E9C1;
  --mut: #a0a0a0aa;
}

.mono {
	font-family: 'hermit';
}

.big {
	font-size: 40vw;
	position: fixed;
	left: 25vw;
	top: 0vh;
	color: blue;
	mix-blend-mode: color-burn;

}

.flash{
	font-size: 5.5em;
	background: red;
	color: white;
	font-family: 'OPS Favorite';
}

.validation {
	width: 20vw;
	position: fixed;
	left: 35vw;
	top: 20vh;
	z-index: 50;
}

body {
	font-family: 'OPS Favorite';
	font-family: 'Gap Sans';
	background: var(--bg);
}

h1 {
	font-size: 4em;
	background: var(--hi);
}

h2 {
	font-size: 3em;
	background: var(--hig);
}

h3 {
	font-size: 2em;
	background: var(--hi);
}

h4 {
	font-size: 1.8em;
}

.light {
	color: var(--mut);
}

p {
	font-size: 2em;
}

.box > * {
	max-width: 90%;
	max-height: 90%;
}

.box {
	overflow: hidden;
	position: fixed;
	border: 1px solid var(--mut);

	background: var(--bg);
	display: flex;
	justify-content: center;
	align-items: center;
	/* box-shadow: 0 0 13px 5px rgba(0,0,0,.1); */
}

#coding-caption {
	width: 40vw;
	height: 20vh;
	top: 2vh;
	left: 2vw;
}

#coding-display {
	width: 50vw;
	height: 70vh;
	top: 20.5vh;
	left: 5vw;
}

#design-display {
	width: 50vw;
	top: 2vh;
	height: 80vh;
	right: 3vw;

	/* border-left: 4px solid var(--hig); */
	/* border-right: 3px solid var(--hig); */
}


#design-caption {
	width: 40vw;
	height: 20vh;
	bottom: 3.5vh;
	right: 2vw;

	/* border-left: 4px solid var(--hig); */
	/* border-right: 3px solid var(--hig); */
}


.controller {
	width: 40vw;
	height: 8vh;
	bottom: 2vh;
	left: 1vw;
	font-size: 1em;
	text-transform: uppercase;
	font-weight: 600;
	/* font-family: monospace; */
}


button {
	all: unset;
	/* border: 2px solid black; */
	padding: 1em;
	user-select: none;
}
button:hover {
	background: black;
	color: white;
}