updated the 404 whos that pokemon mechanism

src/assets/css/main.scss

@@ -9,6 +9,44 @@
   @media (min-width: 768px) {
     max-width: 95vw;
   }
+  display: grid;
+  place-items: center;
+  //background: #d3d9b3;
+}
+
+.circle {
+  position: relative;
+  width: calc(var(--radius) * 2);
+  height: calc(var(--radius) * 2);
+  margin: 50px auto;
+}
+
+:root {
+  --total: 11;        /* How many items */
+  --radius: 80px;   /* Circle size */
+}
+
+.circle-item {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 50px;
+  height: 50px;
+  margin: -30px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  display: grid;
+  place-items: center;
+  
+  /* This is where the magic happens */
+  --angle: calc(360deg / var(--total) * var(--i));
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+  transform: 
+    rotate(var(--angle))           /* Rotate to position */
+    translateX(var(--radius))      /* Move away from center */
+    rotate(calc(-1 * var(--angle))); /* Rotate back */
 }
 
 // ----------------------
@@ -45,11 +83,6 @@
   cursor: default;
 }
 
-canvas {
-  max-width: 100%;
-  height: 300px;
-}
-
 // ----------------------
 // Navigation Tabs
 // ----------------------
@@ -117,6 +150,10 @@ $tiers: (
   }
 }
 
+.price-area {
+    max-height: 75px;
+}
+
 .card-image {
   aspect-ratio: 23 / 32;
   object-fit: cover;
@@ -131,6 +168,27 @@ $tiers: (
   margin-top: -0.25rem;
 }
 
+.masked-image {
+  z-index: 1000;
+  opacity: 100%;
+  mix-blend-mode: normal;
+}
+
+.starburst {
+  opacity: 10%;
+  mix-blend-mode: lighten;
+  object-fit: cover;
+  background-size: cover;
+} 
+
+.whos-that-pokemon {
+  width: 100%;
+  z-index: 998;
+  opacity: 10%;
+  mix-blend-mode: lighten;
+  aspect-ratio: 1/1;
+}
+
 .energy-icon svg,
 .rarity-icon-large svg,
 .set-icon svg {