Adding companion cube

assets/sass/pages/homepage.scss

@@ -171,7 +171,7 @@
   grid-template-columns: 1fr 1fr;
 
   @include media-up(lg) {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(5, 1fr);
     position: absolute;
     bottom: 5%;
     width: 100%;
@@ -186,6 +186,49 @@
     justify-content: center;
   }
 
+  .nav-cube {
+    width: 106.5px;
+    position: relative;
+
+    &:hover {
+      .nav-cube-text {
+        opacity: 1;
+      }
+    }
+
+    .heart-icon {
+      font-size: 1.5em;
+    }
+
+    .nav-cube-text {
+      position: absolute;
+      display: block;
+      bottom: 0;
+      right: 0;
+      color: white;
+      font-size: 20px;
+      font-weight: bold;
+      z-index: 8000;
+      transform: rotate(-20deg);
+      border: 1px solid #0f0;
+      padding: 2px;
+      padding-left: 5px;
+      padding-right: 5px;
+      border-radius: 5px;
+      background-color: rgba(0, 0, 0, 0.7);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      text-align: center;
+
+      @include media-down(lg) {
+        opacity: 1;
+        //transform: rotate(0deg);
+        bottom: 0;
+        font-size: 14px;
+      }
+    }
+  }
+
   .time-display {
     width: 150px;
     margin: auto;

assets/sass/pages/resources.scss

@@ -186,63 +186,16 @@
   }
 }
 
-// Companion Cube
-.companion-cube {
-  position: fixed;
-  bottom: 40px;
-  right: 40px;
-  width: 80px;
-  height: 80px;
-  background: linear-gradient(
-    135deg,
-    rgba(200, 200, 200, 0.2) 0%,
-    rgba(150, 150, 150, 0.3) 100%
-  );
-  border: 2px solid rgba(200, 200, 200, 0.4);
-  border-radius: 8px;
-  box-shadow:
-    0 10px 30px rgba(0, 0, 0, 0.5),
-    inset 0 0 20px rgba(255, 255, 255, 0.1);
-  transform: rotateX(15deg) rotateY(-15deg);
-  transform-style: preserve-3d;
-  animation: cube-float 4s ease-in-out infinite;
-  position: relative;
+.background-cube {
+  position: absolute;
+  left: 10%;
+  bottom: 10%;
+  width: 150px;
+  z-index: -1;
+  transform: rotate(5deg);
 
-  // Heart symbol in center
-  &::before {
-    content: "♥";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 32px;
-    color: rgba(255, 100, 150, 0.6);
-    text-shadow: 0 0 10px rgba(255, 100, 150, 0.8);
-  }
-
-  // Corner circles
-  &::after {
-    content: "";
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: rgba(200, 200, 200, 0.4);
-    top: 8px;
-    left: 8px;
-    box-shadow:
-      60px 0 0 rgba(200, 200, 200, 0.4),
-      0 60px 0 rgba(200, 200, 200, 0.4),
-      60px 60px 0 rgba(200, 200, 200, 0.4);
-  }
-
-  @include media-up(md) {
-    width: 100px;
-    height: 100px;
-
-    &::before {
-      font-size: 40px;
-    }
+  .heart-icon {
+    font-size: 2em;
   }
 }