diff --git a/live/index.html b/live/index.html
index d902ed0..618635f 100644
--- a/live/index.html
+++ b/live/index.html
@@ -26,10 +26,10 @@ <h1>Bleeding Edge Web</h1>
     <img src="../images/live.svg" class="live-icon-lg" alt="live">
     <br><br>
     <p>
-      Next meetup is Thurs, June 27th at 7pm CT.
+      Next meetup is Thurs, July 25th at 7pm CT.
     </p>
     <p>
-      <a href="https://expedia.zoom.us/j/91517465047?pwd=md1YZtbGCzr0C5abwX0k3qD7eYz9UI.1" target="_blank">Join
+      <a href="https://expedia.zoom.us/j/96852930841?pwd=aoKwpnNd4uoL5UFKyn0E3MauVghbOc.1" target="_blank">Join
         live</a> once the meetup has begun.
     </p>
   </section>
diff --git a/slides/2024/05-may/index.html b/slides/2024/05-may/index.html
index 30c049c..909a5cc 100644
--- a/slides/2024/05-may/index.html
+++ b/slides/2024/05-may/index.html
@@ -125,7 +125,7 @@ <h2>Other notable releases</h2>
 
     <section data-background-color="#661f34" class="center main-title">
       <h2 style="color:white;">Baseline News</h2>
-      <p class="small"><a href="https://web.dev/baseline">https://web.dev/baseline</a></p>
+      <p class="x-small"><a href="https://web.dev/baseline">https://web.dev/baseline</a></p>
     </section>
 
     <section>
diff --git a/slides/2024/06-june/index.html b/slides/2024/06-june/index.html
index 137eff7..a291373 100644
--- a/slides/2024/06-june/index.html
+++ b/slides/2024/06-june/index.html
@@ -131,7 +131,7 @@ <h2>Other notable releases</h2>
 
     <section data-background-color="#661f34" class="center main-title">
       <h2 style="color:white;">Baseline News</h2>
-      <p class="small"><a href="https://web.dev/baseline">https://web.dev/baseline</a></p>
+      <p class="x-small"><a href="https://web.dev/baseline">https://web.dev/baseline</a></p>
     </section>
 
     <section>
