html {
	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	cursor: url(../../src/assets/icons/cursor.png), default;
}

div.div-main {
	width: 100%;
	height: 100%;

	background: #000000;
}

div.div-mail-init {
	width: 100%;
	height: 100%;

	transition: 500ms;
}

div.div-mail-init-active {
	opacity: 0;
}

div.div-mail-body {
	width: 100%;
	height: 100%;

	opacity: 0.01;

	transition: 500ms;
}

div.div-mail-body-active {
	width: 100%;
	height: 100%;

	opacity: 1;
}

div.div-mail {
	width: 70%;
	height: 100%;

	margin: 0 10%;
	padding-left: 5%;
	padding-right: 5%;

	background-color: #1f1f1f;

	overflow-x: hidden;
	overflow-y: auto;

	user-select: none;

	color: #ffffff;
	font-family: "BP";
}

div.div-wrapper {
	width: 100%;
	height: 8vh;

	padding-top: 46vh;
	padding-bottom: 36vh;
}

div.div-signature {
	height: 10vh;

	text-align: center;

	transition: 500ms;
}

div.div-signature-active {
	opacity: 0;
}

div.div-ribbon {
	width: 100%;
	height: 8vh;

	background: #1f1f1f;

	display: flex;
	justify-content: center;
	align-items: center;
}

div.div-seal {
	width: 10vh;
	height: 10vh;

	background: #2f2f2f;

	display: flex;
	justify-content: center;
	align-items: center;

	transform: rotate(45deg);

	transition: all 1000ms;
}

div.div-seal:hover {
	transform: rotate(405deg);
	box-shadow: 0 0 1vh #171717;
}

div.div-seal-active {
	transform: translateY(-60vh) rotate(405deg);
}

div.div-seal-active:hover {
	transform: translateY(-60vh) rotate(405deg);
}

div.div-icon {
	display: flex;
	justify-content: center;
	align-items: center;

	transform: rotate(-45deg);
}

div.div-envelope-base {
	position: relative;
	background: #3f3f3f;
}

div.div-envelope-inner {
	border-top: solid calc(2vh) transparent;
	border-right: solid calc(3vh) #9f9f9f;
	border-bottom: solid calc(2vh) #9f9f9f;
	border-left: solid calc(3vh) #9f9f9f;
}

div.div-envelope-flap {
	position: absolute;
	top: 0;
	left: 0;
	border-top: solid calc(2vh) #7f7f7f;
	border-right: solid calc(3vh) transparent;
	border-left: solid calc(3vh) transparent;
	transform: rotateX(0deg);
	transform-origin: center top;
	transition: all 750ms;
	transition-property: transform, border-color;
}

div.div-seal:hover div.div-envelope-flap {
	border-top: solid calc(2vh) #4f4f4f;
	transform: rotateX(180deg);
}

div.div-seal-active div.div-envelope-flap {
	border-top: solid calc(2vh) #4f4f4f;
	transform: rotateX(180deg);
}

span.span-signature-dead {
	color: #777777;
}

span#span-signature-precedent {
	color: #9f9f9f;
	font-family: "BP";
	font-size: 2vh;
	font-weight: 200;
}

span#span-signature-content {
	color: #ffffff;
	font-family: "BP";
	font-size: 2vh;
	font-weight: 600;
}

img.img-signature-icon {
	width: 1.5vh;
	height: 1.5vh;

	vertical-align: middle;
}

p.p-signature {
	margin: 0;

	font-size: 2vh;
	line-height: 2vh;

	display: inline-block;
}

::-webkit-scrollbar {
	display: none;
}