new style

public/css/styles.css

@@ -1,3 +1,8 @@
+:root {
+	--prim-red:  #0075FF;
+	--prim-blue: #0075FF;
+}
+
 html {
 	padding: 0;
 	margin: 0;
@@ -37,8 +42,11 @@ p {
 }
 
 a {
-	text-decoration: none;
-	color: #0075FF;
+	color: var(--prim-red);
+	font-weight: 200;
+	padding: 5px;
+	filter: drop-shadow(0 0 0.25rem var(--prim-red));
+	text-decoration: underline;
 }
 
 hr {
@@ -48,7 +56,7 @@ hr {
 	margin: 0;
 	padding: 0;
 	border: 0;
-	border-top: thin solid #0075FF;
+	border-top: thin solid var(--prim-red);
 }
 
 #socials {
@@ -139,7 +147,7 @@ hr {
 	border: 1px solid;
 	text-align: center;
 	/* font-family: 'Syne Mono', monospace; */
-	color: #0075FF;
+	color: var(--prim-red);
 	cursor: pointer;
 }
 
@@ -157,7 +165,7 @@ hr {
 	font-size: 30px;
 	font-family: 'JetBrains', monospace;
 	font-weight: 300;
-	color: #0075FF;
+	color: var(--prim-red);
 	display: flex;
 	flex-direction: row;
 	gap: 20px;
@@ -297,7 +305,7 @@ hr {
 	display: flex;
 	flex-direction: row;
 	gap: 20px;
-	color:#0075FF;
+	color:var(--prim-red);
 }
 
 #main-container-article {
@@ -313,7 +321,7 @@ hr {
 	font-size: 26px;
 	width: 60%;
 	line-height: 40px;
-	color:#0075FF;
+	color:var(--prim-red);
 }
 
 #hyperlink-container {
@@ -335,7 +343,7 @@ hr {
 	flex-direction: row;
 	gap: 20px;
 	width: fit-content;
-	border-color: #0075FF;
+	border-color: var(--prim-red);
 	background-size: cover; /* or contain, depending on your preference */
 	background-repeat:repeat;
 	border-radius: 30px;
@@ -343,10 +351,10 @@ hr {
 	padding-left: 25px;
 	padding-right: 25px;
 	font-family: 'JetBrains', monospace;
-	border: 1px solid;
+	/*border: 1px solid;
 	/* font-family: 'Syne Mono', monospace; */
-	color: #0075FF;
-	background-color: #ffffff95;
+	color: var(--prim-red);
+	background-color: var(--prim-red);
 }
 
 .hyperlink-home {
@@ -354,18 +362,17 @@ hr {
 	flex-direction: row;
 	gap: 20px;
 	width: fit-content;
-	border-color: #0075FF;
+	border-color: var(--prim-red);
 	background-size: cover; /* or contain, depending on your preference */
 	background-repeat:repeat;
 	font-family: 'JetBrains', monospace; 
 	text-decoration: underline;
 	
-	color: #ffffff;
-	background-color: #0075FF;
+	color: var(--prim-red);
+	/* background-color:var(--prim-red); */
 	font-size: 40px;
 	font-weight: 300;
 	padding: 5px;
-	filter: drop-shadow(0 0 0.25rem black);
 }
 
 .hyperlink-header {
@@ -373,14 +380,14 @@ hr {
 	flex-direction: row;
 	gap: 20px;
 	width: fit-content;
-	background-color: #0075FF;
+	background-color: var(--prim-red);
 	background-size: cover; /* or contain, depending on your preference */
 	background-repeat:repeat;
 	padding: 10px;
 	padding-left: 25px;
 	padding-right: 25px;
 	color: white;
-	border-color: #0075FF;
+	border-color:var(--prim-red);
 	font-family: 'JetBrains', monospace;
 	text-transform: uppercase;
 }
@@ -390,7 +397,7 @@ hr {
 }
 
 .active-page {
-	color: #0075FF;
+	color: var(--prim-red);
 	background-color: white;
 	border: 1px solid;
 }
@@ -462,7 +469,7 @@ hr {
 
 .list-title {
 	font-size: 20px;
-	color: #0075FF;
+	color: var(--prim-red);
 	font-weight: 500;
 	font-family: 'JetBrains', monospace
 }
@@ -504,7 +511,7 @@ hr {
 	font-size: 36px;
 	text-transform: uppercase;
 	font-weight: 700;
-	color: #0075FF;
+	color: var(--prim-red);
 	text-decoration: underline;
 }
 
@@ -517,7 +524,7 @@ hr {
 	font-size: 20px;
 	gap: 20px;
 	height: fit-content;
-	color: #0075FF;
+	color: var(--prim-red);
 	align-items: start;
 	overflow-x: scroll;
 	overflow-y: hidden;
@@ -558,7 +565,7 @@ hr {
 }
 
 #article-sep {
-	color: #0075FF;
+	color: var(--prim-red);
 }
 
 #article-container {
@@ -628,7 +635,7 @@ hr {
 #article-title {
 	font-size: 25px;
 	font-family: 'JetBrains', monospace;
-	color: #0075FF;
+	color: var(--prim-red);
 	text-transform: uppercase;
 	display: flex;
 	justify-content: space-between;
@@ -638,7 +645,7 @@ hr {
 	font-size: 25px;
 	padding-top: 20px;
 	font-family: 'Inter', sans-serif;
-	color: #0075FF;
+	color: var(--prim-red);
 	margin-bottom: 50px;
 	width: fit-content;
 	text-transform: uppercase;
@@ -647,7 +654,7 @@ hr {
 
 #article-artists {
 	font-family: 'JetBrains', monospace;
-	color: #0075FF;
+	color: var(--prim-red);
 	text-transform: uppercase;
 }
 
@@ -737,7 +744,7 @@ hr {
 	color: white;
 	width: fit-content;
 	cursor: pointer;
-	background-color: #0075FF;
+	background-color: var(--prim-red);
 	padding: 5px;
 }