<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2446211/made.css">
<section class="cursor">
	<div class="auto"><span class="tooltiptext">Auto</span></div>
	<div class="default"><span class="tooltiptext">default</span></div>
	<div class="none"><span class="tooltiptext">None</span></div>
	<div class="pointer"><span class="tooltiptext">Pointer</span></div>
	<div class="progress"><span class="tooltiptext">Progress</span></div>
	<div class="help"><span class="tooltiptext">Help</span></div>
	<div class="text"><span class="tooltiptext">Text</span></div>
	<div class="cell"><span class="tooltiptext">Cell</span></div>
	<div class="crosshair"><span class="tooltiptext">Crosshair</span></div>
	<div class="alias"><span class="tooltiptext">Alias</span></div>
	<div class="context-menu"><span class="tooltiptext">Context menu</span></div>
	<div class="vertical-text"><span class="tooltiptext">Vertical text</span></div>
	<div class="copy"><span class="tooltiptext">Copy</span></div>
	<div class="move"><span class="tooltiptext">Move</span></div>
	<div class="no-drop"><span class="tooltiptext">No drop</span></div>
	<div class="not-allowed"><span class="tooltiptext">Not allowed</span></div>
	<div class="all-scroll"><span class="tooltiptext">All scroll</span></div>
	<div class="col-resize"><span class="tooltiptext">Col resize</span></div>
	<div class="row-resize"><span class="tooltiptext">Row resize</span></div>
	<div class="nesw-resize"><span class="tooltiptext">NESW resize</span></div>
	<div class="nwse-resize"><span class="tooltiptext">NWSE resize</span></div>
	<div class="n-resize"><span class="tooltiptext">N resize</span></div>
	<div class="e-resize"><span class="tooltiptext">E resize</span></div>
	<div class="s-resize"><span class="tooltiptext">S resize</span></div>
	<div class="w-resize"><span class="tooltiptext">W resize</span></div>
	<div class="ns-resize"><span class="tooltiptext">NS resize</span></div>
	<div class="ew-resize"><span class="tooltiptext">EW resize</span></div>
	<div class="ne-resize"><span class="tooltiptext">NE resize</span></div>
	<div class="nw-resize"><span class="tooltiptext">NW resize</span></div>
	<div class="sw-resize"><span class="tooltiptext">SW resize</span></div>
	<div class="se-resize"><span class="tooltiptext">SE resize</span></div>
	<div class="wait"><span class="tooltiptext">Wait</span></div>
	<div class="grab"><span class="tooltiptext">Grab</span></div>
	<div class="grabbing"><span class="tooltiptext">Grabbing</span></div>
	<div class="zoom-in"><span class="tooltiptext">Zoom in</span></div>
	<div class="zoom-out"><span class="tooltiptext">Zoom out</span></div>
</section>

<section class="made">
	<div>
		<h1>Made with </h1>
	</div>
	<div class="love">
		<svg version="1.1" viewBox="0 0 92 72" enable-background="new 0 0 92 72" aria-labelledby="heartTitle" role="img">
			<title id="heartTitle">A Heart Full of Love</title>
			<path fill="#ff005d"
				d="M82.32,7.888c-8.359-7.671-21.91-7.671-30.271,0l-5.676,5.21l-5.678-5.21c-8.357-7.671-21.91-7.671-30.27,0 c-9.404,8.631-9.404,22.624,0,31.255l35.947,32.991L82.32,39.144C91.724,30.512,91.724,16.52,82.32,7.888z">
			</path>
		</svg>
	</div>
	<div>
		<h1> by Lo_h</h1>
	</div>
