/* The version of Bourbon used in this Pen was 4.* */
@import "bourbon";
/* The version of Neat used in this Pen was 1.8.* */
@import "neat";

$base-duration: 500ms;

// Colors
$color-1: #2c3e50;
$color-2: #3498db;
$color-3: #2ecc71;

// Breakpoints
$sm: new-breakpoint(min-width 320px);
$med: new-breakpoint(min-width 768px);
$lg: new-breakpoint(min-width 1024px);

*, *:before, *:after {
	box-sizing: border-box;
	outline: none;
}

html {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	font-smooth: auto;
	font-weight: 300;
	line-height: 1.5;
	color: #444;
}

body {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	// background-color:darken($color-1, 4%);
}

nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 3.125rem;
	height: 100%;
	z-index: 999;
	
	.nav-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 1.25rem 0.625rem;
		background-color: white;
		box-shadow: 0 0 1.25rem rgba(black,0.2);
		
		
		.hamburger {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 3.125rem;
			cursor: pointer;

			span {
				position: relative;
				display: block;
				width: 100%;
				height: 0.125rem;
				background-color: $color-2;

				&:before, &:after {
					position: absolute;
					content: '';
					width: 100%;
					height: 0.125rem;
					background-color: $color-2;
				}

				&:before {
					transform: translateY(-0.375rem);
					animation: burger1 250ms linear;
				}

				&:after {
					transform: translateY(0.375rem);
					animation: burger2 250ms linear;
				}
				
				@keyframes burger1 {
					0%   { transform: translateY(0); }
					50%  { transform: translateY(0); }
					100% { transform: translateY(-5px) rotate(0deg); }
				}
				
				@keyframes burger2 {
					0%   { transform: translateY(0); }
					50%  { transform: translateY(0); }
					100% { transform: translateY(5px) rotate(0deg); }
				}
			}
		}
		
		.menu-bg {
			position: fixed;
			top: 0;
			left: -3.125rem;
			width: 0%;
			height: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
			transition: all 0.5s ease;
			z-index: -1;
							
			a {
				position: relative;
				display: flex;
				align-items: center;
				width: 0%;
				height: 25vh;
				margin: 0;
				//padding: 1.875rem 0 1.875rem 3.125rem;
				background-color: rgba(black,0.8);
				border-bottom: 1px solid transparentize(white,0.7);
				overflow: hidden;
				transition: width 0.75s ease;

				color: white;
				font-size: 2.25rem;
				font-weight: bold;
				text-decoration: none;


				&:nth-of-type(2) {
					transition-delay: 0.5625s;
				}

				&:nth-of-type(3) {
					transition-delay: 0.375s;
				}

				&:nth-of-type(4) {
					transition-delay: 0.1875s;
				}
				
				&:hover {
					background-color: $color-2;
					transition: background-color 500ms linear !important;
				}
			}
		}
		
		#hamburger {
			display: none;
			
			&:checked ~ .hamburger {
				
				span {
					display: block;
					width: 100%;
					background-color: white;

					&:before, &:after {
						background-color: $color-2;
						transform-origin: center center;
					}

					&:before {
						transform: rotate(45deg);
						animation: burger3 250ms linear;
					}

					&:after {
						transform: rotate(-45deg);
						animation: burger4 250ms linear;
					}
				}
				
				@keyframes burger3 {
					0%   { transform: translateY(0); }
					50%  { transform: translateY(0); }
					100% { transform: translateY(0) rotate(-45deg); }
				}
				
				@keyframes burger4 {
					0%   { transform: translateY(0); }
					50%  { transform: translateY(0); }
					100% { transform: translateY(0) rotate(45deg); }
				}
			}

			&:checked ~ .menu-bg {
				left: 3.125rem;
				width: 100%;
				margin: 0;
				padding: 0;
				transition: all 0.5s ease;
					
				a {
					position: relative;
					display: flex;
					align-items: center;
					width: 100%;
					height: 25vh;
					margin: 0;
					padding: 1.875rem 0 1.875rem 3.125rem;
					background-color: rgba(black,0.8);
					border-bottom: 1px solid transparentize(white,0.7);
					overflow: hidden;
					transition: width 0.75s ease;

					&:nth-of-type(1) {
						transition-delay: 0.5625s;
					}

					&:nth-of-type(2) {
						transition-delay: 0.375s;
					}

					&:nth-of-type(3) {
						transition-delay: 0.1875s;
					}
					
					&:hover {
						background-color: $color-2;
						transition: background-color 500ms linear !important;
					}
				}
			}
		}
	}
	
	.brand {
		position: absolute;
		bottom: 4.25rem;
		left: -1.875rem;
		transform: rotate(-90deg);
		color: $color-2;
		font-family: 'Courier New', monospace;
		font-weight: bold;
		
		a {
			text-decoration: none;
			color: $color-2;
		}
	}
}