@font-face {
  font-family: PapMar;
  src: url(Hey-Gorgeous.ttf.woff);
}

.highlight {
	background-color: orange;
}

.speakerName {
	position: absolute;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}
.characterIcon {
	position: absolute;
	height: 3rem;
	width: 3rem;
	border-radius: 1.5rem;
	bottom: 0.2rem;
	user-select: none;
}
.leftIcon {
	left: -3rem;
}
.rightIcon {
	right: -3rem;
	transform: scaleX(-1);
}

.messageTail {
	position: absolute;
	bottom: 0.2rem;
	height: 1rem;
	width: 3rem;
	background-color: white;
	z-index: -1;
}
.leftTail {
	left: 1rem;
	transform: skew(-55deg);
}
.rightTail {
	right: 1rem;
	transform: skew(55deg);
}
.messageBox {
	font-family: PapMar;
	display: inline-block;
	width: calc( 100% - 3rem );
	background-color: white;
	margin: 1rem;
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-top: 0.1rem;
	padding-bottom: 0.2rem;
	font-size: 1.1rem;
	text-align: left;
	white-space: pre;
}
.speechBubble {
	border-radius: 0.5rem;
}
.userSelect {
	border-radius: 0.3rem;
	padding: 0.5rem;
	padding-left: 1rem;
	padding-right: 0rem;
    line-height: 2.3rem;
}
.tec {
	position: relative;
	left: -0.3rem;
	border: 0.3rem solid #CECECE;
	background-image: linear-gradient(#23487A, #00254E, #23487A);
	color: #00B70D;
}
.housou {
	clip-path: polygon(
		0 0.8rem,
		0.8rem 0,
		calc( 100% - 0.8rem ) 0,
		100% 0.8rem,
		100% calc( 100% - 0.8rem ),
		calc( 100% - 0.8rem ) 100%,
		0.8rem 100%,
		0% calc( 100% - 0.8rem ),
		0% 0.8rem
	)
}
.system {
	position: relative;
	left: -0.3rem;
	border: 0.3rem solid #CECECE;
	border-radius: 0.3rem;
	background-image: url("ui/systemBG.png");
	background-repeat: repeat;
	color: white;
	animation: bgScroll 3s linear infinite;
}
.diary {
	background-color: #FFFFB9;
}
.boss {
	padding: 0.5rem;
	padding-left: 0.8rem;
    padding-right: 0.2rem;
	clip-path: polygon(
		0.2rem 10%,
		6% 0,
		17% 0.3rem,
		26% 0,
		46% 0.2rem,
		51% 0,
		67% 0.02rem,
		76%	0.5rem,
		87% 0,
		94% 0.1rem,
		calc( 100% - 0.2rem ) 24%,
		calc( 100% - 0.4rem ) 40%,
		100% 72%,
		94% 100%,
		82% calc( 100% - 0.2rem ),
		68% 100%,
		61% calc( 100% - 0.3rem ),
		48% 100%,
		33% 100%,
		19% calc( 100% - 0.15rem ),
		8% 100%,
		4% 100%,
		0% 83%,
		0.4rem 40%,
		0.2rem 24%
	);
}
.intro {
	border: 0rem solid transparent;
	margin-top: 1rem;
	margin-bottom: 1rem;
	border-image-source: url("ui/introBox.png");
	border-image-slice: 30%;
	border-image-repeat: repeat;
	border-image-outset: 1rem;
	border-image-width: 1rem;
}
.whiteEmail {
	background-color: #E1E1E1;
}
.peachEmail {
	background-color: #D7ACBC;
}
.RDMEmail {
	background-color: #ACC2D7;
}
.troubleEmail {
	background-color: #D3D7AC;
}
.small {
	width: auto;
	min-width: 3rem;
	border-radius: 0.5rem;
	margin-right: 50%;
	font-size: 0.6em;
}
.rightSpeaker .small {
	margin-left: 50%;
	margin-right: 1rem;
}
.book {
	width: 17rem;
	margin-left: calc( 50% - 9rem );
}
.kanban, .plate {
	position: relative;
	background-color: white;
	background-image: url('ui/kanbanCorner.png');
	background-size: 1.2rem;
	background-repeat: no-repeat;
	background-position: right bottom;
}
.kanban::before, .plate::before {
	content: "";
	position: absolute;
	display: block;
	z-index: -1;
	left: -1rem;
	top: -1rem;
	width: 100%;
	height: 100%;
	padding: 1rem;
	background-color: #88694E;
	clip-path: polygon(
		0rem 0.7rem,
		0.5rem 0.7rem,
		22% 0rem,
		41% 0.6rem,
		59% 0rem,
		78% 0.6rem,
		calc( 100% - 0.9rem ) 0rem,
		calc( 100% - 0.8rem ) 0.6rem,
		100% 26%,
		calc( 100% - 0.6rem ) 40%,
		100% 56%,
		calc( 100% - 0.6rem ) 71%,
		100% calc( 100% - 0.7rem ),
		calc( 100% - 0.5rem ) calc( 100% - 0.6rem ),
		78% 100%,
		59% calc( 100% - 0.6rem ),
		41% 100%,
		22% calc( 100% - 0.6rem ),
		0.9rem 100%,
		0.8rem calc( 100% - 0.6rem ),
		0rem 71%,
		0.6rem 56%,
		0rem 40%,
		0.6rem 26%
	);
}
.majo {
	padding: 0.5rem;
    padding-left: 0.7rem;
    padding-right: 0.3rem;
	background-color: #4B3263;
	clip-path: polygon(
		0.1rem 70%,
		0.3rem 62%,
		0.35rem 47%,
		0.04rem 39%,
		0.1rem 30%,
		0.11rem 26%,
		0.3rem 19%,
		0.25rem 10%,
		5% 0.15rem,
		7% 0.2rem,
		17% 0.3rem,
		19% 0.31rem,
		21% 0.2rem,
		23% 0.19rem,
		25% 0rem,
		28% 0.26rem,
		33% 0.16rem,
		35% 0.32rem,
		36% 0.32rem,
		38% 0.1rem,
		44% 0.27rem,
		46% 0.29rem,
		48% 0.31rem,
		49% 0.31rem,
		52% 0.16rem,
		55% 0.3rem,
		58% 0rem,
		62% 0.3rem,
		63% 0.3rem,
		64% 0.1rem,
		68.5% 0.05rem,
		71% 0.3rem,
		76% 0.306rem,
		78% 0.1rem,
		80.5% 0.14rem,
		88% 0.2rem,
		92% 0.3rem,
		94.5% 0.1rem,
		96% 10%,
		calc( 100% - 0.3rem ) 19%,
		100% 29%,
		calc( 100% - 0.3rem ) 40%,
		calc( 100% - 0.14rem ) 48%,
		calc( 100% - 0.1rem ) 70%,
		calc( 100% - 0.04rem ) 76%,
		100% 81%,
		calc( 100% - 0.03rem ) 84%,
		calc( 100% - 0.3rem ) calc( 100% - 0.2rem ),
		94% calc( 100% - 0.2rem ),
		94% calc( 100% - 0.19rem ),
		92% calc( 100% - 0.28rem ),
		84% calc( 100% - 0.28rem ),
		82% calc( 100% - 0.2rem ),
		80.3% calc( 100% - 0.18rem ),
		79% calc( 100% - 0.02rem ),
		78% calc( 100% - 0.02rem ),
		74.5% calc( 100% - 0.07rem ),
		71.5% calc( 100% - 0.021rem ),
		69% calc( 100% - 0.15rem ),
		64% calc( 100% - 0.29rem ),
		63% calc( 100% - 0.142rem ),
		60.8% calc( 100% - 0.14rem ),
		59% calc( 100% - 0.2rem ),
		57.7% calc( 100% - 0.22rem ),
		56% calc( 100% - 0.3rem ),
		50% calc( 100% - 0.3rem ),
		45% calc( 100% - 0.304rem ),
		41% calc( 100% - 0.3rem ),
		39.2% calc( 100% - 0.13rem ),
		37% calc( 100% - 0.08rem ),
		34.5% 100%,
		34% 100%,
		31.4% calc( 100% - 0.3rem ),
		29% calc( 100% - 0.15rem ),
		27% calc( 100% - 0.134rem ),
		25% 100%,
		22.4% calc( 100% - 0.12rem ),
		17.6% calc( 100% - 0.08rem ),
		16% calc( 100% - 0.162rem ),
		11% 100%,
		5% 100%,
		3% calc( 100% - 0.2rem ),
		0.1rem 90%
	);
}

.meta {
	font-family: sans-serif;
	font-size: 1.6rem;
}
.colc00000ff {
	color: #c00000;
}
.colcc0000ff {
	color: #cc0000;
}
.col008000ff {
	color: #008000;
}
.col202060ff {
	color: #202060;
}
.colffffffff {
	color: #FFFFFF;
}
.colffddddff {
	color: #FFDDDD;
}
.col000000a0 {
	opacity: 0.63;
}
.scale3 {
	font-size: 3rem;
}
.scale2 {
	font-size: 2rem;
}
.scale25 {
	font-size: 2.5rem;
}
.scale17 {
	font-size: 1.7rem;
}
.scale15 {
	font-size: 1.55rem;
}
.scale067 {
	font-size: 0.7rem;
}
.scale07 {
	font-size: 0.72rem;
}
.scale075 {
	font-size: 0.77rem;
}
.scale08 {
	font-size: 0.83rem;
}
.scale084 {
	font-size: 0.9rem;
}
.scale09 {
	font-size: 1rem;
}
.offset {
	position: absolute;
    left: 11.5rem;
}

.smaller {
	font-size: 0.7em;
	font-weight: bold;
}
.bigger {
	font-family: sans-serif;
	font-size: 1.5em;
	font-weight: bold;
    display: inline-block;
}
.meta .bigger {
	font-size: 1em;
	font-weight: bold;
}
.cappedHeight {
    height: 1em;
	vertical-align: bottom;
}
.alignmentFix {
	display: block;
    position: relative;
    bottom: 1rem;
}
.meta .alignmentFix {
	display: block;
    position: relative;
    bottom: 0px;
}
.wider {
	margin-left: 0rem;
	margin-right: 0rem;
	padding-left: 0.5rem;
	width: calc( 100% - 0.5rem );
}
.wave {
	position: relative;
}
.waveChar {
	position: relative;
	animation: waveAnim 800ms infinite;
	animation-timing-function: linear;
}
.shake {
	position: relative;
}
.shakeChar {
	position: relative;
	animation: shakeAnim 400ms infinite;
	animation-timing-function: linear;
}


@keyframes waveAnim {
	0% {
		top: -0.2rem;
		left: 0rem;
	}
	12.5% {
		top: -0.14rem;
		left: 0.14rem;
	}
	25% {
		top: 0rem;
		left: 0.2rem;
	}
	37.5% {
		top: 0.14rem;
		left: 0.14rem;
	}
	50% {
		top: 0.2rem;
		left: 0rem;
	}
	62.5% {
		top: 0.14rem;
		left: -0.14rem;
	}
	75% {
		top: 0rem;
		left: -0.2rem;
	}
	87.5% {
		top: -0.14rem;
		left: -0.14rem;
	}
	100% {
		top: -0.2rem;
		left: 0rem;
	}
}
@keyframes shakeAnim {
	0% {
		top: -0.05rem;
		left: -0.025rem;
	}
	12.5% {
		top: -0.035rem;
		left: 0.05rem;
	}
	25% {
		top: 0.025rem;
		left: -0.05rem;
	}
	37.5% {
		top: -0.025rem;
		left: 0rem;
	}
	50% {
		top: 0.05rem;
		left: -0.025rem;
	}
	62.5% {
		top: -0.05rem;
		left: 0.05rem;
	}
	75% {
		top: 0.025rem;
		left: -0.025rem;
	}
	87.5% {
		top: 0.05rem;
		left: 0.038rem;
	}
	100% {
		top: -0.05rem;
		left: -0.025rem;
	}
}
@keyframes bgScroll {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: -128px 64px;
	}
}

.gameIcon {
	height: 1.455em;
}
.emailPic {
	display: block;
	width: 100%;
	margin-bottom: 0.2rem;
}
.rightAlignedPic {
	float: right;
	height: 5rem;
}

::selection {
  color: white;
  background: #0665D4;
}