added coplay page

enter.js

@@ -300,6 +300,8 @@ function pageSpecificChanges(page){
 		case "coplay":
             topBarColor.style.borderColor = "rgb(146 215 0)";
 			resetIcons();
+			icon = document.getElementById("coplayIcon");
+			icon.style.filter = "saturate(1) brightness(1)";
 			initCarousel();
 			break;
 		default:
@@ -411,9 +413,11 @@ function resetIcons(){
 	dmcrIcon = document.getElementById("dmcrIcon");
 	lfIcon = document.getElementById("lfIcon");
 	tepIcon = document.getElementById("tepIcon");
+	coplayIcon = document.getElementById("coplayIcon");
 	dmcrIcon.style.filter = "saturate(0) brightness(1.6)";
 	lfIcon.style.filter = "saturate(0)";
 	tepIcon.style.filter = "saturate(0)";
+	coplayIcon.style.filter = "saturate(0)";
 };
 
 //mobile scroll physics

index.html

@@ -33,6 +33,8 @@
 				</div>
 				<div class="modIcon" id="tepIcon" onclick="loadPageContents('the_espionage_project');" onmouseover="playSound('./res/hover.mp3')">
 				</div>
+				<div class="modIcon" id="coplayIcon" onclick="loadPageContents('coplay');" onmouseover="playSound('./res/hover.mp3')">
+				</div>
 			</div>
 			<div class="topBarSpacer">
 			</div>

style.css

@@ -17,6 +17,13 @@ h2{
 	/*filter: drop-shadow(0px 0px 4px wheat);*/
 }
 
+h3{
+	font-family: little-pixel;
+	color: #cccccc;
+	font-size: 13px;
+	/*filter: drop-shadow(0px 0px 4px wheat);*/
+}
+
 p{
 	font-family: little-pixel;
 	color: #a9a9a9;
@@ -39,6 +46,10 @@ li{
 	line-height: 15px;
 }
 
+u{
+	text-decoration: none;
+}
+
 iframe{
 	position: relative;
 	z-index: 0;
@@ -276,6 +287,21 @@ iframe{
 	border-image-slice: 5%
 }
 
+#coplayIcon{
+	background-image: url(./res/coplayIcon.webp);
+	filter: saturate(0);
+	border: solid;
+	border-color: transparent;
+}
+
+#coplayIcon:hover{
+	filter: saturate(1)brightness(1) !important;
+	cursor: pointer;
+	border: solid;
+	border-image-source: url('./res/selector.svg');
+	border-image-slice: 5%
+}
+
 @media screen and (max-width: 1053px) {
 	.socialIcon{
 		width: 35px;