update PWA

snipplets/projects/PWA/styles.css

@@ -1,12 +1,24 @@
+:root {
+	--main-color: #b5b5b5;
+	--second-color: #777777;
+	--accent-color: #d6585c;
+	--green-color: #6cd659;
+	--bg-color: #222222;
+	--item-color: #353035;
+	--border-color: #444;
+}
+
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 }
+
 body {
-	background: #fdfdfd;
-	font-family: sans-serif;
-	font-size: 1.2rem;
+	background: var(--bg-color);
+	color: var(--main-color);
+	font-family: 'Samsung Sans', 'Droid Sans', 'Ubuntu', sans-serif;
+	font-size: 1rem;
 }
 
 main {
@@ -20,6 +32,25 @@ nav {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+	border-bottom: 1px solid var(--border-color);
+}
+
+nav a {
+	color: var(--main-color);
+	text-decoration: none;
+	display: block;
+	margin: 16px;
+	transition: color 0.2s;
+}
+
+nav a.active {
+	color: #fff;
+	background-color: rgba(214, 88, 92, 0.3);
+}
+
+nav a:hover {
+	color: #fff;
+	transition: color 0.2s;
 }
 
 ul {
@@ -27,11 +58,11 @@ ul {
 	display: flex;
 }
 
-li {
-	margin-right: 1rem;
+h1,
+.card--title {
+	color: var(--accent-color);
 }
 
-h1 {
-	color: #e74c3c;
-	margin-bottom: 0.5rem;
+.card {
+	margin: 1rem;
 }