redesign

src/styles/AnimatedBackground.styl

@@ -0,0 +1,4 @@
+.animated-background
+	height 100%
+	width 100%
+	animation all 1s linear

src/styles/App.styl

@@ -0,0 +1,33 @@
+@require './Breakpoints.styl'
+
+#App
+	height 100vh
+	width 100vw
+	display flex
+	align-items center
+	justify-content center
+	perspective 1em
+
+	#bg
+		position absolute
+		left 0
+		top 0
+		width 100vw
+		height 100vh
+		z-index -1
+
+	#letters-wrapper
+		display inline-block
+		text-align center
+		font-size 1em
+		font-weight bold
+		+is-phone()
+			font-size 2.5em
+		+is-tablet()
+			font-size 3em
+		+is-netbook()
+			font-size 3.5em
+		+is-laptop()
+			font-size 4em
+		+is-desktop()
+			font-size 4.5em

src/styles/Breakpoints.styl

@@ -0,0 +1,20 @@
+is-phone()
+	@media (max-width: 599px)
+		{block}
+
+is-tablet()
+	@media (min-width: 600px) {
+		block
+	}
+
+is-netbook()
+	@media (min-width: 900px)
+		{block}
+
+is-laptop()
+	@media (min-width: 1200px)
+		{block}
+
+is-desktop()
+	@media (min-width: 1800px)
+		{block}

src/styles/Footer.styl

@@ -0,0 +1,18 @@
+footer
+	font-family 'Inconsolata', monospace
+	display flex
+	align-items center
+	justify-content center
+	flex-direction column
+	font-size 1.2em
+	position absolute
+	bottom 0
+	left 0
+	text-align center
+	width 100vw
+	padding 1em
+
+	a
+		text-decoration inherit
+		color inherit
+		font-weight bold

src/styles/Letters.styl

@@ -0,0 +1,9 @@
+.letters
+	display inline-block
+	position relative
+	letter-spacing .05em
+
+.letter
+	display inline-block
+	transform-origin 0 0
+	line-height 1em

src/styles/global.styl

@@ -0,0 +1,16 @@
+@import url('https://fonts.googleapis.com/css?family=Raleway')
+@import url('https://fonts.googleapis.com/css?family=Merriweather:300,400,700')
+@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700')
+
+*
+	box-sizing border-box
+	cursor none
+
+html,
+body,
+#root
+	margin 0
+	border 0
+	font-family 'Merriweather', serif
+	font-size 1em
+	overflow hidden