initial commit

public_html/functions.js

@@ -0,0 +1,271 @@
+// Wait for everything to load
+window.onload = function() {
+	// Make sure THREE is available
+	if (typeof THREE === 'undefined') {
+		console.error('THREE.js is not loaded from CDN');
+		
+		// Provide visual feedfront in the container
+		const container = document.getElementById('icosahedron-container');
+		container.innerHTML = '<div style="color: red; padding: 10px;">THREE.js not loaded</div>';
+		return;
+	}
+	
+	// Initialize the scene
+	const container = document.getElementById('icosahedron-container');
+	const containerWidth = container.clientWidth;
+	const containerHeight = container.clientHeight;
+	
+	// Setup renderer
+	const renderer = new THREE.WebGLRenderer({ 
+		antialias: true, 
+		alpha: true 
+	});
+	renderer.setSize(containerWidth, containerHeight);
+	renderer.setPixelRatio(window.devicePixelRatio);
+	renderer.setClearColor(0x000000, 0); // Transparent frontground
+	container.appendChild(renderer.domElement);
+	
+	// Setup scene
+	const scene = new THREE.Scene();
+	
+	// Setup camera
+	const camera = new THREE.PerspectiveCamera(26, containerWidth / containerHeight, 0.1, 100);
+	camera.position.z = 4;
+	
+	// Create icosahedron with manually defined vertices
+	function createIcosahedron(radius) {
+		// Golden ratio for icosahedron vertices
+		const t = (1 + Math.sqrt(5)) / 2;
+		
+		// Normalize radius
+		const normRadius = radius / Math.sqrt(1 + t * t);
+		
+		// Create vertices
+		const vertices = [
+			[-1, t, 0], [1, t, 0], [-1, -t, 0], [1, -t, 0],
+			[0, -1, t], [0, 1, t], [0, -1, -t], [0, 1, -t],
+			[t, 0, -1], [t, 0, 1], [-t, 0, -1], [-t, 0, 1]
+		].map(v => new THREE.Vector3(v[0] * normRadius, v[1] * normRadius, v[2] * normRadius));
+		
+		// Define edges (pairs of vertex indices)
+		const edges = [
+			[0, 11], [0, 5], [0, 1], [0, 7], [0, 10],
+			[1, 5], [1, 7], [1, 8], [1, 9],
+			[2, 3], [2, 4], [2, 6], [2, 10], [2, 11],
+			[3, 4], [3, 6], [3, 8], [3, 9],
+			[4, 5], [4, 9], [4, 11],
+			[5, 9], [5, 11],
+			[6, 7], [6, 8], [6, 10],
+			[7, 8], [7, 10],
+			[8, 9], /*[8, 10],*/
+			/*[9, 11],*/ [10, 11]
+		];
+		
+		return {
+			vertices: vertices,
+			edges: edges
+		};
+	}
+	
+	// Convert vertex indices to actual vertices and create a line
+	function createLine(icosa, edgeIndex, material) {
+		const startIndex = icosa.edges[edgeIndex][0];
+		const endIndex = icosa.edges[edgeIndex][1];
+		
+		const geometry = new THREE.BufferGeometry();
+		const positions = new Float32Array([
+			icosa.vertices[startIndex].x, icosa.vertices[startIndex].y, icosa.vertices[startIndex].z,
+			icosa.vertices[endIndex].x, icosa.vertices[endIndex].y, icosa.vertices[endIndex].z
+		]);
+		
+		geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+		
+		return new THREE.Line(geometry, material);
+	}
+	
+	// Function to create the dual line rendering (thin back lines, thick front lines)
+	function createDualLineRendering(radius) {
+		const group = new THREE.Group();
+		const icosa = createIcosahedron(radius);
+		
+		// Create materials
+		const backMaterial = new THREE.MeshBasicMaterial({
+			color: 0x63a8b8, // green for back lines
+			depthTest: false, // Don't test depth for back lines
+			transparent: true,
+			opacity: 0.4,
+			side: THREE.DoubleSide
+		});
+		
+		const frontMaterial = new THREE.MeshBasicMaterial({
+			color: 0xffffff, // white for front lines
+			transparent: true,
+			depthTest: true, // Use depth test for front lines
+			side: THREE.DoubleSide
+		});
+		
+		// For each edge, create:
+		// 1. A thin cylindrical tube with back material that ignores depth
+		// 2. A cylindrical tube with front material that uses depth testing
+		const backRadius = 0.03; // thin for back lines
+		const frontRadius = 0.035;  // thick for front lines
+		
+		icosa.edges.forEach((edge, index) => {
+			const start = icosa.vertices[edge[0]];
+			const end = icosa.vertices[edge[1]];
+			
+			// Create back line (thick)
+			const backLine = createCylinderBetweenPoints(start, end, backRadius, 1, backMaterial);
+			backLine.renderOrder = 1; // Render after front lines
+			group.add(backLine);
+			
+			// Create front line (thin)
+			const frontLine = createCylinderBetweenPoints(start, end, frontRadius, 0.95, frontMaterial);
+			frontLine.renderOrder = 3; // Render before back lines
+			group.add(frontLine);
+		});
+		
+		// Create faces for depth testing (invisible)
+		const faceMaterial = new THREE.MeshBasicMaterial({
+			color: 0xffffff,
+			transparent: true,
+			opacity: 0,
+			depthWrite: true,
+			side: THREE.DoubleSide
+		});
+		
+		// Create faces for internal icosahedron
+		const internalMaterial = new THREE.MeshBasicMaterial({
+			color: 0x63a8b8,
+			depthTest: false,
+			transparent: true,
+			opacity: 0.2,
+			side: THREE.DoubleSide
+		});
+		
+		// Define faces of icosahedron (each is a triangle of vertex indices)
+		const faces = [
+			[0, 11, 5], [0, 5, 1], [0, 1, 7], [0, 7, 10], [0, 10, 11],
+			[1, 5, 9], [5, 11, 4], [11, 10, 2], [10, 7, 6], [7, 1, 8],
+			[3, 9, 4], [3, 4, 2], [3, 2, 6], [3, 6, 8], [3, 8, 9],
+			[4, 9, 5], [2, 4, 11], [6, 2, 10], [8, 6, 7], [9, 8, 1]
+		];
+		
+		// Create invisible faces for depth testing
+		faces.forEach(face => {
+			const geometry = new THREE.BufferGeometry();
+			const positions = new Float32Array([
+				icosa.vertices[face[0]].x, icosa.vertices[face[0]].y, icosa.vertices[face[0]].z,
+				icosa.vertices[face[1]].x, icosa.vertices[face[1]].y, icosa.vertices[face[1]].z,
+				icosa.vertices[face[2]].x, icosa.vertices[face[2]].y, icosa.vertices[face[2]].z
+			]);
+			
+			geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+			
+			const faceMesh = new THREE.Mesh(geometry, faceMaterial);
+			faceMesh.scale.set(0.95,0.95,0.95);
+			faceMesh.renderOrder = 0; // Render first for depth buffer
+			group.add(faceMesh);
+			
+			const internalMesh1 = new THREE.Mesh(geometry, internalMaterial);
+			const internalMesh2 = new THREE.Mesh(geometry, internalMaterial);
+			const internalMesh3 = new THREE.Mesh(geometry, internalMaterial);
+			const internalMesh4 = new THREE.Mesh(geometry, internalMaterial);
+			const internalMesh5 = new THREE.Mesh(geometry, internalMaterial);
+			internalMesh1.scale.set(0.85,0.85,0.85);
+			internalMesh1.renderOrder = 1; // Render between front and back
+			group.add(internalMesh1);
+			internalMesh2.scale.set(0.65,0.65,0.65);
+			internalMesh2.renderOrder = 1; // Render between front and back
+			group.add(internalMesh2);
+			internalMesh3.scale.set(0.5,0.5,0.5);
+			internalMesh3.renderOrder = 1; // Render between front and back
+			group.add(internalMesh3);
+			internalMesh4.scale.set(0.4,0.4,0.4);
+			internalMesh4.renderOrder = 1; // Render between front and back
+			group.add(internalMesh4);
+			internalMesh5.scale.set(0.3,0.3,0.3);
+			internalMesh5.renderOrder = 1; // Render between front and back
+			group.add(internalMesh5);
+		});
+		
+		return group;
+	}
+	
+	// Function to create a cylinder between two points
+	function createCylinderBetweenPoints(pointX, pointY, radius, lengthmultiplier, material) {
+		// Direction from pointX to pointY
+		const direction = new THREE.Vector3().subVectors(pointY, pointX);
+		const length = direction.length();
+		
+		// Create cylinder
+		const geometry = new THREE.CylinderGeometry(radius, radius, length*lengthmultiplier, 5, 1);
+		
+		// By default, cylinder is along Y-axis, so rotate it
+		geometry.rotateX(Math.PI / 2);
+		
+		// Create mesh
+		const cylinder = new THREE.Mesh(geometry, material);
+		
+		// Position and orient cylinder
+		const midpoint = new THREE.Vector3().addVectors(pointX, pointY).multiplyScalar(0.5);
+		cylinder.position.copy(midpoint);
+		cylinder.lookAt(pointY);
+		
+		return cylinder;
+	}
+	
+	// Create our icosahedron
+	const icosahedronGroup = createDualLineRendering(0.85);
+	scene.add(icosahedronGroup);
+	
+	// Animation state
+	let animating = true;
+	
+	// Animation function
+	function animate() {
+		requestAnimationFrame(animate);
+		
+		// Rotate if animation is enabled
+		if (animating) {
+			icosahedronGroup.rotation.x -= 0.002;
+			icosahedronGroup.rotation.y += 0.004;
+			icosahedronGroup.rotation.z -= 0.001;
+		}
+		
+		// Render
+		renderer.render(scene, camera);
+	}
+	/* 
+	// Set up controls
+	const toggleAnimationBtn = document.getElementById('toggle-animation');
+	const resetRotationBtn = document.getElementById('reset-rotation');
+	
+	toggleAnimationBtn.addEventListener('click', function() {
+		animating = !animating;
+		this.textContent = animating ? 'Pause' : 'Resume';
+	});
+	
+	resetRotationBtn.addEventListener('click', function() {
+		icosahedronGroup.rotation.set(0, 0, 0);
+	});
+	*/
+	
+	// Start animation
+	animate();
+	
+	// Handle window resize
+	window.addEventListener('resize', function() {
+		// Only update if container dimensions change
+		const newWidth = container.clientWidth;
+		const newHeight = container.clientHeight;
+		
+		if (newWidth !== containerWidth || newHeight !== containerHeight) {
+			camera.aspect = newWidth / newHeight;
+			camera.updateProjectionMatrix();
+			renderer.setSize(newWidth, newHeight);
+		}
+	});
+	
+	console.log('Icosahedron wireframe created successfully');
+};

