test

assets/css/style.css

@@ -902,7 +902,7 @@ html, body {
 /* HERO
 ================================================== */
 .hero { 
-    background: url(../img/Screenshots/mainBackground.webp) no-repeat top / cover;
+    background: url(../img/Screenshots/2024-06-12_13.13.54.png) no-repeat top / cover;
     background-position: center -200px;
     height: 100%;
     width: 100%;
@@ -1422,12 +1422,21 @@ table, th, td {
 
 
 
+.container-box {
+    position: relative;
+    display: inline-block;
+}
+
 .tilted-box {
     width: 300px; /* Set the width of the box */
     height: 200px; /* Set the height of the box */
     border: 5px solid #000; /* Initial border color */
     border-radius: 25px; /* Rounds the corners */
     background-color: transparent; /* Always transparent */
+    background-image: url(../img/other/euphoria_patches\ -\ Copy.png) no-repeat top / cover; /* PNG with transparency */
+    background-size: contain; /* Ensures the image fits inside the box */
+    background-position: center; /* Centers the image */
+    background-repeat: no-repeat; /* Avoids tiling the image */
     transform: rotate(10deg); /* Tilt the box */
     transition: border-color 0.3s ease; /* Smooth transition for the border color on hover */
 }

index.html

@@ -71,10 +71,12 @@
 
     <div id="hero" class="hero subpage-hero">
         <div class="hero-content">
-            <div class="hero-text">
+            <!--<div class="hero-text">
                 <a href="/download" class="btn btn-border">Download</a>
-            </div><!-- /.hero-text -->
-            <div class="tilted-box"></div>
+            </div><!~~ /.hero-text ~~>-->
+            <div class="container-box">
+                <div class="tilted-box"></div>
+            </div>
         </div><!-- /.hero-content -->
 
     </div><!-- /.hero -->