Home page now matches rest of site

Author: wyndchyme

index.html

@@ -113,14 +113,14 @@
   </div>
   <br>
   <br>
-  <div class="didYouKnow" style="margin-top: -35px; border: 2px solid black; outline: 2px solid rgba(255, 255, 255, 0.5); image-rendering: pixelated;">
-      <div class="didYouKnowHeader">Did you know?</div>
+  <div class="didYouKnow" style="margin-top: -35px; image-rendering: pixelated;">
+      <div class="didYouKnowHeader"><img src="/img/gui/oreui/other.png">Did you know?</div>
       <div class="didYouKnowBody">
           <i>Minecraft: New Nintendo 3DS Edition</i> was announced and released on the same day - September 13th, 2017, during a Nintendo Direct.
       </div>
   </div> 
   <div style="position: relative; bottom: 35px; width: calc(70% - 15px); padding-top: 7px; border: 2px solid black; outline: 2px solid rgba(255, 255, 255, 0.5); image-rendering: pixelated;" class="featuredVideo">
-      Featured Video<br>
+      <span class="featuredHeader"><img src="/img/gui/oreui/worlds.png"> Featured Video<br></span>
       <!--wyndchyme was here. Let it be known Pizza has been forgiven for his crimes by providing links for the mods page. Thanks, Pizza.-->
       <iframe src="https://www.youtube.com/embed/qqUPaUAleYs?si=glkFwQhPKF6vMVot" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="display: block; margin: 0 auto;"></iframe>
   </div>

style.css

@@ -219,7 +219,7 @@ body {
 
 .didYouKnow {
     width: 30%;
-    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5)), url(img/bg/netherrack.png);
+    background-color: rgba(181, 207, 255, 0.35);
     background-size: 32px;
     position: absolute;
     right: 0;
@@ -233,14 +233,38 @@ body {
 }
 
 .didYouKnowHeader {
-    color: rgb(255, 214, 202);
-    padding-top: 3px;
-    padding-bottom: 3px;
-    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.1)), url(img/bg/nether_bricks.png);
+    text-align: center;
+    color: white;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    background-color: rgba(255, 255, 255, 0.35);
     background-size: 32px;
     image-rendering: pixelated;
     font-size: 16pt;
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.75);
+    text-indent: 0 !important;
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+}
+
+.didYouKnowHeader img {
+    height: 24px; 
+    width: auto; 
+    flex-shrink: 0; 
+    flex-grow: 0;  
+    image-rendering: pixelated;
+    position: absolute;
+    top: 7px;
+    left: 7px;
+}
+
+.featuredHeader {
+    display: flex;
+    justify-content: left;
+    margin-left: 10px;
+    text-indent: 0;
+    gap: 10px;
 }
 
 @media (max-width: 1000px) {
@@ -258,6 +282,12 @@ body {
     }
 }
 
+@media (max-width: 1200px) {
+    .didYouKnowHeader img {
+        display: none;
+    }
+}
+
 .didYouKnowBody {
     padding-left: 15px;
     padding-right: 15px;
@@ -368,6 +398,12 @@ body {
     .didYouKnowHeader {
         font-size: 14pt !important;
     }
+    .didYouKnowHeader img {
+        display: block;
+        position: absolute;
+        top: 5px;
+        left: 7px;
+    }
     .didYouKnowBody {
         font-size: 17pt !important;
     }