toned down box shadow on previews, aligned border radius between preview images and overlays, increased font size of link on medium+ screens + on hover now decreases opacity

Author: theodoremoreland

application/static/css/style.css

@@ -206,16 +206,15 @@ p {
     overflow: hidden;
 }
 
-#analysis-preview, #docs-preview {
+#analysis-preview,
+#docs-preview {
     --border-radius: 4px;
 
     position: relative;
     height: 100%;
     aspect-ratio: 16/9;
     border-radius: var(--border-radius);
-    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
-        rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
-        rgba(0, 0, 0, 0.07) 0px 16px 16px;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 
     & a {
         z-index: 3;
@@ -253,6 +252,7 @@ p {
         width: 100%;
         background-color: black;
         opacity: 0.4;
+        border-radius: var(--border-radius);
     }
 
     .preview {
@@ -311,11 +311,12 @@ a#dynamic-example {
     @media screen and (min-width: 760px) {
         & {
             right: 2rem;
+            font-size: 1rem;
         }
     }
 }
 
 a#dynamic-example:hover,
 a#dynamic-example:active {
-    filter: brightness(1.35);
+    opacity: 0.8;
 }