</section>

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
.auto {
	cursor: -moz-auto;
	cursor: -webkit-auto;
	cursor: auto;
	background: #b0cc99;
}
.default {
	cursor: -moz-default;
	cursor: -webkit-default;
	cursor: default;
	background: #677e52;
}
.none {
	cursor: -moz-auto;
	cursor: -webkit-auto;
	cursor: auto;
	background: #b7ca79;
}
.pointer {
	cursor: -moz-pointer;
	cursor: -webkit-pointer;
	cursor: pointer;
	background: #f6e8b1;
}
.progress {
	cursor: -moz-progress;
	cursor: -webkit-progress;
	cursor: progress;
	background: #e6e2af;
}
.help {
	cursor: -moz-help;
	cursor: -webkit-help;
	cursor: help;
	background: #a7a37e;
}
.text {
	cursor: -moz-text;
	cursor: -webkit-text;
	cursor: text;
	background: #efecca;
}
.cell {
	cursor: -moz-cell;
	cursor: -webkit-cell;
	cursor: cell;
	background: #f6e497;
}
.crosshair {
	cursor: -moz-crosshair;
	cursor: -webkit-crosshair;
	cursor: crosshair;
	background: #fcfae1;
}
.alias {
	cursor: -moz-alias;
	cursor: -webkit-alias;
	cursor: alias;
	background: #bd8d46;
}
.context-menu {
	cursor: -moz-context-menu;
	cursor: -webkit-context-menu;
	cursor: context-menu;
	background: #eeeec6;
}
.vertical-text {
	cursor: -moz-vertical-text;
	cursor: -webkit-vertical-text;
	cursor: vertical-text;
	background: #c79f4b;
}
.copy {
	cursor: -moz-copy;
	cursor: -webkit-copy;
	cursor: copy;
	background: #a67e2e;
}
.move {
	cursor: -moz-no-drop;
	cursor: -webkit-no-drop;
	cursor: no-drop;
	background: #663e10;
}
.no-drop {
	cursor: -moz-no-drop;
	cursor: -webkit-no-drop;
	cursor: no-drop;
	background: #fff168;
}
.not-allowed {
	cursor: -moz-not-allowed;
	cursor: -webkit-not-allowed;
	cursor: not-allowed;
	background: #ffefb6;
}
.all-scroll {
	cursor: -moz-all-scroll;
	cursor: -webkit-all-scroll;
	cursor: all-scroll;
	background: #ffda8c;
}
.col-resize {
	cursor: -moz-col-resize;
	cursor: -webkit-col-resize;
	cursor: col-resize;
	background: #b5b276;
}
.row-resize {
	cursor: -moz-row-resize;
	cursor: -webkit-row-resize;
	cursor: row-resize;
	background: #bdb55a;
}
.news-resize {
	cursor: -moz-nesw-resize;
	cursor: -webkit-nesw-resize;
	cursor: nesw-resize;
	background: #d0e09d;
}
.nwse {
	cursor: -moz-nwse-resize;
	cursor: -webkit-nwse-resize;
	cursor: nwse-resize;
	background: #e6e296;
}
.n-resize {
	cursor: -moz-n-resize;
	cursor: -webkit-n-resize;
	cursor: n-resize;
	background: #ffbd4f;
}
.e-resize {
	cursor: -moz-e-resize;
	cursor: -webkit-e-resize;
	cursor: e-resize;
	background: #fdd131;
}
.s-resize {
	cursor: -moz-s-resize;
	cursor: -webkit-s-resize;
	cursor: s-resize;
	background: #e0dc63;
}
.w-resize {
	cursor: -moz-w-resize;
	cursor: -webkit-w-resize;
	cursor: w-resize;
	background: #fffbcc;
}
.ns-resize {
	cursor: -moz-ns-resize;
	cursor: -webkit-ns-resize;
	cursor: ns-resize;
	background: #c0ac42;
}
.ew-resize {
	cursor: -moz-ew-resize;
	cursor: -webkit-ew-resize;
	cursor: ew-resize;
	background: #f2e783;
}
.ne-resize {
	cursor: -moz-ne-resize;
	cursor: -webkit-ne-resize;
	cursor: ne-resize;
	background: #ffc652;
}
.nw-resize {
	cursor: -moz-nw-resize;
	cursor: -webkit-nw-resize;
	cursor: nw-resize;
	background: #ff9300;
}
.sw-resize {
	cursor: -moz-sw-resize;
	cursor: -webkit-sw-resize;
	cursor: sw-resize;
	background: #dbac45;
}
.se-resize {
	cursor: -moz-se-resize;
	cursor: -webkit-se-resize;
	cursor: se-resize;
	background: #ff8900;
}
.wait {
	cursor: -moz-wait;
	cursor: -webkit-wait;
	cursor: wait;
	background: #fff2c9;
}
.grab {
	cursor: -moz-grab;
	cursor: -webkit-grab;
	cursor: grab;
	background: #ffd940;
}
.grabbing {
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
	cursor: grabbing;
	background: #fff799;
}
.zoom-in {
	cursor: -moz-zoom-in;
	cursor: -webkit-zoom-in;
	cursor: zoom-in;
	background: #c9a767;
}
.zoom-out {
	cursor: -moz-zoom-out;
	cursor: -webkit-zoom-out;
	cursor: zoom-out;
	background: #8c5935;
}

/* BEGIN PAGE LAYOUT */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.cursor {
	font-family: Montserrat, sans-serif;
	padding-top: 50px;
	display: grid;
	grid-template: repeat(8, 1fr) / repeat(4, 1fr);
	div {
		height: 200px;
		position: relative;
	}
}

/* END PAGE LAYOUT */

/* BEGIN TOOLTIPS */

.tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 999;
	bottom: 110%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}
.cursor {
	div:hover {
		.tooltiptext {
			visibility: visible;
			opacity: 1;
		}
	}
}

/* END TOOLTIPS */

/* BEGIN MADE LOVE */

.made {
	display: -webkit-box;
	display: -ms-flexbox;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
	bottom: 0;
	right: 20px;
	h1 {
		font-size: 1rem;
		font-weight: 200;
	}
	.love {
		padding: 0 0.4rem;
		-webkit-animation: 1.5s heartThrob infinite;
		animation: 1.5s heartThrob infinite;
		svg {
			height: 1rem;
		}
	}
}

@-webkit-keyframes heartThrob {
	10% {
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
	}
	20% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	40% {
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
	}
	60% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes heartThrob {
	10% {
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
	}
	20% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	40% {
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
	}
	60% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

/* END MADE OF LOVE */