Something something switching to sass

css/scss/_body.scss

@@ -0,0 +1,117 @@
+/*
+ |-------------------------------------------------------------
+ | INDEX
+ |-------------------------------------------------------------
+*/
+.info-text {
+	margin: 1rem 0; padding: 0;
+
+	text-align: center;
+
+	h1 {
+		font-family: $font-header;
+
+		margin-top: 0.5rem;
+		margin-bottom: 1rem;
+	}
+	p {
+		font-family: $font-body;
+
+		margin-top: 0;
+		margin-bottom: 1rem;
+	}
+}
+
+.gallery-root {
+	padding: 0.25rem;
+  
+	background-color: $bg; color: $fg;
+
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+  
+	border: 0.2rem solid $green;
+  
+	border-radius: $rad;
+	box-shadow: $shadow;
+}
+
+.gallery-item {
+	margin: 0.25rem; padding: 0;
+  
+	height: auto; max-width: calc(33.33% - 0.5rem);
+  
+	background-color: $bg;
+	border-radius: $rad;
+  
+	position: relative;
+  
+	flex: 1 0 150px;
+  
+	transition: transform 0.15s cubic-bezier(.19,1,.22,1);
+
+	&:hover {
+		transform: scale(1.1) rotate(5deg);
+		box-shadow: $shadow;
+	  
+		z-index: 999;
+	}
+
+	&:after {
+		content: "";
+		display: block;
+		padding-bottom: 100%;
+	}
+}
+
+.gallery-image {
+	margin: 0; padding: 0;
+  
+	width: 100%; height: 100%;
+  
+	top: 0; bottom: 0; left: 0; right: 0;
+  
+	position: absolute;
+  
+	object-fit: cover;
+	object-position: center;
+  
+	border-radius: $rad;
+}
+
+/*
+ |-------------------------------------------------------------
+ | IMAGE
+ |-------------------------------------------------------------
+*/
+.image-container {
+	margin: 1rem 0 2rem 0; padding: 0;
+
+	width: 100%;
+	max-height: 69vh; height: auto;
+
+	display: flex;
+  
+	background-color: $bg;
+	backdrop-filter: blur(8px);
+  
+	border-radius: $rad;
+  
+	transition: max-height 0.15s cubic-bezier(.19,1,.22,1);
+}
+
+@media (max-width: 600px) {
+	.image-container {
+		max-height: 42vh !important;
+	}
+}
+  
+.image {
+	margin: 0 auto;
+
+	max-width: 100%; width: auto;
+	max-height: inherit; height: auto;
+
+	border-radius: $rad;
+}

css/scss/_footer.scss

@@ -0,0 +1,22 @@
+footer {
+	@include defaultDecoration($page-accent);
+	@include flexLeft(space-around);
+
+	margin: 0 auto !important;
+
+	bottom: 0;
+
+	width: calc(100% - 1.4rem);
+	
+	a {
+		margin: 0.5rem;
+
+		text-decoration: none;
+
+		font-family: $font-body;
+
+		&:hover {
+			color: $orange;
+		}
+	}
+}

css/scss/_mixin.scss

@@ -0,0 +1,30 @@
+@mixin defaultDecoration($border) {
+	width: calc(100% - 2.4rem);
+	
+	padding: 0.5rem;
+
+	background-color: $bg; color: $fg;
+
+	border-radius: $rad;
+
+    border: 0.2rem solid $border;
+
+	box-shadow: $shadow;
+}
+
+@mixin flexDown($justify) {
+	display: flex;
+
+	flex-direction: column;
+
+	justify-content: $justify;
+}
+@mixin flexLeft($justify) {
+	display: flex;
+
+	flex-direction: row;
+
+	flex-wrap: wrap;
+
+	justify-content: $justify;
+}

css/scss/_navigation.scss

@@ -0,0 +1,84 @@
+nav {
+	@include defaultDecoration($page-accent);
+	@include flexLeft(space-between);
+
+	margin: 0 auto 1rem;
+
+	width: calc(100% - 1.4rem); height: 2.5rem;
+
+	position: sticky; z-index: 99;
+	top: 1rem;
+
+	align-items: center;
+	vertical-align: middle;
+
+	p {
+		margin: 0;
+		vertical-align: middle;
+	}
+	hr {
+		margin: 0.5rem 0.2rem; padding: 0;
+		opacity: 0;
+	}
+}
+
+.nav-name {
+	@include flexLeft(space-around);
+
+	margin: 0;
+
+	font-family: $font-header;
+  
+	font-size: 22px;
+  
+	display: block;
+}
+.nav-links {
+	@include flexLeft(space-around);
+
+	font-family: $font-body;
+
+	width: auto;
+}
+
+@media (max-width: 800px) {
+	.nav-name {
+		display: none;
+	}
+	.nav-links {
+		width: 100%;
+	}
+}
+
+@media (max-width: 550px) {
+	nav {
+		margin: 0;
+  
+		width: calc(100% - 1rem);
+  
+		position: fixed;
+		top: auto; bottom: 0; left: 0; right: 0;
+  
+		background-color: $bg;
+		backdrop-filter: blur(8px);
+  
+		border: none;
+		border-top: 3px solid $green;
+		border-radius: 0;
+  
+		backdrop-filter: blur(16px);
+	}
+	.nav-hide {
+		display: none;
+	}
+  
+	.info-text {
+		text-align: left !important;
+	}
+	footer {
+		margin-bottom: calc(5rem + 3px) !important;
+	}
+	#back-to-top {
+		bottom: 5rem !important;
+	}
+}

css/scss/_variables.scss

@@ -0,0 +1,44 @@
+$bg: #151515;
+$bg-alt: #151515bb;
+
+$fg: #E8E3E3;
+$fg-alt: #151515;
+
+$red: #B66467;
+$orange: #FF7700;
+$green: #8C977D;
+$black: #151515;
+$white: #E8E3E3;
+
+$page-accent: #8C977D;
+
+$shadow: 6px 6px 2px #15151588;
+$rad: 0;
+
+$weight-bold: 621;
+$weight-normal: 400;
+
+$font-header: 'Lexend Deca', sans-serif;
+$font-body: 'Secular One', sans-serif;
+
+// Fallback for items that do not yet support the new sass stylesheet system
+:root {
+    --bg: #151515bb;
+    --bg-1: #242621;
+    --bg-2: #1D1E1C;
+    --bg-3: #151515;
+  
+    --fg:#E8E3E3;
+    --fg-dark: #151515;
+  
+    --red: #B66467;
+    --orange: #FF7700;
+    --green: #8C977D;
+    --black: #151515;
+    --white: #E8E3E3;
+  
+    --shadow: 6px 6px 2px #15151588;
+    --rad: 0px;
+  
+    --square: 33.33%;
+  }