public_html/index.html

@@ -0,0 +1,119 @@
+<!doctype html>
+
+<head id="www-lastfuture-de">
+	<meta charset="utf-8">
+	
+	<title>lastfuture</title>
+	
+	<meta name="description" content="personal website" />
+	<meta name="author" content="▧" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+	<link rel="stylesheet" href="style.css" />
+	
+	<script src="js/three.min.js"></script>
+	<script src="functions.js" defer></script>
+
+</head>
+
+<body>
+	
+	<div id="base" class="headlineshadow">
+
+		<header>
+			<div id="greeting">
+				<!-- <img class="avatar" src="img/avatar.png" width="90" height="73" alt="alina marquardt" /> -->
+				<div id="icosahedron-container" class="avatar"></div>
+				<span class="line1">hello!</span>
+				<span class="line2">my name is</span>
+				<span class="line3">alina marquardt</span>
+			</div>
+		</header>
+		<aside>
+			<section class="iam">
+				<span class="line1">i am a senior</span>
+				<a class="line2" href=""><em>UX/UI designer</em></a>
+				<span class="line3">&amp; electronic musician</span>
+				<span class="line4">based in germany</span>
+			</section>
+		</aside>
+		<!--
+		<nav>
+			<ul>
+				<li class="music line1"><a href="#music">i make <em>music</em><img class="icon" src="img/nav-music.png" width="17" height="19" alt></a></li>
+				<li class="design line2"><a href="#design">i <em>design</em> things<img class="icon" src="img/nav-design.png" width="12" height="20" alt></a><div class="icon"></div></li>
+				<li class="experiment line3"><a href="#experiment">i <em>experiment<img class="icon" src="img/nav-experiment.png" width="15" height="26" alt></em></a><div class="icon"></div></li>
+			</ul>
+		</nav>
+		-->
+		<aside>
+			<section class="findme">
+			<span class="line1">find me</span>
+				<ul>
+					<li class="line2"><a href="">on <em>bandcamp</em></a></li>
+					<li class="line3"><a href="">on <em>lorem ipsum</em></a></li>
+				</ul>
+			<span class="line4"><a href="">more places »</a></span>
+			</section>
+		</aside>
+	</div>
+	
+	<div id="maincontent">
+	
+		<div class="column">
+	
+			<section class="box" id="music">
+				<header class="blurgreen headlineshadow"><h1>electronic <em>music</em><img class="icon" src="img/head-music.png" width="69" height="77" alt></h1></header>
+				<div class="opaque whitebg">
+					<h2><span class="halfbubble blurgreen"></span>albums</h2>
+					<!--<article>
+						<a href=""><img src="http://dummyimage.com/162/ccc/fff.png" alt="lastfuture - dreamshifter" /></a>
+						lastfuture –
+						<h1>dreamshifter</h1>
+					</article>
+					<article>
+						<a href=""><img src="http://dummyimage.com/162/ccc/fff.png" alt="lastfuture - reverse kill" /></a>
+						lastfuture –
+						<h1>reverse kill</h1>
+					</article>
+					-->
+					<div style="height: 200px;"></div>
+				</div>
+			</section>
+			
+			<section class="box" id="experiment">
+				<header class="blurgreen headlineshadow"><h1><em>experiments</em> box<img class="icon" src="img/head-experiment.png" width="63" height="103" alt></h1></header>
+				<div class="opaque whitebg">
+					<h2><span class="halfbubble blurgreen"></span>video experiments</h2>
+					<h2><span class="halfbubble blurgreen"></span>lorem ipsum</h2>
+				</div>
+			</section>
+			
+		</div>
+		
+		<div class="column">
+		
+			<section class="box invertedbox" id="recent">
+				<header class="headlineshadow whitebg"><h1>most recent <em>albums</em></h1></header>
+				<div class="opaque blurgreen">
+					<h2 class="headlineshadow"><em>track</em></h2>
+					
+				</div>
+			</section>
+		
+			<section class="box" id="design">
+				<header class="blurgreen headlineshadow"><h1><em>design</em> work<img class="icon" src="img/head-design.png" width="46" height="75" alt></h1></header>
+				<div class="opaque whitebg">
+					<h2><span class="halfbubble blurgreen"></span>web</h2>
+					<div style="height: 300px;"></div>
+					<h2><span class="halfbubble blurgreen"></span>apps</h2>
+					<div style="height: 400px;"></div>
+				</div>
+			</section>
+		
+		</div>
+		
+	</div>
+
+</body>
+</html>