diff --git a/slides/2024/07-july/batman-comics/batman-comic.css b/slides/2024/07-july/batman-comics/batman-comic.css
new file mode 100644
index 0000000..d9d89e1
--- /dev/null
+++ b/slides/2024/07-july/batman-comics/batman-comic.css
@@ -0,0 +1,697 @@
+/**
+ ** Batman-Comic.CSS
+ ** Copyright 2024 Alvaro Montoro (alvaromontoro@gmail.com)
+ **/
+
+@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700');
+
+:where(.batman-comic) {
+    /*-- removed for BEW slide presentation purposes: */
+    /*--size: 1vmin;*/
+
+    font-size: var(--size);
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1vmin;
+    width: 98vmin;
+    margin-bottom: 1em;
+
+    &.four-panels {
+        font-size: calc(var(--size) * 0.8);
+        width: 98vmin;
+        grid-template-columns: repeat(4, 1fr);
+
+        & > section {
+            border: 0.4em solid;
+        }
+    }
+
+    & > .panel,
+    & > section {
+        position: relative;
+        border: 0.5em solid;
+        border-radius: 0.5em;
+        height: 32em;
+        box-sizing: border-box;
+        background: linear-gradient(#c9c6, #c9c0 80%);
+        overflow: hidden;
+
+        &.two {
+            grid-column-end: span 2;
+        }
+
+        &.three {
+            grid-column-end: span 3;
+        }
+
+        &.four {
+            grid-column-end: span 4;
+        }
+
+        & *,
+        & *::before,
+        & *::after {
+            position: absolute;
+            box-sizing: border-box;
+        }
+    }
+
+    .bubble {
+        transform: translateX(-50%);
+        font-size: 1.6em;
+        font-family: 'Comic Neue', 'Comic Sans', 'Comic Sans MS', Helvetica, Arial, sans-serif;
+        text-align: center;
+        text-wrap: balance;
+
+        &::before {
+            --pos: 50%;
+            content: "";
+            width: 2em;
+            height: 3em;
+            border-radius: 0 0 100% 0;
+            border: 0.15em solid;
+            border-top: 0;
+            clip-path: polygon(0.2em 0.2em, 100% 0.2em, 100% 100%, 0.2em 100%);
+            transform: translate(-50%, -0.2em);
+            left: var(--pos);
+            top: 100%;
+        }
+
+        &.short {
+            &::before {
+                height: 2em;
+            }
+        }
+
+        &.tall {
+            &::before {
+                height: 4em;
+            }
+        }
+
+        &.left {
+            &::before {
+                transform: translate(-50%) scaleX(-1);
+            }
+        }
+
+        &.off-panel {
+            &::before {
+                width: 100%;
+                transform: translate(-100%);
+            }
+
+            &.left {
+                &::before {
+                    transform: translate(0%) scaleX(-1);
+                }
+            }
+        }
+    }
+
+    .batman {
+        /* colors */
+        --skin-color: #fca;
+        --mouth-color: #700;
+        --suit-color: #333;
+        --suit-color-dark: #222;
+        --logo-color: #ff5;
+        --logo-color-dark: #dd2;
+        --eye-color: #fff;
+        /* others */
+        --mouth: radial-gradient(farthest-side at 50% 0, var(--mouth-color) 99%, #0000) 50% 90% / 13% 8% no-repeat;
+        --mouth-position: 50%;
+        --mouth-direction: linear-gradient(#0000 0 0);
+        --arms-position: 50%;
+        --arms-width: 54%;
+        --arms-height: 115%;
+        --eye1-size: 8%;
+        --eye2-size: 8%;
+        --eyelids: linear-gradient(#0000 0 0);
+        --extra: linear-gradient(#0000 0 0);
+        --extra-under-mask: linear-gradient(#0000 0 0);
+        --ears:
+                radial-gradient(150% 150% at 10% 36%, var(--suit-color-dark) 5%, #0000 5.25%),
+                radial-gradient(150% 150% at 90% 36%, var(--suit-color-dark) 5%, #0000 5.25%)
+    ;
+        /* modifiers */
+        --rotation: 0deg;
+        width: 19em;
+        height: 22em;
+        background:
+            /* ears */
+                var(--ears),
+                    /* cuello */
+                radial-gradient(var(--suit-color-dark) 20%, #0000 21%),
+                    /* logo */
+                linear-gradient(to top right, var(--suit-color) 50%, #0000 0) 50.5% 74% / 4% 4% no-repeat,
+                linear-gradient(to top left, var(--suit-color) 50%, #0000 0) 49.5% 74% / 4% 4% no-repeat,
+                conic-gradient(from 340deg, var(--suit-color) 40deg, #0000 41deg) 50% 80% / 10% 7% no-repeat,
+                conic-gradient(from 340deg, var(--suit-color) 40deg, #0000 41deg) 47.5% 79% / 10% 5% no-repeat,
+                conic-gradient(from 340deg, var(--suit-color) 40deg, #0000 41deg) 52.5% 79% / 10% 5% no-repeat,
+                radial-gradient(14% 5% at 50% 75%, var(--logo-color) 36% 49%, #0000 50%) 50% 69% / 60% 60% no-repeat,
+                radial-gradient(14% 5% at 50% 75%, var(--logo-color) 36% 49%, #0000 50%) 50% 81.1% / 60% 60% no-repeat,
+                radial-gradient(20% 10% at 50% 75%, var(--suit-color) 35%, var(--logo-color) 36% 49%, #0000 50%),
+                    /* cuerpo */
+                linear-gradient(var(--logo-color-dark) 0 0) 50% 100% / 8% 6% no-repeat,
+                linear-gradient(var(--logo-color-dark) 0 0) 37% 100% / 3% 6% no-repeat,
+                linear-gradient(var(--logo-color-dark) 0 0) 63% 100% / 3% 6% no-repeat,
+                linear-gradient(var(--logo-color) 0 0) 50% 100% / 40% 5% no-repeat,
+                conic-gradient(at 50% -20%, #0000 170deg, var(--suit-color) 170.33deg 189.66deg, #0000 190deg) 50% 100% / 80% 80% no-repeat,
+                    /* brazos */
+                radial-gradient(var(--arms-width) 115% at var(--arms-position) 118%, var(--suit-color-dark) 55%, #0000 55.2%);
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%, 0) rotate(var(--rotation));
+        transform-origin: 50% 100%;
+        box-shadow:
+                0 10em 0 -5.5em var(--suit-color),
+                0 10em 0 -4.1em var(--suit-color-dark);
+
+        &::before {
+            content: "";
+            --rotation: 0deg;
+            width: 17em;
+            height: 12em;
+            background:
+                    var(--extra),
+                        /* eyes */
+                    var(--eyelids),
+                    radial-gradient(circle at 35% 53%, var(--eye-color) var(--eye1-size), #0000 calc(var(--eye1-size) + 0.6%)),
+                    radial-gradient(circle at 65% 53%, var(--eye-color) var(--eye2-size), #0000 calc(var(--eye2-size) + 0.6%)),
+                        /* mask */
+                    linear-gradient(100deg, var(--suit-color) 30%, #0000 30.25%),
+                    linear-gradient(-100deg, var(--suit-color) 30%, #0000 30.25%),
+                    linear-gradient(-181deg, var(--suit-color) 69%, #0000 69.25%),
+                    conic-gradient(from -50deg at 50% 76%, #0000, var(--suit-color) 1deg 99deg, #0000 100deg),
+                        /* extra under mask */
+                    var(--extra-under-mask),
+                        /* mouth */
+                    var(--mouth-direction),
+                    var(--mouth),
+                    var(--skin-color);
+            border-radius: 50% / 20%;
+            top: 5%;
+            left: 50%;
+            transform: translateX(-50%) rotate(var(--rotation));
+            transform-origin: 50% 100%;
+            clip-path: polygon(10% 0, 90% 0, 100% 80%, 100% 100%, 0 100%, 0 80%)
+        }
+
+        &::after {
+            --rotation: 0deg;
+            content: "";
+            width: 17em;
+            height: 25%;
+            left: 50%;
+            top: -8%;
+            transform: translateX(-50%) rotate(var(--rotation));
+            transform-origin: 50% 100%;
+            background:
+                /*     linear-gradient(-120deg, #0000 87%, var(--gray) 88%),
+                linear-gradient(120deg, #0000 87%, var(--gray) 88%), */
+                    conic-gradient(from 160deg at 11% 0, var(--suit-color) 26deg, #0000 27deg) no-repeat,
+                    conic-gradient(from 174deg at 89% 0, #0000, var(--suit-color) 1deg 26deg, #0000 27deg) no-repeat
+        ;
+        }
+
+        &.rotate-head-right {
+            --ears:
+                    radial-gradient(150% 150% at 16% 32%, var(--suit-color-dark) 5%, #0000 5.25%),
+                    radial-gradient(150% 150% at 92.5% 43%, var(--suit-color-dark) 5%, #0000 5.25%)
+        ;
+
+            &::before {
+                --rotation: 10deg;
+                top: 7%;
+            }
+
+            &::after {
+                --rotation: 10deg;
+                left: 59%;
+                top: -6%;
+            }
+        }
+
+        &.rotate-head-left {
+            --ears:
+                    radial-gradient(150% 150% at 7.5% 45%, var(--suit-color-dark) 5%, #0000 5.25%),
+                    radial-gradient(150% 150% at 83% 33%, var(--suit-color-dark) 5%, #0000 5.25%)
+        ;
+
+            &::before {
+                --rotation: -10deg;
+                top: 7%;
+            }
+
+            &::after {
+                --rotation: -10deg;
+                left: 41.5%;
+                top: -6%;
+            }
+        }
+
+        /* general cara */
+        &.blush {
+            --extra-under-mask:
+                    radial-gradient(40% 40% at 30% 50%, #f006, #0000),
+                    radial-gradient(40% 40% at 70% 50%, #f006, #0000);
+        }
+        &.scare {
+            --extra-under-mask:
+                    radial-gradient(40% 40% at 30% 50%, #00f3, #0000),
+                    radial-gradient(40% 40% at 70% 50%, #00f3, #0000);
+        }
+        &.shame {
+            --extra-under-mask:
+                    radial-gradient(40% 40% at 30% 50%, #f006, #0000),
+                    radial-gradient(40% 40% at 70% 50%, #f006, #0000);
+        }
+
+        /* boca */
+        &.mouth-no {
+            --mouth: linear-gradient(#0000 0 0);
+        }
+
+        &.mouth-angry,
+        &.mouth-sad {
+            --mouth: radial-gradient(farthest-side at 50% 100%, var(--mouth-color) 99%, #0000) var(--mouth-position) 90% / 13% 8% no-repeat;
+        }
+
+        &.mouth-talk {
+            --mouth: radial-gradient(farthest-side at 50% 100%, var(--mouth-color) 99%, #0000) var(--mouth-position) 88% / 15% 5% no-repeat;
+        }
+
+        &.mouth-round {
+            --mouth: radial-gradient(circle at var(--mouth-position) 86%, var(--mouth-color) 3%, #0000 4%);
+        }
+
+        &.mouth-whisper {
+            --mouth: radial-gradient(55% 100% at var(--mouth-position) 86%, var(--mouth-color) 3%, #0000 4%);
+        }
+
+        &.mouth-to-right {
+            --mouth-direction: linear-gradient(186deg, #0000 86%, var(--skin-color) 86.5%) var(--mouth-position) 50% / 30% 100% no-repeat;
+        }
+
+        &.mouth-to-left {
+            --mouth-direction: linear-gradient(174deg, #0000 86%, var(--skin-color) 86.5%) var(--mouth-position) 50% / 30% 100% no-repeat;
+        }
+
+        &.mouth-left {
+            --mouth-position: 45%;
+        }
+
+        &.mouth-right {
+            --mouth-position: 55%;
+        }
+
+
+        /* eyes */
+        &.eyes-no {
+            --eye-color: #0000;
+        }
+
+        &.eyes-think {
+            --eyelids: linear-gradient(var(--suit-color) 48%, #0000 0);
+        }
+
+        &.eyes-doubt {
+            --eyelids: linear-gradient(var(--suit-color) 47%, #0000 0 60%, var(--suit-color) 0 70%, #0000 0);
+        }
+
+        &.eyes-sad {
+            --eyelids: conic-gradient(at 50% 45%, var(--suit-color) 105deg, #0000 0 255deg, var(--suit-color) 0);
+        }
+
+        &.eyes-angry {
+            --eyelids: conic-gradient(at 50% 55%, var(--suit-color) 80deg, #0000 0 280deg, var(--suit-color) 0);
+        }
+
+        &.eyes-suspicious {
+            --eyelids: conic-gradient(at 52% 55%, var(--suit-color) 83deg, #0000 0 285deg, var(--suit-color) 0);
+        }
+
+        &.eyes-surprise {
+            --eye1-size: 12%;
+            --eye2-size: 12%;
+        }
+
+        &.eyes-shock {
+            --eye1-size: 9%;
+            --eye2-size: 11%;
+        }
+    }
+
+
+
+    .robin {
+        /* colores */
+        --skin-color: #fca;
+        --skin-color-dark: #da8;
+        --mouth-color: #fff;
+        --suit-color: #f00;
+        --shirt-color: #080;
+        --cape-color: #ff5;
+        --logo-color: #ff5;
+        --logo-color-dark: #000;
+        --eye-color: #fff;
+        --mask-color: #000;
+        --hair-color: #000;
+        /* otros */
+        --mouth:
+                radial-gradient(100% 140% at 50% 0%, var(--mouth-color) 30%, #0000 30.5%) 50% 100% / 30% 22% no-repeat;
+        --mouth-position: 50%;
+        --mouth-direction: linear-gradient(#0000 0 0);
+        --arms-position: 50%;
+        --arms-width: 54%;
+        --arms-height: 115%;
+        --eye1-size: 8%;
+        --eye2-size: 8%;
+        --eyelids: linear-gradient(#0000 0 0);
+        --extra: linear-gradient(#0000 0 0);
+        --extra-under-mask: linear-gradient(#0000 0 0);
+        --ears:
+                radial-gradient(circle at 6% 35%, var(--skin-color-dark) 5%, #0000 5.25%),
+                radial-gradient(circle at 94% 35%, var(--skin-color-dark) 5%, #0000 5.25%);
+        /* modifiers */
+        --rotation: 0deg;
+        --dir: 50%;
+        width: 19em;
+        height: 20em;
+        background:
+            /* ears */
+                var(--ears),
+                    /* cuello */
+                conic-gradient(at 50% 100%, var(--skin-color-dark) 40deg, #0000 42deg 318deg, var(--skin-color-dark) 320deg) var(--dir) 55% / 80% 20% no-repeat,
+                radial-gradient(var(--cape-color) 21%, #0000 21.5%),
+                    /* botones */
+                linear-gradient(90deg, #0000 47%, var(--cape-color) 0 53%, #0000 0) var(--dir) 75% / 80% 2% no-repeat,
+                linear-gradient(90deg, #0000 47%, var(--cape-color) 0 53%, #0000 0) var(--dir) 85% / 80% 2% no-repeat,
+                linear-gradient(90deg, #0000 47%, var(--cape-color) 0 53%, #0000 0) var(--dir) 95% / 80% 2% no-repeat,
+                    /* robin logo */
+                linear-gradient(var(--logo-color) 0 0) 56.75% 77% / 1.5% 7% no-repeat,
+                radial-gradient(farthest-side at 0 50%, #0000 70%, var(--logo-color) 72% 98%, #0000 99.9%) 59.75% 74.75% / 4% 4.5% no-repeat,
+                linear-gradient(45deg, #0000 45%, var(--logo-color) 47% 68%, #0000 70%) 60% 78% / 3% 3% no-repeat,
+                radial-gradient(circle at 58% 75%, var(--logo-color-dark) 4%, #0000 4.5%),
+                    /* cuerpo */
+                conic-gradient(at 50% -20%, #0000 170deg, var(--suit-color) 170.33deg 189.66deg, #0000 190deg) 50% 100% / 80% 80% no-repeat,
+                    /* mangas y brazos */
+                conic-gradient(at 50% 5%, #0000 155deg, var(--shirt-color) 155.5deg 204.75deg, #0000 205deg) 50% 60% / 80% 50% no-repeat,
+                radial-gradient(50% 50% at 50.125% 0, var(--shirt-color) 99%, #0000 99%) 50% 84% / 45% 5% no-repeat,
+                conic-gradient(at 55% -250%, #0000 170deg, var(--skin-color-dark) 170.25deg 193.75deg, #0000 194deg) 50% 100% / 70% 30% no-repeat
+    ;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%, 0) rotate(var(--rotation));
+        transform-origin: 50% 100%;
+        box-shadow:
+                0 7em 0 -6.2em var(--suit-color),
+                0 10em 0 -6.2em var(--suit-color),
+                0 10em 0 -5em var(--skin-color-dark);
+
+        &::before {
+            --rotation: 0deg;
+            content: "";
+            width: 16em;
+            height: 11em;
+            border-radius: 50% / 20%;
+            top: 5%;
+            left: 50%;
+            transform: translateX(-50%) rotate(var(--rotation));
+            background:
+                    var(--extra),
+                        /* eyes + mascara */
+                    var(--eyelids),
+                    radial-gradient(circle at 35% 47%, var(--eye-color) var(--eye1-size), #0000 calc(var(--eye1-size) + 0.5%)),
+                    radial-gradient(circle at 65% 47%, var(--eye-color) var(--eye2-size), #0000 calc(var(--eye2-size) + 0.5%)),
+                    radial-gradient(75% 70% at 30% 45%, var(--mask-color) 30%, #0000 31%),
+                    radial-gradient(75% 70% at 70% 45%, var(--mask-color) 30%, #0000 31%),
+                        /* nariz */
+                    conic-gradient(at 50% 100%, var(--skin-color-dark) 34deg, #0000 36deg 324deg, var(--skin-color-dark) 326deg) 50% 65% / 20% 20% no-repeat,
+                        /* boca */
+                    var(--mouth-direction),
+                    var(--mouth),
+                        /* base */
+                    var(--extra-under-mask),
+                    var(--skin-color);
+        }
+
+        &::after {
+            --rotation: 0deg;
+            content: "";
+            width: 80%;
+            height: 20%;
+            left: 50%;
+            top: 0.4%;
+            transform: translate(-50%, -50%) rotate(var(--rotation));
+            background:
+                    conic-gradient(at 50% 20%, #0000 100deg, var(--hair-color) 101deg 140deg, #0000 142deg),
+                    radial-gradient(100% 100% at 60% 100%, var(--hair-color) 45%, #0000 46%)
+        ;
+            border-radius: 100%;
+            box-shadow: inset -5em -0.5em var(--hair-color);
+        }
+
+        &.rotate-head-right {
+            --ears:
+                    radial-gradient(circle at 12% 25%, var(--skin-color-dark) 5%, #0000 5.25%),
+                    radial-gradient(circle at 94.5% 41%, var(--skin-color-dark) 5%, #0000 5.25%);
+
+            &::before {
+                --rotation: 10deg;
+                top: 4%;
+                left: 55%;
+            }
+
+            &::after {
+                --rotation: 10deg;
+                left: 59%;
+                top: 0%;
+            }
+        }
+
+        &.rotate-head-left {
+            --ears:
+                    radial-gradient(150% 150% at 8% 40%, var(--skin-color-dark) 5%, #0000 5.25%),
+                    radial-gradient(150% 150% at 91% 26%, var(--skin-color-dark) 5%, #0000 5.25%)
+        ;
+
+            &::before {
+                --rotation: -10deg;
+                top: 4%;
+            }
+
+            &::after {
+                --rotation: -10deg;
+                left: 49%;
+                top: -2%;
+            }
+        }
+
+        /* general cara */
+        &.blush {
+            --extra-under-mask:
+                    radial-gradient(40% 40% at 30% 60%, #f002, #f000),
+                    radial-gradient(40% 40% at 70% 60%, #f002, #f000);
+        }
+
+        &.scare {
+            --extra-under-mask:
+                    linear-gradient(#00f3, #f000 40%);
+        }
+
+        &.shame {
+            --extra-under-mask:
+                    radial-gradient(40% 40% at 30% 50%, #f003, #0000),
+                    radial-gradient(40% 40% at 70% 50%, #f006, #0000);
+        }
+
+        /* boca */
+        &.mouth-no {
+            --mouth: linear-gradient(#0000 0 0);
+        }
+
+        &.mouth-angry,
+        &.mouth-sad {
+            --mouth: radial-gradient(farthest-side at 50% 100%, var(--mouth-color) 99%, #0000) var(--mouth-position) 87% / 13% 8% no-repeat;
+        }
+
+        &.mouth-talk {
+            --mouth: radial-gradient(farthest-side at 50% 100%, var(--mouth-color) 99%, #0000) var(--mouth-position) 86% / 14% 6% no-repeat;
+        }
+
+        &.mouth-round {
+            --mouth: radial-gradient(circle at var(--mouth-position) 85%, var(--mouth-color) 3%, #0000 4%);
+        }
+
+        &.mouth-whisper {
+            --mouth: radial-gradient(55% 100% at var(--mouth-position) 84%, var(--mouth-color) 3%, #0000 4%);
+        }
+
+        &.mouth-to-right {
+            --mouth-direction: linear-gradient(186deg, #0000 83%, var(--skin-color) 83.5%) var(--mouth-position) 50% / 30% 100% no-repeat;
+        }
+
+        &.mouth-to-left {
+            --mouth-direction: linear-gradient(174deg, #0000 83%, var(--skin-color) 83.5%) var(--mouth-position) 100% / 30% 90% no-repeat;
+        }
+
+        &.mouth-left {
+            --mouth-position: 45%;
+        }
+
+        &.mouth-right {
+            --mouth-position: 55%;
+        }
+
+
+        /* eyes */
+        &.eyes-no {
+            --eye-color: #0000;
+        }
+
+        &.eyes-think {
+            --eyelids: linear-gradient(var(--mask-color) 48%, #0000 0) 50% 45% / 50% 15% no-repeat;
+        }
+
+        &.eyes-doubt {
+            --eyelids:
+                    linear-gradient(var(--mask-color) 25%, #0000 0 60%, var(--mask-color) 0 70%, #0000 0)  30% 50% / 25% 35% no-repeat,
+                    linear-gradient(var(--mask-color) 25%, #0000 0 60%, var(--mask-color) 0 70%, #0000 0)  70% 50% / 25% 35% no-repeat;
+        }
+
+        &.eyes-sad {
+            --eyelids:
+                    linear-gradient(170deg, var(--mask-color) 35%, #0000 36%)  30% 50% / 25% 35% no-repeat,
+                    linear-gradient(190deg, var(--mask-color) 35%, #0000 36%)  70% 50% / 25% 35% no-repeat;
+        }
+
+        &.eyes-angry {
+            --eyelids:
+                    linear-gradient(190deg, var(--mask-color) 35%, #0000 36%)  30% 50% / 25% 35% no-repeat,
+                    linear-gradient(170deg, var(--mask-color) 35%, #0000 36%)  70% 50% / 25% 35% no-repeat;
+        }
+
+        &.eyes-suspicious {
+            --eyelids:
+                    linear-gradient(185deg, var(--mask-color) 38%, #0000 39%)  30% 50% / 25% 35% no-repeat,
+                    linear-gradient(165deg, var(--mask-color) 32%, #0000 33%)  70% 50% / 25% 35% no-repeat;
+        }
+
+        &.eyes-surprise {
+            --eye1-size: 12%;
+            --eye2-size: 12%;
+        }
+
+        &.eyes-shock {
+            --eye1-size: 9%;
+            --eye2-size: 11%;
+        }
+    }
+
+
+    /* posiciones personajes */
+    .pos-x-0   { left:   0%; }
+    .pos-x-5   { left:   5%; }
+    .pos-x-10  { left:  10%; }
+    .pos-x-15  { left:  15%; }
+    .pos-x-20  { left:  20%; }
+    .pos-x-25  { left:  25%; }
+    .pos-x-30  { left:  30%; }
+    .pos-x-35  { left:  35%; }
+    .pos-x-40  { left:  40%; }
+    .pos-x-45  { left:  45%; }
+    .pos-x-50  { left:  50%; }
+    .pos-x-55  { left:  55%; }
+    .pos-x-60  { left:  60%; }
+    .pos-x-65  { left:  65%; }
+    .pos-x-70  { left:  70%; }
+    .pos-x-75  { left:  75%; }
+    .pos-x-80  { left:  80%; }
+    .pos-x-85  { left:  85%; }
+    .pos-x-90  { left:  90%; }
+    .pos-x-95  { left:  95%; }
+    .pos-x-100 { left: 100%; }
+
+    .pos-line-0   { &::before { left:   0%; } }
+    .pos-line-5   { &::before { left:   5%; } }
+    .pos-line-10  { &::before { left:  10%; } }
+    .pos-line-15  { &::before { left:  15%; } }
+    .pos-line-20  { &::before { left:  20%; } }
+    .pos-line-25  { &::before { left:  25%; } }
+    .pos-line-30  { &::before { left:  30%; } }
+    .pos-line-35  { &::before { left:  35%; } }
+    .pos-line-40  { &::before { left:  40%; } }
+    .pos-line-45  { &::before { left:  45%; } }
+    .pos-line-50  { &::before { left:  50%; } }
+    .pos-line-55  { &::before { left:  55%; } }
+    .pos-line-60  { &::before { left:  60%; } }
+    .pos-line-65  { &::before { left:  65%; } }
+    .pos-line-70  { &::before { left:  70%; } }
+    .pos-line-75  { &::before { left:  75%; } }
+    .pos-line-80  { &::before { left:  80%; } }
+    .pos-line-85  { &::before { left:  85%; } }
+    .pos-line-90  { &::before { left:  90%; } }
+    .pos-line-95  { &::before { left:  95%; } }
+    .pos-line-100 { &::before { left: 100%; } }
+
+    .pos-y-0   { top:   0%; }
+    .pos-y-5   { top:   5%; }
+    .pos-y-10  { top:  10%; }
+    .pos-y-15  { top:  15%; }
+    .pos-y-20  { top:  20%; }
+    .pos-y-25  { top:  25%; }
+    .pos-y-30  { top:  30%; }
+    .pos-y-35  { top:  35%; }
+    .pos-y-40  { top:  40%; }
+    .pos-y-45  { top:  45%; }
+    .pos-y-50  { top:  50%; }
+    .pos-y-55  { top:  55%; }
+    .pos-y-60  { top:  60%; }
+    .pos-y-65  { top:  65%; }
+    .pos-y-70  { top:  70%; }
+    .pos-y-75  { top:  75%; }
+    .pos-y-80  { top:  80%; }
+    .pos-y-85  { top:  85%; }
+    .pos-y-90  { top:  90%; }
+    .pos-y-95  { top:  95%; }
+    .pos-y-100 { top: 100%; }
+
+    .width-0   { width:   0%; }
+    .width-5   { width:   5%; }
+    .width-10  { width:  10%; }
+    .width-15  { width:  15%; }
+    .width-20  { width:  20%; }
+    .width-25  { width:  25%; }
+    .width-30  { width:  30%; }
+    .width-35  { width:  35%; }
+    .width-40  { width:  40%; }
+    .width-45  { width:  45%; }
+    .width-50  { width:  50%; }
+    .width-55  { width:  55%; }
+    .width-60  { width:  60%; }
+    .width-65  { width:  65%; }
+    .width-70  { width:  70%; }
+    .width-75  { width:  75%; }
+    .width-80  { width:  80%; }
+    .width-85  { width:  85%; }
+    .width-90  { width:  90%; }
+    .width-95  { width:  95%; }
+    .width-100 { width: 100%; }
+
+    .rotate-0   { --rotation:   0deg; }
+    .rotate-5   { --rotation:   5deg; }
+    .rotate-10  { --rotation:  10deg; }
+    .rotate-15  { --rotation:  15deg; }
+    .rotate-20  { --rotation:  20deg; }
+    .rotate-25  { --rotation:  25deg; }
+    .rotate-30  { --rotation:  30deg; }
+    .rotate--5  { --rotation:  -5deg; }
+    .rotate--10 { --rotation: -10deg; }
+    .rotate--15 { --rotation: -15deg; }
+    .rotate--20 { --rotation: -20deg; }
+    .rotate--25 { --rotation: -25deg; }
+    .rotate--30 { --rotation: -30deg; }
+}
\ No newline at end of file
diff --git a/slides/2024/07-july/batman-comics/index.html b/slides/2024/07-july/batman-comics/index.html
new file mode 100644
index 0000000..39eec7f
--- /dev/null
+++ b/slides/2024/07-july/batman-comics/index.html
@@ -0,0 +1,60 @@
+<html>
+<head>
+  <link rel="stylesheet" href="batman-comic.css">
+  <style>
+    body {
+      background: #000000;
+      margin: 30px 50px;
+      font-family: "Source Sans Pro", Helvetica, sans-serif;
+    }
+    h1 {
+      font-size: 2.5em;
+      color: #E91E63;
+    }
+    a, a:visited {
+      color: #42affa;
+      text-decoration: underline dotted #1c4968;
+      text-decoration-thickness: 2px;
+      text-underline-offset: 5px;
+    }
+    a:hover {
+      text-decoration-style: solid;
+      text-decoration-color: #E91E63;
+    }
+    section {
+        background: linear-gradient(#ffffff, #769db3 100%);
+        border-color: #777777;
+        font-weight: bold;
+    }
+    p.ref {
+        color: #ffffff;
+        font-size: 1.3em;
+        margin-top: 30px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Batman-Comic.css Demo</h1>
+
+  <article class="batman-comic">
+    <section style="width: 400px;">
+      <div class="bubble pos-x-60 pos-y-5 width-70 short">
+        Greetings, Bleeding Edge Web!
+      </div>
+      <div class="batman"></div>
+    </section>
+
+    <section style="width: 400px;">
+      <div class="bubble pos-x-60 pos-y-5 width-70">
+        I'm Batman.
+      </div>
+      <div class="batman eyes-angry mouth-angry rotate-head-right"></div>
+    </section>
+  </article>
+
+  <p class="ref">
+    Source: <a href="https://alvaromontoro.com/sansjs/demos/batman-comic-css/" target="_blank"
+      >https://alvaromontoro.com/sansjs/demos/batman-comic-css/</a>
+  </p>
+</body>
+</html>
\ No newline at end of file
diff --git a/slides/2024/07-july/images/batman.png b/slides/2024/07-july/images/batman.png
new file mode 100644
index 0000000..04a9c62
Binary files /dev/null and b/slides/2024/07-july/images/batman.png differ
diff --git a/slides/2024/07-july/images/sliderland.png b/slides/2024/07-july/images/sliderland.png
new file mode 100644
index 0000000..9c4ae0b
Binary files /dev/null and b/slides/2024/07-july/images/sliderland.png differ
diff --git a/slides/2024/07-july/index.html b/slides/2024/07-july/index.html
new file mode 100644
index 0000000..f1b596f
--- /dev/null
+++ b/slides/2024/07-july/index.html
@@ -0,0 +1,313 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Bleeding Edge Web: July 2024</title>
+
+  <link rel="stylesheet" href="../../shared/reveal.js/dist/reset.css">
+  <link rel="stylesheet" href="../../shared/reveal.js/dist/reveal.css">
+  <link rel="stylesheet" href="../../shared/reveal.js/dist/theme/black-contrast.css">
+  <link rel="stylesheet" href="../../shared/reveal.js/dist/theme/bew-overrides.css">
+  <link rel="stylesheet" href="../../shared/reveal.js/plugin/highlight/monokai.css">
+</head>
+<body>
+<div class="reveal">
+  <div class="slides">
+
+    <!----------------------  Intro  ---------------------->
+
+    <section class="center">
+      <h1>Bleeding Edge Web</h1>
+      <h2><a href="https://twitter.com/edgeatx">@edgeATX</a></h2>
+      <h2><a href="https://www.edgeatx.org/">EdgeATX.org</a></h2>
+    </section>
+
+    <section class="speaker-list">
+      <h2>July 2024</h2>
+      <h3 class="lightning">News From the Bleeding Edge</h3>
+      <p class="small">&mdash; Brian Moeskau (<a href="https://twitter.com/bmoeskau">@bmoeskau</a>)</p>
+      <h3 class="lightning">Speed Vector Indexing</h3>
+      <p class="small">&mdash; Ted Patrick (<a href="https://twitter.com/__ted__">@__ted__</a>)</p>
+      <h3 class="star">RAG in Bedrock</h3>
+      <p class="small">&mdash; Zeb Evans (<a href="https://www.clientpoint.me/cp/zebulon.evans">clientpoint.com</a>)</p>
+      <h3 class="star">Turbo Charge Your Stack with AI</h3>
+      <p class="small">&mdash; Ryan Vice (<a href="https://vicesoftware.com/">vicesoftware.com</a>)
+      </p>
+    </section>
+
+    <!----------------------  Housekeeping  ---------------------->
+
+    <section>
+      <h2>Housekeeping</h2>
+      <ul>
+        <li class="fragment">Join us on <a
+            href="https://join.slack.com/t/edgeatx/shared_invite/zt-1onzae2c4-0JBegV3EvF5VV4R_MDQsUA">Slack</a>
+        </li>
+        <li class="fragment">Speakers and sponsors <strong class="highlight">always wanted</strong>
+          <ul class="">
+            <li><a href="https://www.edgeatx.org/speak.html">edgeatx.org / speak.html</a></li>
+            <li><a href="https://www.edgeatx.org/sponsorship.html">edgeatx.org / sponsorship.html</a></li>
+          </ul>
+        </li>
+      </ul>
+    </section>
+
+    <!----------------------  Sponsors  ---------------------->
+
+    <section>
+      <h2>Thanks to Our Host!</h2>
+      <div style="background-color: #fff;padding: 25px 0 0 40px;border-radius: 15px;">
+        <a href="https://www.expedia.com/" target="_blank"><img
+            src="../../shared/resources/images/sponsors/expedia-logo.jpg" alt="Expedia">
+        </a>
+      </div>
+    </section>
+
+    <!----------------------  Libs & Frameworks  ---------------------->
+
+    <section data-background-color="#661f34" class="center main-title">
+      <h2 style="color:white;">Libraries &amp; Frameworks</h2>
+    </section>
+
+    <section>
+      <h2>es-toolkit 1.0</h2>
+      <p class="subhead"><a href="https://es-toolkit.slash.page/intro.html">Released</a> May 31st</p>
+      <blockquote>A state-of-the-art, high-performance JS utility library with a small bundle size and strong type annotations.</blockquote>
+      <ul>
+        <li class="fragment">Basically an upgraded / modern lodash</li>
+        <li class="fragment">Built in Typescript with 100% test coverage</li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>Other notable releases</h2>
+      <ul class="date-list">
+        <li><span class="date">June 29</span> <a href="http://fabricjs.com/">Fabric.js 6.0</a></li>
+        <li><span class="date">July 5</span> <a href="https://tinybase.org/guides/releases/#v5-0">Tinybase 5.0</a></li>
+        <li><span class="date">July 8</span> <a href="https://github.com/vitest-dev/vitest/releases/tag/v2.0.0">Vitest 2.0</a></li>
+        <li><span class="date">July 16</span> <a href="https://forums.meteor.com/t/its-official-meteor-3-0-official-release-is-out/61860">Meteor 3.0</a></li>
+        <li><span class="date">July 17</span> <a href="https://nodejs.org/en/blog/release/v22.5.0">Node.js 22.5</a></li>
+      </ul>
+    </section>
+
+    <!----------------------  Baseline Updates  ---------------------->
+
+    <section data-background-color="#661f34" class="center main-title">
+      <h2 style="color:white;">Baseline News</h2>
+      <p class="x-small"><a href="https://web.dev/baseline" style="color: white;">https://web.dev/baseline</a></p>
+    </section>
+
+    <section>
+      <h2>July browser releases</h2>
+      <p>Stable version releases:</p>
+      <ul class="date-list">
+        <li><span class="date">July 9</span> <a
+            href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/128">Firefox 128</a>
+        </li>
+        <li><span class="date">July 23</span> <a
+            href="https://developer.chrome.com/release-notes/127">Chrome 127</a>
+        </li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>@property</h2>
+      <blockquote>Extends CSS by providing meaning and context to CSS variables.</blockquote>
+      <p>Default custom properties are simple strings:</p>
+      <pre><code data-trim data-noescape>
+        :root {
+          --myColor: hotpink;
+        }
+      </code></pre>
+    </section>
+
+    <section>
+      <h2>@property</h2>
+      <p>Use <code><a
+          href="https://developer.mozilla.org/en-US/docs/Web/CSS/@property">@property</a></code>
+        to provide a detailed style definition:
+      </p>
+      <pre><code data-trim data-noescape>
+        @property --myColor {
+          syntax: '&lt;color>';
+          inherits: false;
+          initial-value: hotpink;
+        }
+      </code></pre>
+      <ul>
+        <li class="fragment">Provides type info</li>
+        <li class="fragment">Control over style inheritance</li>
+        <li class="fragment">Ability to define a default / fallback value</li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>font-size-adjust</h2>
+      <blockquote>Control lowercase letter size relative to uppercase letters.</blockquote>
+      <div class="fragment">
+        <p>Verdana vs Times at <code>font-size: 40px</code>:</p>
+        <ul style="font-size: 40px;">
+          <li><span style="font-family: Verdana, sans-serif">This is Verdana.</span></li>
+          <li><span style="font-family: Times, serif;">This is Times.</span></li>
+        </ul>
+      </div>
+    </section>
+
+    <section>
+      <h2>font-size-adjust</h2>
+      <blockquote>Control lowercase letter size relative to uppercase letters.</blockquote>
+      <p>Times with <code>font-size-adjust: 0.54</code>:</p>
+      <ul style="font-size: 40px;">
+        <li><span style="font-family: Verdana, sans-serif">This is Verdana.</span></li>
+        <li><span style="font-family: Times, serif; font-size-adjust: 0.54;">This is Times.</span></li>
+      </ul>
+    </section>
+
+    <!----------------------  Web Standards Spotlight  ---------------------->
+
+    <!----------------------  Security & Privacy  ---------------------->
+
+    <section data-background-color="#661f34" class="center main-title">
+      <h2 style="color:white;">Security &amp; Privacy</h2>
+    </section>
+
+    <section>
+      <h2>Polyfill.io Supply Chain Attack</h2>
+      <p class="subhead"><a href="https://sansec.io/research/polyfill-supply-chain-attack">Reported</a> June 25th</p>
+      <p>A shady Chinese company bought the domain + repo</p>
+      <ul>
+        <li class="fragment"><code>cdn.polyfill.io</code> started injecting malware</li>
+        <li class="fragment">Same with <code>bootcdn.net</code> and several other CDNs</li>
+        <li class="fragment">Google, Cloudflare and others blocked it quickly</li>
+        <li class="fragment">Cloudflare has a <a href="https://cdnjs.cloudflare.com/polyfill">polyfill.io
+          mirror</a> <span class="x-small">(but you don't need it)</span></li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>Privacy Sandbox</h2>
+      <p>Google announced <a href="https://privacysandbox.com/intl/en_us/">Privacy Sandbox</a> 4+ years ago.</p>
+      <p class="fragment">That was to include phasing out third-party cookies.</p>
+      <div class="fragment">
+        <p>They just announced a
+          "<a href="https://privacysandbox.com/news/privacy-sandbox-update/">new path</a>" forward:
+        </p>
+        <blockquote>
+          Instead of deprecating third-party cookies, we would introduce a new experience in Chrome that
+          lets people make an informed choice that applies across their web browsing, and they’d be able
+          to adjust that choice at any time. We're discussing this new path with regulators, and will
+          engage with the industry as we roll this out.
+        </blockquote>
+      </div>
+    </section>
+
+    <section>
+      <h2>Private Browsing 2.0</h2>
+      <p>Apple OTOH is <a href="https://webkit.org/blog/15697/private-browsing-2-0/">cracking down</a>
+        further in Safari 17.</p>
+      <p>New private browsing defaults:</p>
+      <ul>
+        <li class="fragment">Link tracking and fingerprinting protection</li>
+        <li class="fragment">Blocking known / cloaked network trackers</li>
+        <li class="fragment">Disabled extensions with history access</li>
+      </ul>
+      <p class="fragment">Plus, additional safeguards in ALL browsing modes</p>
+    </section>
+
+    <!----------------------  Industry News  ---------------------->
+
+    <section data-background-color="#661f34" class="center main-title">
+      <h2 style="color:white;">Industry News</h2>
+    </section>
+
+    <section>
+      <h2>Ladybird Browser Initiative</h2>
+      <p class="subhead"><a href="https://ladybird.org/posts/announcement/">Announced</a> Jul1 1st</p>
+      <blockquote>A brand-new browser from scratch, backed by a non-profit.</blockquote>
+      <ul>
+        <li class="fragment">Open source, web standards-first</li>
+        <li class="fragment">No user monetization, "ever"</li>
+        <li class="fragment">Backed by Andreas Kling and Chris Wanstrath</li>
+      </ul>
+      <p class="fragment">Targeting "early adopter" alpha in... 2026</p>
+    </section>
+
+    <section>
+      <h2>CrowdStrike Outage</h2>
+      <p class="subhead"><a href="https://www.crowdstrike.com/falcon-content-update-remediation-and-guidance-hub/">Occurred</a> July 18th</p>
+      <p>Faulty config sent to ~1% of all Windows machines</p>
+      <ul>
+        <li class="fragment">Led to a BSOD + reboot loop</li>
+        <li class="fragment">Cause: "a bug in the content-validation system"</li>
+        <li class="fragment">Took down airlines, banks, TV stations, hospitals</li>
+        <li class="fragment">Delta <a href="https://www.cnn.com/2024/07/23/business/delta-flight-cancellations/index.html">still</a>
+          hasn't recovered as of today!</li>
+      </ul>
+    </section>
+
+    <!----------------------  Events  ---------------------->
+
+    <!----------------------  ICYMI  ---------------------->
+
+    <!----------------------  Just For Fun  ---------------------->
+
+    <section data-background-color="#661f34" class="center main-title">
+      <h2 style="color:white;">Just For Fun</h2>
+    </section>
+
+    <section>
+      <h2>Sliderland</h2>
+      <blockquote>A minimalist coding playground (using sliders)</blockquote>
+      <div class="center">
+        <img src="images/sliderland.png" alt="Sliderland" style="width:500px;">
+      </div>
+      <p><a href="https://sliderland.blinry.org/">Demos</a></p>
+    </section>
+
+    <section>
+      <h2>Batman-comic.css</h2>
+      <blockquote>Easily create comics with Batman and Robin.</blockquote>
+      <pre><code data-trim data-noescape>
+        &lt;article class="batman-comic">
+          &lt;section>
+            &lt;div class="batman">&lt;/div>
+          &lt;/section>
+        &lt;/article>
+      </code></pre>
+      <a href="batman-comics/">Demo</a>
+      <div class="center">
+        <img src="images/batman.png" style="width: 250px;" alt="Batman">
+      </div>
+    </section>
+
+    <!----------------------  Fin!  ---------------------->
+
+    <section>
+      <h2>Thanks!</h2>
+      <p>Brian Moeskau</p>
+      <ul>
+        <li><a href="https://www.moeskau.com/">moeskau.com</a></li>
+        <li><a href="https://www.edgeatx.org/slides/">edgeATX.org / slides</a></li>
+      </ul>
+    </section>
+  </div>
+</div>
+
+<script src="../../shared/reveal.js/dist/reveal.js"></script>
+<script src="../../shared/reveal.js/plugin/notes/notes.js"></script>
+<script src="../../shared/reveal.js/plugin/markdown/markdown.js"></script>
+<script src="../../shared/reveal.js/plugin/highlight/highlight.js"></script>
+<script>
+  Reveal.initialize({
+    hash: true,
+    transition: 'fade',
+    plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+  });
+  document.querySelectorAll('a').forEach((el) => {
+    el.setAttribute('target', '_blank');
+    el.setAttribute('rel', 'noopener');
+  });
+</script>
+</body>
+</html>
diff --git a/slides/index.html b/slides/index.html
index aded702..e0759b8 100644
--- a/slides/index.html
+++ b/slides/index.html
@@ -80,7 +80,14 @@ <h2>Slides</h2>
 
       <h3>2024</h3>
 
-      <h4>June</h4>
+      <h4>July</h4>
+      <ul>
+        <li><a href="2024/07-july/">News from the Bleeding Edge</a></li>
+        <li>Turbo Charge Your Stack with AI</li>
+        <li><strong class="sponsor">Sponsor: <a href="https://www.edgeatx.org/sponsorship.html">Bleeding Edge Web</a></strong></li>
+      </ul>
+
+      <h4>June &mdash; <a href="https://www.youtube.com/watch?v=0PsWVR0K9z0" target="_blank">video</a></h4>
       <ul>
         <li><a href="2024/06-june/">News from the Bleeding Edge</a></li>
         <li>The Root of All (Web) Evils</li>
@@ -94,14 +101,14 @@ <h4>May</h4>
         <li><strong class="sponsor">Sponsor: <a href="https://jam.dev">Jam.dev</a></strong></li>
       </ul>
 
-      <h4>April &mdash; <a href="https://www.youtube.com/watch?v=4i-RJl8lr1c">video</a></h4>
+      <h4>April &mdash; <a href="https://www.youtube.com/watch?v=4i-RJl8lr1c" target="_blank">video</a></h4>
       <ul>
         <li><a href="2024/04-apr/">News from the Bleeding Edge</a></li>
         <li><a href="https://noti.st/davatron5000/k6N2LP/html-with-superpowers">HTML with Superpowers</a></li>
         <li><strong class="sponsor">Sponsor: <a href="https://www.edgeatx.org/sponsorship.html">Bleeding Edge Web</a></strong></li>
       </ul>
 
-      <h4>March &mdash; <a href="https://www.youtube.com/watch?v=4-fkYNv7qog">video</a></h4>
+      <h4>March &mdash; <a href="https://www.youtube.com/watch?v=4-fkYNv7qog" target="_blank">video</a></h4>
       <ul>
         <li><a href="2024/03-mar/">News from the Bleeding Edge</a></li>
         <li><a href="https://fpliger.pyscriptapps.com/talks-bleeding-edge-web-2024/latest/">PyScript
@@ -109,7 +116,7 @@ <h4>March &mdash; <a href="https://www.youtube.com/watch?v=4-fkYNv7qog">video</a
         <li><strong class="sponsor">Sponsor: <a href="https://teamtopia.com/">Team Topia</a></strong></li>
       </ul>
 
-      <h4>February &mdash; <a href="https://www.youtube.com/watch?v=0XCvYxn1M9M">video</a></h4>
+      <h4>February &mdash; <a href="https://www.youtube.com/watch?v=0XCvYxn1M9M" target="_blank">video</a></h4>
       <ul>
         <li><a href="2024/02-feb/">News from the Bleeding Edge</a></li>
         <li><a href="https://github.com/tedpatrick/htmx-talk">Modern Web Applications with HTMX</a></li>
@@ -141,7 +148,7 @@ <h4>February</h4>
         <li><strong class="sponsor">Sponsor: <a href="https://events.indeed.com/hiringevents/">Indeed Hiring Events</a></strong></li>
       </ul>
 
-      <h4>January &mdash; <a href="https://www.youtube.com/watch?v=VZTBpnL-58I">video</a></h4>
+      <h4>January &mdash; <a href="https://www.youtube.com/watch?v=VZTBpnL-58I" target="_blank">video</a></h4>
       <ul>
         <li><a href="2020/01-jan">News from the Bleeding Edge</a></li>
         <li><a href="https://slides.com/kmurgic/react-concurrent-mode/">React Concurrent Mode</a></li>
@@ -153,7 +160,7 @@ <h3>2019</h3>
       <h4>October&ndash;December</h4>
       <p><em>Holiday break</em></p>
 
-      <h4>September &mdash; <a href="https://youtu.be/DSn3L1cOE7o?t=34">video</a></h4>
+      <h4>September &mdash; <a href="https://youtu.be/DSn3L1cOE7o?t=34" target="_blank">video</a></h4>
       <ul>
         <li><a href="2019/09-sep">News from the Bleeding Edge</a></li>
         <li><a href="https://docs.google.com/presentation/d/1rE_FqpZT8rFB2AswF_glLIoghZ7ZJsi3PtZTgCQxkos/edit?ts=5d84138e#slide=id.g5f38f9700d_1_485">Analytics &amp; Data for Developers</a></li>
@@ -162,7 +169,7 @@ <h4>September &mdash; <a href="https://youtu.be/DSn3L1cOE7o?t=34">video</a></h4>
         <li><strong class="sponsor">Sponsor: <a href="https://fauna.com/">Fauna</a></strong></li>
       </ul>
 
-      <h4>August &mdash; <a href="https://www.youtube.com/watch?v=aUNfi4n5lTM&t=278">video</a></h4>
+      <h4>August &mdash; <a href="https://www.youtube.com/watch?v=aUNfi4n5lTM&t=278" target="_blank">video</a></h4>
       <ul>
         <li><a href="2019/08-aug">News from the Bleeding Edge</a></li>
         <li><a href="2019/08-aug/files/open-source.pdf">Everyone Can Do Open Source</a></li>
@@ -170,7 +177,7 @@ <h4>August &mdash; <a href="https://www.youtube.com/watch?v=aUNfi4n5lTM&t=278">v
         <li><strong class="sponsor">Sponsor: <a href="https://company.auntbertha.com/">Aunt Bertha</a></strong></li>
       </ul>
 
-      <h4>July &mdash; <a href="https://www.youtube.com/watch?v=heR6iswSeQw">video</a></h4>
+      <h4>July &mdash; <a href="https://www.youtube.com/watch?v=heR6iswSeQw" target="_blank">video</a></h4>
       <ul>
         <li><a href="2019/07-jul">News from the Bleeding Edge</a></li>
         <li>Building Telecom Apps with Node.js</li>
@@ -178,14 +185,14 @@ <h4>July &mdash; <a href="https://www.youtube.com/watch?v=heR6iswSeQw">video</a>
         <li><strong class="sponsor">Sponsor: <a href="https://company.auntbertha.com/">Aunt Bertha</a></strong></li>
       </ul>
 
-      <h4>June &mdash; <a href="https://www.youtube.com/watch?v=h7s63ZhDMD4&feature=youtu.be&t=508">video</a></h4>
+      <h4>June &mdash; <a href="https://www.youtube.com/watch?v=h7s63ZhDMD4&feature=youtu.be&t=508" target="_blank">video</a></h4>
       <ul>
         <li><a href="2019/06-jun">News from the Bleeding Edge</a></li>
         <li>Real User Measurements and the Development Lifecycle</li>
         <li><strong class="sponsor">Sponsor: <a href="https://www.edgeatx.org/sponsorship.html">Bleeding Edge Web</a></strong></li>
       </ul>
 
-      <h4>May &mdash; <a href="https://www.youtube.com/watch?v=l_kF6YPfECk">video</a></h4>
+      <h4>May &mdash; <a href="https://www.youtube.com/watch?v=l_kF6YPfECk" target="_blank">video</a></h4>
       <ul>
         <li><a href="2019/05-may">News from the Bleeding Edge</a></li>
         <li><a href="adhoc/remodeling">How I Used CSS & JS to Remodel a Condo</a></li>
@@ -193,14 +200,14 @@ <h4>May &mdash; <a href="https://www.youtube.com/watch?v=l_kF6YPfECk">video</a><
         <li><strong class="sponsor">Sponsor: <a href="https://theguild.co/aboutus">The Guild</a></strong></li>
       </ul>
 
-      <h4>April &mdash; <a href="https://www.youtube.com/watch?v=iLIalQdl3d4&feature=youtu.be&t=600">video</a></h4>
+      <h4>April &mdash; <a href="https://www.youtube.com/watch?v=iLIalQdl3d4&feature=youtu.be&t=600" target="_blank">video</a></h4>
       <ul>
         <li><a href="2019/04-apr">News from the Bleeding Edge</a></li>
         <li><a href="https://www.vicesoftware.com/react-redux-boilerplate-with-authentication-authorization-and-architecture-best-practices/">Production React Redux Architecture, Patterns, and Infrastructure Components</a></li>
         <li><strong class="sponsor">Sponsor: <a href="https://cloudflare.com">CloudFlare</a></strong></li>
       </ul>
 
-      <h4>March &mdash; <a href="https://www.youtube.com/watch?v=HUG4l2CK68Y">video</a></h4>
+      <h4>March &mdash; <a href="https://www.youtube.com/watch?v=HUG4l2CK68Y" target="_blank">video</a></h4>
       <ul>
         <li><a href="2019/03-mar">News from the Bleeding Edge</a></li>
         <li><a href="https://docs.google.com/presentation/d/1CXa2qyxXwXN9-5O2-CgUm9Xk2QOhJ_dcFgIihm1mTsk/edit?usp=sharing">Visual Regression Testing with Percy.io</a></li>
@@ -209,14 +216,14 @@ <h4>March &mdash; <a href="https://www.youtube.com/watch?v=HUG4l2CK68Y">video</a
         <li><strong class="sponsor">Sponsor: <a href="https://duo.com/">Duo Security</a></strong></li>
       </ul>
 
-      <h4>February &mdash; <a href="https://www.youtube.com/watch?v=4FSc__j1QX0">video</a></h4>
+      <h4>February &mdash; <a href="https://www.youtube.com/watch?v=4FSc__j1QX0" target="_blank">video</a></h4>
       <ul>
         <li><a href="2019/02-feb">News from the Bleeding Edge</a></li>
         <li>HomeAway's Multi-Cloud Traffic Director (no slides)</li>
         <li><strong class="sponsor">Sponsor: <a href="https://homeaway.com/">HomeAway</a></strong></li>
       </ul>
 
-      <h4>January &mdash; <a href="https://www.youtube.com/watch?v=4_pLo8YrqwU">video</a></h4>
+      <h4>January &mdash; <a href="https://www.youtube.com/watch?v=4_pLo8YrqwU" target="_blank">video</a></h4>
       <ul>
         <li><a href="2019/01-jan">News from the Bleeding Edge</a></li>
         <li><a href="https://github.com/tedpatrick/async-await-talk">Async/Await Demo</a></li>
@@ -229,14 +236,14 @@ <h3>2018</h3>
       <h4>November / December</h4>
       <p><em>Holiday break</em></p>
 
-      <h4>October &mdash; <a href="https://www.youtube.com/watch?v=JAXU6MgKiik&t=710s">video</a></h4>
+      <h4>October &mdash; <a href="https://www.youtube.com/watch?v=JAXU6MgKiik&t=710s" target="_blank">video</a></h4>
       <ul>
         <li><a href="2018/10-oct">News from the Bleeding Edge</a></li>
         <li><a href="https://speakerdeck.com/cowboyd/state-of-enjoyment">State of Enjoyment</a></li>
         <li><strong class="sponsor">Sponsor: <a href="https://www.cloudflare.com/">Cloudflare</a></strong></li>
       </ul>
 
-      <h4>September &mdash; <a href="https://youtu.be/1u6eL_BEqHo?t=448">video</a></h4>
+      <h4>September &mdash; <a href="https://youtu.be/1u6eL_BEqHo?t=448" target="_blank">video</a></h4>
       <ul>
         <li><a href="2018/09-sep">News from the Bleeding Edge</a></li>
         <li><a href="https://speakerdeck.com/robdel12/testing-big-in-javascript-bleeding-edge-web">Testing Big in JavaScript</a></li>
@@ -250,7 +257,7 @@ <h4>August</h4>
         <li><strong class="sponsor">Sponsor: <a href="https://www.cloudflare.com/">Cloudflare</a></strong></li>
       </ul>
 
-      <h4>July &mdash; <a href="https://www.youtube.com/watch?v=owzf7aaQ_WQ&t=665s">video</a></h4>
+      <h4>July &mdash; <a href="https://www.youtube.com/watch?v=owzf7aaQ_WQ&t=665s" target="_blank">video</a></h4>
       <ul>
         <li><a href="2018/07-jul">News from the Bleeding Edge</a></li>
         <li><a href="https://docs.google.com/presentation/d/1c5wU3whpGbhvpKdW-PPDazolUeKjI5Idnc1xFJwv3jc/edit?usp=sharing" target="_blank">Symmetric and Asymmetric Cryptography and RSA Deep Dive</a></li>
@@ -310,7 +317,7 @@ <h3>2017</h3>
           <a href="2017/10-oct">Bleeding Edge Web</a> /
           <a href="https://docs.google.com/presentation/d/1SZ_DSWphXBksHrylrSPKSVcfLN-O1Ba_BD9ONGDpuVY/edit?usp=sharing">An Introduction To Alexa and Alexa Skills</a>
         </li>
-        <li>September (<a href="https://www.youtube.com/watch?v=jJSApOHv3tQ">video</a> &mdash;
+        <li>September (<a href="https://www.youtube.com/watch?v=jJSApOHv3tQ" target="_blank">video</a> &mdash;
           <a href="2017/09-sep">Bleeding Edge Web</a> /
           <a href="https://drive.google.com/file/d/0ByfYIhtzqBvPZ2pIMnFDWjcxUTQ/view?usp=sharing">Live to Code, Don't Code to Live</a>
         </li>
diff --git a/slides/shared/reveal.js/dist/theme/bew-overrides.css b/slides/shared/reveal.js/dist/theme/bew-overrides.css
index 7929693..e5b18c3 100644
--- a/slides/shared/reveal.js/dist/theme/bew-overrides.css
+++ b/slides/shared/reveal.js/dist/theme/bew-overrides.css
@@ -34,6 +34,24 @@
   font-size: 65%;
 }
 
+.reveal a {
+  text-decoration: underline dotted #1c4968;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 5px;
+}
+.reveal a:hover {
+  text-decoration-style: solid;
+  text-decoration-color: #E91E63;
+}
+
+.reveal ::selection {
+  background: #222222; /* WebKit/Blink */
+  color: inherit;
+}
+.reveal ::-moz-selection {
+  background: #ffb7b7; /* Gecko */
+}
+
 .reveal blockquote {
   margin: 0;
   width: 90%;
diff --git a/sponsorship.html b/sponsorship.html
index 3e82ad4..5f8652f 100644
--- a/sponsorship.html
+++ b/sponsorship.html
@@ -25,7 +25,7 @@ <h2>Sponsorship Opportunities</h2>
 
       <p>To sponsor a meetup, or if you have any questions about sponsoring, please <a
         href="mailto:bleedingedgeatx@gmail.com?subject=Sponsorship%20Inquiry">email us</a>.
-      <p>We ask <strong>$300</strong> to sponsor a meetup session, which covers the cost
+      <p>We ask <strong>$200</strong> to sponsor a meetup session, which covers the cost
         of food and drinks (we typically feed 50+ attendees). We handle all of the logistics.
         Remaining money, if any, is used to offset the recurring costs of running the meetup
         (e.g. website hosting, meetup.com fees, swag, etc).</p>