Disc nav on rainbow bg

dabblet.css

/**
 * Disc nav on rainbow bg
 */

html,
body {
	background: #222 url(http://api.thumbr.it/whitenoise-200x200.png?background=22222200&noise=444444&density=20&opacity=20);
	font-family: Segoe UI;
	color: #fff;
	margin: 0;
}

header {
	background: url(http://api.thumbr.it/whitenoise-200x200.png?background=4ea6ca00&noise=626262&density=45&opacity=10),
	            linear-gradient(15deg, hsla(10, 100%, 50%, 0.6), transparent 40%),
	            linear-gradient(-15deg, hsla(100, 80%, 30%, 0.6), transparent 40%),	
	            linear-gradient(135deg, hsl(48, 100%, 84%) 10%, hsl(100, 50%, 50%) 30%, hsl(204, 47%, 45%) 50%, hsl(244, 27%, 55%) 80%);
	position: relative;
	min-height: 300px;
	box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.8);
}

header h1 {
	background: hsla(0, 0%, 0%, 0.6);
	box-shadow: inset -0px 0 1px hsla(0, 0%, 0%, 0.8);
	margin: 0;
	text-align: center;
	font-family: Segoe UI Light;
	position: relative;
	top: 30px;
	font-weight: 100;
	color: #fff;
	font-size: 50px;
	line-height: 1.7;
	text-shadow: 1px 1px 1px hsla(0, 0%, 0%, 0.6);
}

@keyframes swirl {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

nav {
	text-align: center;
	position: absolute;
	bottom: 0;
	width: 100%
}

.swirl {
	line-height: 6em;
	text-align: center;
	position: relative;
	font-size: 20px;
	color: white;
	text-transform: lowercase;
	font-variant: small-caps;
	margin: 0 0 20px;
}

.swirl,
.swirl:after,
.swirl:before {
	display: inline-block;
	height: 6em;
	width: 6em;
	border-radius: 50%;
	border: 1px solid transparent;
	text-shadow: 0 0 7px #000;
	transition: all 0.6s;
}

.swirl:hover,
.swirl:hover:after,
.swirl:hover:before {
	border-color: hsla(0, 0%, 0%, 0.4);
	text-shadow: 0 0 2px #000;
	color: #000;
}

.swirl:hover {
	border-color: hsla(0, 0%, 0%, 0.25);
}

.swirl:after,
.swirl:before {
	content: ' ';
	position: absolute;
	animation: swirl 1s linear infinite;
	top: 0;
	left: 0;
}

.swirl:after {
 	transform-origin: 2.98em 2.98em;
 }

.swirl:before {
 	transform-origin: 3.1em 3.1em;
 }
 
 main {
 	width: 80%;
 	margin: 30px auto;
 }
 
 h1 {
	font-weight: normal;
	font-family: Segoe UI Light;
}

dabblet.html

<header>
	<h1>Jordan Gray</h1>
	<nav>
		<a class="swirl">Portfolio</a>
	</nav>
</header>
<main>
	<h1>Heading 1</h1>
	<p>Paragraph text. <strong>Bold text.</strong>
</main>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}