1 files changed, 93 insertions, 0 deletions
diff --git a/src/styles/style.scss b/src/styles/style.scss
new file mode 100644
index 0000000..4d730e9
--- /dev/null
+++ b/src/styles/style.scss
@@ -0,0 +1,93 @@
+@import "@catppuccin/palette/scss/_mocha.scss";
+
+a {
+	color: $blue;
+}
+
+body {
+	font-family:
+		Noto Sans,
+		-apple-system,
+		BlinkMacSystemFont,
+		avenir next,
+		avenir,
+		segoe ui,
+		helvetica neue,
+		helvetica,
+		Cantarell,
+		Ubuntu,
+		roboto,
+		noto,
+		arial,
+		sans-serif;
+	color: $text;
+	background-color: $base;
+	max-width: 75%;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 1.5rem;
+
+	@media (min-width: 768px) {
+		max-width: 50%;
+	}
+}
+
+nav {
+	align-items: center;
+	background-color: $surface0;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	margin: auto;
+	padding: 0.5rem;
+
+	a {
+		margin: 0.5rem;
+	}
+
+	@media (min-width: 375px) {
+		a {
+			margin: 0.75rem;
+		}
+	}
+
+	@media (min-width: 768px) {
+		a {
+			margin: 1rem;
+		}
+	}
+
+	@media (min-width: 1024px) {
+		a {
+			font-size: 1.5rem;
+		}
+	}
+}
+
+footer {
+	font-size: 0.6rem;
+	text-align: right;
+
+	@media (min-width: 768px) {
+		font-size: 0.75rem;
+	}
+
+	p {
+		margin: 0.25rem;
+	}
+}
+
+.main-content {
+	padding: 1rem;
+}
+
+.gif-buttons {
+	align-items: center;
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: center;
+}
+
+.gif-button {
+	padding: 0.25rem;
+}