$primary-color: #353535;  /* Grey */
$secondary-color: #DDD1C7;  /* Tan */
$accent-color-1: #AD5D4E;  /* Rust */
$accent-color-2: #18A999;  /* Teal */
$accent-color-3: #6A9170;  /* Muted Green */

$dark-grey: #1c1b20;


$sans-serif-font: 'Helvetica';


//GLOBAL STYLES
* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;

	background-size: cover;
	background-repeat: no-repeat;
	background-color: $secondary-color;

	font-family: sans-serif;
}

//MIXIN
@mixin flexcenter {
	display: flex;
	justify-content: center;
	align-items: center;
}

//MAIN CSS
.landing-page {
	//overflow-x: hidden;
	height: 100vh;
	width: 100%;
	background-color: $secondary-color;

	.menu-container {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100%;
		z-index: 5;
		opacity: 1;
		transition: opacity 1500ms;
		@include flexcenter();

		.menu-wrapper {
			list-style: none;

			li {
				margin: 0.5vmin 0;
				display: flex;
				justify-content: left;

				a {
					text-decoration: none;
					font-weight: 700;
					font-size: 15vmin;
					color: rgba(255, 255, 255, 0);
					-webkit-text-stroke: 0.12vmin $primary-color;
					transition-duration: 200ms;

					&:hover {
						color: $primary-color;
						-webkit-text-stroke: 0px $primary-color;
					}
				}


				span {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);

					font-size: 68vmin;
					font-weight: 900;
					color: rgba(0, 0, 0, 0.2);
				}
			}
		}
	}
}