public_html/robots.txt

@@ -0,0 +1,4 @@
+# www.robotstxt.org/
+# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449
+
+User-agent: *

public_html/style.css

@@ -0,0 +1,408 @@
+/*
+https://github.com/murtaugh/HTML5-Reset/
+*/
+
+html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent;}
+
+main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}
+
+html {box-sizing: border-box;}
+
+*, *:before, *:after {box-sizing: inherit;}
+
+img {max-width: 100%;}
+
+ul {list-style: none;} /* we'll restore bullets as needed for content */
+
+blockquote, q {quotes: none;}
+
+blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
+
+a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
+
+del {text-decoration: line-through;}
+
+abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
+
+table {border-collapse: separate; border-spacing: 0; text-align: left;}
+th {font-weight: bold; vertical-align: bottom;}
+td {font-weight: normal; vertical-align: top;}
+td img {vertical-align: top;}
+
+hr {display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1rem 0; padding: 0;}
+
+input, select {vertical-align: middle;}
+
+pre {white-space: pre-line;}
+
+input[type="radio"] {vertical-align: text-bottom;}
+input[type="checkbox"] {vertical-align: bottom;}
+
+small {font-size: .8rem;}
+
+strong {font-weight: bold;}
+
+sub, sup {font-size: .8rem; line-height: 0; position: relative;}
+sup {top: -0.5rem;}
+sub {bottom: -0.25rem;}
+
+pre, code, kbd, samp {font-family: monospace, sans-serif;}
+
+label, input[type=button], input[type=submit], input[type=file], button {cursor: pointer;}
+
+button, input, select, textarea {margin: 0;}
+
+ins {background-color: var(--highlight-color); color: #000; text-decoration: none;}
+mark {background-color: var(--highlight-color); color: #000; font-style: italic; font-weight: bold;}
+
+blockquote {padding: 2rem; border-left: 1px solid #333;}
+
+.clearfix:after {content: ""; display: table; clear: both;} /* https://css-tricks.com/snippets/css/clear-fix/ */
+
+h1, h2, h3, h4, h5, h6 {text-wrap: balance}
+
+p {text-wrap: pretty;}
+
+@media (prefers-reduced-motion: no-preference) {
+	:has(:target) {
+		scroll-behavior: smooth;
+	}
+}
+
+/* ———— END THE GENERIC RESETS ———— */
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Source Sans Pro'), url('fonts/SourceSansPro-Regular.woff') format('woff');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Source Sans Pro'), url('fonts/SourceSansPro-It.woff') format('woff');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 200;
+    src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLight.woff') format('woff');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: italic;
+    font-weight: 200;
+    src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLightIt.woff') format('woff');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Source Sans Pro'), url('fonts/SourceSansPro-Light.woff') format('woff');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: italic;
+    font-weight: 300;
+    src: local('Source Sans Pro'), url('fonts/SourceSansPro-LightIt.woff') format('woff');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Source Sans Pro'), url('fonts/SourceSansPro-Semibold.woff') format('woff');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: italic;
+    font-weight: 600;
+    src: local('Source Sans Pro'), url('fonts/SourceSansPro-SemiboldIt.woff') format('woff');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Source Sans Pro'), url('fonts/SourceSansPro-Bold.woff') format('woff');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: italic;
+    font-weight: 700;
+    src: local('Source Sans Pro'), url('fonts/SourceSansPro-BoldIt.woff') format('woff');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 900;
+    src: local('Source Sans Pro'), url('fonts/SourceSansPro-Black.woff') format('woff');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: italic;
+    font-weight: 900;
+    src: local('Source Sans Pro'), url('fonts/SourceSansPro-BlackIt.woff') format('woff');
+}
+
+:root {
+	/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */
+	--font-system: 'Source Sans Pro', system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* https://css-tricks.com/snippets/css/system-font-stack */
+	--text-color: #333;
+	--link-color: #03f;
+	--link-color-hover: #69f;
+	--highlight-color: #fcd700;
+	--placeholder-color: #a9a9a9;
+}
+
+html {
+	font-size: 120%;
+}
+
+body {font-size: 1rem; font-family: var(--font-system);}
+
+a {color: var(--link-color);}
+a:hover {color: var(--link-color-hover);}
+
+body, select, input, textarea {color: var(--text-color);}
+
+/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
+::-moz-selection{background: var(--highlight-color); color: var(--text-color); text-shadow: none;}
+::selection {background: var(--highlight-color); color: var(--text-color); text-shadow: none;} 
+
+/* j.mp/webkit-tap-highlight-color */
+a:link {-webkit-tap-highlight-color: var(--highlight-color);}
+
+ins {background-color: var(--highlight-color); color: var(--text-color); text-decoration: none;}
+mark {background-color: var(--highlight-color); color: var(--text-color); font-style: italic; font-weight: bold;}
+
+/* Mozilla dosen't style place holders by default */
+input:-moz-placeholder { color: var(--placeholder-color); }
+textarea:-moz-placeholder { color: var(--placeholder-color); }
+
+body {
+	background-color: black;
+	background-image: url('img/bg.jpg');
+	background-repeat: no-repeat;
+	background-position: top left;
+	background-attachment: fixed;
+	color: black;
+}
+
+a {
+	text-decoration: none;
+	transition: all 0.2s ease-in-out;
+}
+
+.headlineshadow {
+	text-shadow: 0 2px 1px rgba(0,0,0,1);
+}
+
+#base {
+	width: 400px;
+	position: fixed;
+	color: white;
+}
+
+#base a {
+	color: white;
+}
+
+#maincontent {
+	position: relative;
+	padding: 4.5rem 0 0 21rem;
+}
+
+.column {
+	float: left;
+	width: 550px;
+}
+
+section.box {
+	width: 480px;
+	margin: 0 0 4.5rem 0;
+	position: relative;
+}
+section.box header {
+	height: 60px;
+	padding: 0 0 0 1.25rem;
+	position: relative;
+}
+section.box header h1 {
+	color: white;
+	font-size: 2.125rem;
+	font-weight: 300;
+	text-shadow: 0 2px 1px rgba(0,100,125,1);
+}
+section.invertedbox header h1 {
+	color: #4e8595;
+	text-shadow: none;
+}
+section.box header h1 em, section.invertedbox h2 em {
+	font-style: normal;
+	font-weight: 400;
+}
+
+section.box div.opaque {
+	padding: 1.25rem;
+}
+section.box div.opaque h2 {
+	font-size: 1.6rem;
+	font-weight: 300;
+	margin-bottom: 1rem;
+}
+section.box div.opaque h2 span.halfbubble {
+	height: 22px;
+	width: 11px;
+	border-bottom-right-radius: 11px;
+	border-top-right-radius: 11px;
+	display: inline-block;
+	margin: 0 0.7rem -0.125rem -1.25rem;
+}
+
+section.box header .icon {
+	float: right;
+	margin-right: 1.25rem;
+	margin-top: -1rem;
+}
+
+section.box#experiment header .icon {
+	margin-top: -2.5rem;
+}
+
+/* icosahedron */
+
+#icosahedron-container {
+	width: 95px;
+	height: 95px;
+	position: relative;
+}
+#icosahedron-container canvas {
+	width: 100%;
+	height: 100%;
+}
+
+/* backgrounds */
+
+.whitebg {
+	background-color: white;
+}
+
+.blurgreen {
+	background-color: #437888;
+	background-image: url('img/bg_blur.jpg');
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	color: white;
+}
+
+/* text styling, sizes and spacing */
+
+#base {
+	font-size: 1.125rem;
+	font-style: italic;
+	font-weight: 300;
+}
+#greeting {
+	font-size: 1.75rem;
+	margin-top: 4rem;
+}
+#greeting .avatar{
+	margin-left: 4rem;
+	margin-bottom: 1.2rem;
+}
+#greeting span {
+	display: block;
+	line-height: 1em;
+}
+#greeting .line1 {
+	margin-left: 4.375rem;
+}
+#greeting .line2 {
+	font-weight: 400;
+	line-height: 0.8em;
+	margin-left: 5rem;
+}
+#greeting .line3 {
+	font-weight: 600;
+	line-height: 1.2em;
+	margin-left: 3rem;
+}
+
+#base a {
+	font-size: 1.5rem;
+	display: block;
+	line-height: 1em;
+}
+#base a:hover {
+	text-shadow: 0 0 7px rgba(255,255,255,0.6);
+}
+#base em {
+	font-weight: 600;
+}
+#base .icon {
+	background-repeat: no-repeat;
+}
+
+
+#base section.findme {
+	margin-top: 4.375rem;
+	line-height: 1.1em;
+}
+#base section.findme .line1 {
+	margin-left: 5rem;
+}
+#base section.findme .line2 {
+	margin-left: 3rem;
+}
+#base section.findme .line3 {
+	margin-left: 4.7rem;
+}
+#base section.findme span.line4 a {
+	margin-left: 6.375rem;
+	font-size: 1.125rem;
+}
+
+#base section.iam {
+	margin-top: 2.8rem;
+	line-height: 1.1em;
+}
+#base section.iam .line1 {
+	margin-left: 5.7rem;
+	line-height: 0.9em;
+}
+#base section.iam .line2 {
+	margin-left: 3.3rem;
+	line-height: 1em;
+}
+#base section.iam .line3 {
+	margin-left: 4rem;
+	line-height: 1.1em;
+}
+#base section.iam .line4 {
+	margin-left: 3.4rem;
+}
+
+#base section.iam span {
+	display: block;
+}
+
+
+/* Print styles
+-------------------------------------------------------------------------------*/
+@media print {
+
+
+
+}
+
+
+/* Media queries
+-------------------------------------------------------------------------------*/
+
+@media screen and (max-width: 576px) {
+	
+}
+
+@media print {
+	
+}