html {
	font-size: 16px;
}

body {
	width: 100vw;
	min-height: 100vh;
	margin: 0;
	background-color: #2A2131;
	color: #BEB2D2;
	font-size: 1.5rem;
	font-family: 'Red Hat Text';
	font-weight: 400;
}

* {
	box-sizing: border-box;
}

::selection {
	background-color: #3F3249;
}

header {
	display: flex;
	background-color: rgba(0,0,0,.2);
	width: 100%;
	height: 3.5rem;
	padding: 0 2rem;
}

header > section {
	display: flex;
	width: 100%;
	height: 100%;
	background-color: transparent;
	align-items: center;
	column-gap: .5rem;
}

header > section > .logo {
	background-image: url(../img/favicon-96x96.png);
	background-size: 100%;
	width: 3.25rem;
	height: 3.25rem;
	margin-top: .25rem;
}

header > section > h1 {
	font-size: 1.75rem;
	font-family: 'Red Hat Display';
	margin: 0;
}

.content {
	display: flex;
	width: 100%;
	height: calc(100vh - 3.5rem);
	padding: 3rem 2rem;
	flex-direction: column;
	align-items: center;
	row-gap: 8rem;
}

.content > .tee-file-container {
	display: flex;
	width: 100%;
	max-width: 64rem;
	height: 16rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 1rem;
	outline: .25rem dashed #453750;
	outline-offset: -.25rem;
	position: relative;
}

.content > .tee-file-container > input {
	display: none;
}

.content > .tee-file-container > label::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.content > .tee-file-container > img {
	width: 16rem;
	height: 8rem;
	margin: 1rem .5rem 0;
	border-radius: .25rem;
}

.content > .tee-render-container {
	display: flex;
	width: 100%;
	max-width: 64rem;
	column-gap: 1rem;
	justify-content: space-around;
}

.content > .tee-file-container > img,
.content > .tee-render-container > .teeassembler-tee {
	background-color: rgba(0,0,0,.05);
	background-image: linear-gradient(45deg, rgba(0,0,0,.1) 25%, transparent 25%), linear-gradient(-45deg, rgba(0,0,0,.1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0,0,0,.1) 75%), linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.1) 75%);
	background-size: 1rem 1rem;
	background-position: 0 0, 0 .5rem, .5rem -.5rem, -.5rem 0;
}

/* Eyes */

.teeassembler-tee[data-eyes='angry'] .teeassembler-left_eye, 
.teeassembler-tee[data-eyes='angry'] .teeassembler-right_eye {
	background-position: -96em -96em;
}

.teeassembler-tee[data-eyes='hurt'] .teeassembler-left_eye, 
.teeassembler-tee[data-eyes='hurt'] .teeassembler-right_eye {
	background-position: -128em -96em;
}

.teeassembler-tee[data-eyes='happy'] .teeassembler-left_eye, 
.teeassembler-tee[data-eyes='happy'] .teeassembler-right_eye {
	background-position: -160em -96em;
}

.teeassembler-tee[data-eyes='cross'] .teeassembler-left_eye, 
.teeassembler-tee[data-eyes='cross'] .teeassembler-right_eye {
	background-position: -192em -96em;
}

.teeassembler-tee[data-eyes='surprised'] .teeassembler-left_eye, 
.teeassembler-tee[data-eyes='surprised'] .teeassembler-right_eye {
	background-position: -224em -96em;
}

/* Eyes */