html, body, div, img, h1, h2, h3, h4, h5, h6, p{
	margin: 0;
	padding: 0;
}

html, body{
	height: 100vh;
}

body{
	background: url('./assets/texture.png') repeat;
	background-size: 82px 82px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: rgb(50, 47, 47);
	font-family: "Bryan", sans-serif;
	-webkit-font-smoothing: subpixel-antialiased;
}

#intro{
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-basis: auto;
	width: 100%;
	/* text-shadow: 0 1px 2px rgba(0,0,0,.06); */
	margin: 0 56px;
	padding: 24px;
	border-radius: 2pt;
	box-shadow: 0 1px 24px 0px rgba(0,0,0,.20), 0 1px 4px 1px rgba(0,0,0,.05);
	transform: rotate(-4deg);
	border: 1px solid rgba(234, 233, 215, 0.82);
	transition: .23s ease-out transform, box-shadow;
	cursor: pointer;
	backface-visibility: hidden;
	flex-grow: 2;
	background: url('./assets/inkblot1.png') -3% 112% no-repeat, rgba(246, 245, 204, 0.82);
	background-size: auto;	
	background-blend-mode: difference;
}

#intro:hover{
	transform: rotate(0deg);
}

#intro h1{
	font-size: 72pt;
}

#intro #ditto{
	/* font-size: 32pt; */
	font-size: 2.45rem;
	width: 100%;
	margin-top: -18px;
}

#intro h4{
	font-size: 18pt;
}

#mascot-container{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: auto;
	height: 100%;
	flex-shrink: 3;
}

#mascot{
	width: auto;
	height: 70vh;
}