Translated the basic style files to scarlet

styles/base.scarlet

@@ -0,0 +1,28 @@
+html
+	height 100%
+
+body
+	font-family "Ubuntu", "Trebuchet MS", sans-serif
+	font-size 1.05rem
+	tab-size 4
+	overflow hidden
+	height 100%
+	color text-color
+
+a
+	color link-color
+	text-decoration none
+	transition all transition-speed ease
+
+	:hover
+		color link-hover-color
+		text-decoration none
+	
+	:active
+		transform translateY(3px)
+
+strong
+	font-weight bold
+
+em
+	font-style italic

styles/config.scarlet

@@ -1 +1,17 @@
-fade-speed = 290ms
+// Colors
+text-color = rgb(60, 60, 60)
+main-color = rgb(248, 165, 130)
+link-color = rgb(245, 126, 76)
+link-hover-color = rgb(242, 93, 30)
+header-color = rgb(60, 60, 60)
+nav-link-color = rgb(160, 160, 160)
+nav-link-hover-color = rgb(255, 255, 255)
+
+// Distances
+content-padding = 1.5rem
+hover-line-size = 2px
+nav-height = 3.11rem
+
+// Timings
+fade-speed = 200ms
+transition-speed = 290ms

styles/content.scarlet

@@ -0,0 +1,5 @@
+#content
+	display flex
+	flex-flow column
+	padding content-padding
+	line-height 1.7em

styles/grid.scarlet

@@ -0,0 +1,80 @@
+.grid
+	display flex
+	flex-flow row wrap
+	justify-content center
+
+.grid-cell
+	position relative
+	
+	flex-grow 0
+	flex-shrink 0
+
+	width 16vw
+	height 9vw
+	min-width 90px
+	min-height 127px
+	max-width 200px
+	max-height 282px
+	border-radius 3px
+
+	background-size cover
+	background-position 50% 50%
+
+	margin 0.5rem
+
+	:hover
+		.backside-card
+			transform rotateY(180deg)
+			
+			.front
+				opacity 0
+			.back
+				opacity 1
+
+.backside-card
+	width 100%
+	height 100%
+	transition all transition-speed ease-in-out
+
+.front
+	position absolute
+	left 0
+	top 0
+	opacity 1
+	transition opacity transition-speed ease
+
+.back
+	position absolute
+	left 0
+	top 0
+	opacity 0
+	transition opacity transition-speed ease
+	transform rotateY(180deg)
+
+.grid-anime
+	border none
+	:hover
+		border none
+
+.grid-text
+	width 100%
+	height 100%
+	display flex
+	flex-flow column
+	align-items center
+	justify-content center
+	font-size 1rem
+	color rgb(160, 160, 160)
+
+.grid-icon
+	font-size 2.5rem
+	margin-top 2rem
+	margin-bottom 0.7rem
+	color link-color
+
+.grid-image
+	width 100%
+	height 100%
+	margin 0
+	border-radius 3px
+	object-fit cover

styles/headers.scarlet

@@ -0,0 +1,14 @@
+h1
+	font-size 3em
+
+h2
+	font-size 2em
+	font-weight bold
+	text-align center
+	line-height 1.2em
+
+h3
+	font-size 1.5em
+	line-height 1.6em
+	text-align left
+	margin-top 0.6em

styles/icons.scarlet

@@ -0,0 +1,2 @@
+i.fa
+	margin-right 0.5em

styles/layout.scarlet

@@ -0,0 +1,12 @@
+#container
+	height 100%
+	display flex
+	flex-flow column
+
+#header
+	background-color header-color
+
+#content-container
+	flex 1
+	overflow-x hidden
+	overflow-y scroll

styles/navigation.scarlet

@@ -0,0 +1,22 @@
+#navigation
+	display flex
+	flex-flow row
+	padding 0 content-padding
+	height nav-height
+	overflow hidden
+
+.navigation-link
+	color nav-link-color
+
+	:hover,
+	&.active
+		color nav-link-hover-color
+		cursor pointer
+
+	&.active
+		text-shadow 1px 1px 3px rgba(4, 4, 4, 0.5)
+
+.navigation-button
+	font-size 1.1em
+	line-height 1em
+	padding 0.75em 1em

styles/old/base.styl

@@ -5,8 +5,7 @@ body
 	font-family "Ubuntu", "Trebuchet MS", sans-serif
 	font-size 1.05rem
 	tab-size 4
-	overflow-x hidden
-	overflow-y hidden
+	overflow hidden
 	height 100%
 
 a

styles/old/navigation.styl

@@ -1,9 +1,7 @@
 #navigation
 	width 100%
 	height 100%
-	padding 0 contentPadding
-	margin 0 auto
-	z-index 0
+	padding 0 content-padding
 	box-sizing border-box
 
 .navigation-link
@@ -18,7 +16,7 @@
 		margin-top 0
 		height 3px
 		width 0px
-		transition all transitionSpeed ease
+		transition all transition-speed ease
 	&.active
 	&:hover
 		cursor pointer
@@ -30,5 +28,4 @@
 .navigation-button
 	padding 0.75em 1em
 	font-size 1.1em
-	line-height 1em
-	// transition all transitionSpeed ease
+	line-height 1em

styles/old/video.styl

@@ -1,5 +1,4 @@
 .video-container
-	float left
 	width 100%
 
 .video

styles/typography.scarlet

@@ -0,0 +1,8 @@
+p, h1, h2, h3, h4, h5, h6
+	margin 0.4em 0
+
+	:first-child
+		margin-top 0
+
+	:last-child
+		margin-bottom 0

styles/video.scarlet

@@ -0,0 +1,6 @@
+.video-container
+	width 100%
+
+.video
+	width 100%
+	height calc(100vh - nav-height)