<div class="toggle">
	<div class="mask">
		<div class="icon-wrap active">
			<div class="icon sun"></div>
		</div>
		<div class="icon-wrap">
			<svg copy="icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path d="M187.73 151.4c0-55.24 29.34-104.19 76.27-129.72C242.21 9.81 216.56 3 188.15 3 99.15 3 36.2 70.46 36.2 151.4S98.3 299 187.33 299c28.26 0 53.87-6.82 75.69-18.69-46.48-25.31-75.29-73.8-75.29-128.91z" fill="#283445"/></svg>
		</div>
	</div>
	<div class="bar"></div>
</div>

<div class="page-content">
	<div class="hero"></div>
	<h1>Match Your Lifestyle</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae natus nihil laborum facilis laudantium quisquam ullam perspiciatis voluptatum illum dolores autem nobis, numquam obcaecati ducimus quia dolorem similique sint. Molestiae! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat totam voluptatibus impedit ipsum veritatis animi quae tempore, facilis voluptate incidunt, recusandae nihil quia perferendis? Reprehenderit rerum quas eveniet quidem voluptatum?</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae natus nihil laborum facilis laudantium quisquam ullam perspiciatis voluptatum illum dolores autem nobis, numquam obcaecati ducimus quia dolorem similique sint. Molestiae! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat totam voluptatibus impedit ipsum veritatis animi quae tempore, facilis voluptate incidunt, recusandae nihil quia perferendis? Reprehenderit rerum quas eveniet quidem voluptatum?</p>
</div>

@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Myeongjo');
$heading: 'Nanum Myeongjo', serif;
$body: 'Nanum Gothic', sans-serif;

$size: 60px;
$width: 768px;
$dark: #161D26;
$dark-ui: #283445;
$light-ui: #fff;

body {
	transition: all 300ms ease;
	
	&.dark {
		background-color: $dark;
	}
}

.toggle {
	position: fixed;
	top: 20%; left: 0;
	width: $size;
	
	.mask {
		width: $size; height: $size;
		overflow: hidden;
		
		.icon-wrap {
			padding: $size/4;
			transition: all 300ms 400ms ease;
			
			&:last-child {
				transform: translatey(-$size);
			}
		}
		
		.icon {
			width: $size/2; height: $size/2;
			border-radius: 50%;
		}
		
		.active {
			transition-delay: 100ms;
			
			&:first-child {
				transform: translatey($size);
			}
			
			&:last-child {
				transform: translatey(0);
			}
		}
		
		.sun {
			background-color: $light-ui;
		}
		
		.moon {
			background-color: $dark-ui;
		}
	}
	
	.bar {
		width: 40%; height: 5px;
		margin: 0 auto;
		background-color: $dark-ui;
		transition: all 300ms 100ms ease;
		
		&.dark {
			background-color: $light-ui;
		}
	}
}

.page-content {
	max-width: $width + $size * 2;
	margin: $size auto;
	padding: $size;
	
	h1, p {
		transition: all 300ms ease; 
	}
	
	h1 {
		font-family: $heading;
		padding: 45px 0;
		font-size: 3.5em;
	}
	
	p {
		font-family: $body;
		padding: 0 0 30px 0;
		font-size: 1em;
		line-height: 2em;
	}
	
	.hero {
		width: 100%; height: 550px;
		background-image: url('https://images.unsplash.com/photo-1520545221203-f6ca6a8e3252?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=c31c8f886e5b75e9eb1a12c180c1f0ff');
		background-size: cover;
	}
}

.dark {
	.hero {
	background-image: url('https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=3cb3ba03a83bbf2690315283e9cd4115');
	}
	h1, p {
		color: $light-ui;
	}
}

$( ".mask" ).click(function() {
	$( ".icon-wrap" ).toggleClass('active');
	$('body, .bar').toggleClass('dark');
});