@charset "UTF-8";


/* ------------------------------
   RESET
------------------------------ */

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	background-image: url("assets/paper-texture.PNG");
	align-items: center;
	color: #1A1A1A;
}


/* ------------------------------
   LANDING PAGE
------------------------------ */

.landing {
	min-height: 100vh;

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

	padding: 40px 20px;
}

.landing_inner {
	width: 100%;
	max-width: 1100px;

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

	text-align: center;
}


/* ------------------------------
   LOGO
------------------------------ */

.logo_stack {
	position: relative;
	width: min(80vw, 720px);
}

.logo_layer {
	display: block;
	width: 100%;
	height: auto;
}

.logo_mask,
.logo_mustache {
	position: absolute;
	top: 0;
	left: 0;
}

.logo_base {
	position: relative;
	z-index: 1;
}

.logo_mask {
	z-index: 2;
	opacity: 0;
}

.logo_mustache {
	z-index: 3;
}

/* ------------------------------
   ACTION
------------------------------ */

.landing_actions {
	margin-top: 42px;
}

.enter_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 170px;
	min-height: 54px;

	padding: 14px 28px;

	background-color: #E6392F;
	color: #FFF8F2;

	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.12em;

	text-decoration: none;

	border-radius: 4px;

	transition:
		transform 180ms ease,
		opacity 180ms ease;
}

.enter_button:hover {
	transform: translateY(-2px);
}

.enter_button:active {
	transform: translateY(0);
	opacity: 0.85;
}


/* ------------------------------
   MOBILE
------------------------------ */

@media (max-width: 600px) {

	.landing {
		padding: 28px 18px;
	}

	.logo {
		width: 92vw;
	}

	.landing_actions {
		margin-top: 30px;
	}

	.enter_button {
		width: 100%;
		max-width: 260px;
	}

}/* CSS Document */