Updated themese and added dark theme

1 files changed, 164 insertions, 72 deletions

diff --git a/CSS/main.css b/CSS/main.css
index 26fc0b0..1f5f27d 100644
--- a/CSS/main.css
+++ b/CSS/main.css
@@ -1,84 +1,176 @@
-/*
- * Color scheme
- * Oxford Blue: #061A40
- * USAFA Blue: #0353A4
- * Honolulu Blue: #006DAA
- * Prussian Blue: #003559
- * Azure X 11 Web Color: #D6E5E3
- */
-@font-face{
-	font-family:IBM Plex Mono;
-	src: url(../fonts/IBMPlexMono-Regular.ttf);
-}
-body, html{
-	height: calc(100% - 2em);
-}
-body{
-	background-color:#D6E5E3;
-	color:#003559;
-	font-family:IBM Plex Mono;
-}
-ul{
-	text-transform:uppercase;
-	margin:0;
-	padding:0;
-	overflow:hidden;
-	background-color:#003559;
-	list-style-type:none;
-}
-li{
-	float:left;
-}
-li a{
-	display:block;
-	color:#D6E5E3;
-	text-align:center;
-	padding:14px 16px;
-	text-decoration:none;
-}
-li a:hover{
-	background-color:#061A40;
-}
-.main{
-	margin:auto;
-}
-.search{
-	padding:12px 20px 12px;
-	width:90%;
-	border-radius:5px;
-	margin-left:auto;
-	margin-right:auto;
-	margin-bottom:15em;
-	color:#003559;
-	background-color:#D6E5E3;
-	font-family:IBM Plex Mono;
-	border-color:#003559;
-
-}
-.icon{
-	font-size:200px;
-	margin-top:10px;
-	margin-bottom:10px;
-}
-@media only screen and (min-width: 1440px){
+@media (prefers-color-scheme: light) {
+	/*
+	 * Color scheme
+	 * Background color: #eaefef
+	 * Main color: #00558e
+	 * Secondary color: #0b3075
+	 */
+	@font-face{
+		font-family:IBM Plex Mono;
+		src: url(../fonts/IBMPlexMono-Regular.ttf);
+	}
+	body, html{
+		height: calc(100% - 2em);
+	}
+	body{
+		background-color:#eaefef;
+		color:#00558e;
+		font-family:IBM Plex Mono;
+	}
+	a{
+		color: #00558e;
+	}
+	ul{
+		text-transform:uppercase;
+		margin:0;
+		padding:0;
+		overflow:hidden;
+		background-color:#00558e;
+		list-style-type:none;
+	}
+	li{
+		float:left;
+	}
+	li a{
+		display:block;
+		color:#eaefef;
+		text-align:center;
+		padding:14px 16px;
+		text-decoration:none;
+	}
+	li a:hover{
+		background-color:#0b3075;
+	}
 	.main{
 		margin:auto;
-		width:60%;
+	}
+	.search{
+		padding:12px 20px 12px;
+		width:90%;
+		border-radius:5px;
+		margin-left:auto;
+		margin-right:auto;
+		margin-bottom:15em;
+		color:#00558e;
+		background-color:#eaefef;
+		font-family:IBM Plex Mono;
+		border-color:#00558e;
+
+	}
+	.icon{
+		font-size:200px;
+		margin-top:10px;
+		margin-bottom:10px;
+	}
+	@media only screen and (min-width: 1440px){
+		.main{
+			margin:auto;
+			width:60%;
+		}
+	}
+	@media only screen and (min-height: 1440px){
+		li a{
+			font-size:36px;
+		}
+		.search{
+			font-size:36px;
+		}
+		.icon{
+			font-size:256px;
+		}
+	}
+	@media only screen and (max-width: 1365px){
+		.desktop{
+			display:none;
+		}
 	}
 }
-@media only screen and (min-height: 1440px){
+
+@media (prefers-color-scheme: dark) {
+	/*
+	 * Color scheme
+	 * Background color: #0D1F22
+	 * Text Color: #eaefef
+	 * Main color: #00558e
+	 * Secondary color: #0b3075
+	 */
+	@font-face{
+		font-family:IBM Plex Mono;
+		src: url(../fonts/IBMPlexMono-Regular.ttf);
+	}
+	body, html{
+		height: calc(100% - 2em);
+	}
+	body{
+		background-color:#0D1F22;
+		color:#eaefef;
+		font-family:IBM Plex Mono;
+	}
+	a{
+		color: #eaefef;
+	}
+	ul{
+		text-transform:uppercase;
+		margin:0;
+		padding:0;
+		overflow:hidden;
+		background-color:#00558e;
+		list-style-type:none;
+	}
+	li{
+		float:left;
+	}
 	li a{
-		font-size:36px;
+		display:block;
+		color:#eaefef;
+		text-align:center;
+		padding:14px 16px;
+		text-decoration:none;
+	}
+	li a:hover{
+		background-color:#0b3075;
+	}
+	.main{
+		margin:auto;
 	}
 	.search{
-		font-size:36px;
+		padding:12px 20px 12px;
+		width:90%;
+		border-radius:5px;
+		margin-left:auto;
+		margin-right:auto;
+		margin-bottom:15em;
+		color:#00558e;
+		background-color:#eaefef;
+		font-family:IBM Plex Mono;
+		border-color:#00558e;
+
 	}
 	.icon{
-		font-size:256px;
+		font-size:200px;
+		margin-top:10px;
+		margin-bottom:10px;
 	}
-}
-@media only screen and (max-width: 1365px){
-	.desktop{
-		display:none;
+	@media only screen and (min-width: 1440px){
+		.main{
+			margin:auto;
+			width:60%;
+		}
+	}
+	@media only screen and (min-height: 1440px){
+		li a{
+			font-size:36px;
+		}
+		.search{
+			font-size:36px;
+		}
+		.icon{
+			font-size:256px;
+		}
+	}
+	@media only screen and (max-width: 1365px){
+		.desktop{
+			display:none;
+		}
 	}
 }