diff --git a/archive/index.html b/archive/index.html
index e378f3c..8a8437a 100644
--- a/archive/index.html
+++ b/archive/index.html
@@ -938,6 +938,11 @@ <h1>Archive</h1>
             <td><a href="/comics/164">Comic<span> of AI Edits</span></a></td>
             <td><a href="/comics/164/ai-edits.html">Demo<span> of AI Edits</span></a></td>
           </tr>
+          <tr>
+            <td>Hell</td>
+            <td><a href="/comics/165">Comic<span> of Hell</span></a></td>
+            <td><a href="/comics/165/hell.html">Demo<span> of Hell</span></a></td>
+          </tr>
         </tbody>
       </table>
     </main>
diff --git a/atom.xml b/atom.xml
index a86c910..41b9340 100644
--- a/atom.xml
+++ b/atom.xml
@@ -3122,4 +3122,23 @@
       <uri>https://alvaromontoro.com</uri>
     </author>
   </entry>
+  <entry>
+    <title>Hell</title>
+    <link href="https://comicss.art/comics/165" />
+    <link rel="alternate" type="text/html" href="https://comicss.art/comics/165/hell.html"/>
+    <id>https://comicss.art/comics/165</id>
+    <updated>2024-11-11T00:00:00Z</updated>
+    <summary>New Cartoon: Hell</summary>
+    <content type="xhtml">
+      <div xmlns="http://www.w3.org/1999/xhtml">
+        <p><img src="https://comicss.art/comics/165/hell.png" alt="A person is at the gate of Hell, a demon says 'you are not in the list', he replies 'of course not! I cared about everyone, even added aria-label to every HTML tag'. The demon replies 'I see, follow me' and guides him to a place called Double Hell" /></p>
+      </div>
+    </content>
+    <rights>Copyright 2024 Alvaro Montoro</rights>
+    <author>
+      <name>Alvaro Montoro</name>
+      <email>alvaromontoro@gmail.com</email>
+      <uri>https://alvaromontoro.com</uri>
+    </author>
+  </entry>
 </feed>
diff --git a/comics/163/index.html b/comics/163/index.html
index c1ce377..d9e1d8b 100644
--- a/comics/163/index.html
+++ b/comics/163/index.html
@@ -96,7 +96,7 @@ <h2 class="page-title"><a href="/" rel="self" aria-current="page">comi<span>c</s
         </ul>
       </nav>
     </header>
-    <main id="main" class="latest">
+    <main id="main">
       <noscript>
         This website needs JavaScript to navigate. But, you can see all the drawings linked at once 
         (without needing any JavaScript) in the <a href="/archive">Archive</a>.
diff --git a/comics/164/ai-edits.html b/comics/164/ai-edits.html
index 3097718..fae4a29 100644
--- a/comics/164/ai-edits.html
+++ b/comics/164/ai-edits.html
@@ -682,9 +682,7 @@
     </style>
   </head>
   <body>
-
-    <!-- Inspired by El Batracio Amarillo #150 -->
-    <article role="img" aria-label="cartoon with two panels showing two people talking. One has long spiky hair, the other one has a more classic hair and says 'cool haircut! did you go to the hairdresser?'. The person with spiky hair replies: 'No, I was just reviewing the new Junior's PR'">
+    <article role="img" aria-label="Comic with 4 panels in a 2x2 grid. A woman and a man are talking - Man: 'Hey, Ann! Long time no see here on comiCSS! How are you doing?' Woman: 'Yeah... I've been worried about showing up around here since people started using AI to edit cartoons and images. It always takes a sexist turn...' Man: And you think Alvaro will use AI to edit the CSS comics?. Woman (changed in this last panel to look slimmer and taller, and to have darker skin, cleavage, and bigger breasts): 'I dunno... But I have a suspicion he just started...'">
       <section>
         <div class="bubble bubble1 right"></div>
         <div class="person person-1">
diff --git a/comics/165/165-hell-0.webp b/comics/165/165-hell-0.webp
new file mode 100644
index 0000000..6fdfba8
Binary files /dev/null and b/comics/165/165-hell-0.webp differ
diff --git a/comics/165/165-hell-1.webp b/comics/165/165-hell-1.webp
new file mode 100644
index 0000000..cd55633
Binary files /dev/null and b/comics/165/165-hell-1.webp differ
diff --git a/comics/165/165-hell-2.webp b/comics/165/165-hell-2.webp
new file mode 100644
index 0000000..e609daf
Binary files /dev/null and b/comics/165/165-hell-2.webp differ
diff --git a/comics/165/165-hell-3.webp b/comics/165/165-hell-3.webp
new file mode 100644
index 0000000..eb6b8f8
Binary files /dev/null and b/comics/165/165-hell-3.webp differ
diff --git a/comics/165/hell.html b/comics/165/hell.html
new file mode 100644
index 0000000..854d9c2
--- /dev/null
+++ b/comics/165/hell.html
@@ -0,0 +1,850 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="author" content="Alvaro Montoro (alvaromontoro@gmail.com)" />
+    <meta name="keywords" content="comicss,webcomic,css,alvaro montoro,alvaro,montoro" />
+    <meta name="description" content="comiCSS: A webcomic about CSS. Coded in CSS." />
+
+    <title>comiCSS</title>
+
+    <meta property="og:title" content="comiCSS" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://comicss.art" />
+    <meta property="og:image" content="https://comicss.art/comics/___/thumb.png" />
+    <meta property="og:description" content="comiCSS: A webcomic about CSS. Coded in CSS." />
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:url" content="http://comicss.art/">
+    <meta name="twitter:title" content="comiCSS">
+    <meta name="twitter:description" content="comiCSS: A webcomic about CSS. Coded in CSS.">
+    <meta name="twitter:image" content="https://comicss.art/comics/___/thumb.png">
+    <meta name="monetization" content="$ilp.uphold.com/raZZQiMDDWLe" />
+
+    <link rel="shortcut icon" href="/favicon.png" />
+
+    <style>
+ article {
+  font-size: 0.75vmin;
+  width: 120em;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 1.5em;
+
+  section {
+    /* width: 50%; */
+    box-sizing: border-box;
+    border: 0.5em solid;
+    aspect-ratio: 1; /* 3 / 2; */
+    position: relative;
+    overflow: hidden;
+    background: linear-gradient(#0004, #0002);
+    /* background: linear-gradient(#0001, #0001);
+    background: repeating-linear-gradient(-45deg, #0000 0 0.5em, #0001 0 0.6em);
+    background: 
+      repeating-linear-gradient(-45deg, #0000 0 0.25em, #0001 0 0.3em) 0 0 / 100% 20% no-repeat,
+      repeating-linear-gradient(-45deg, #0000 0 0.5em, #0001 0 0.6em); */
+
+    & *,
+    & *::before,
+    & *::after {
+      box-sizing: border-box;
+      position: absolute;
+    }
+
+    .counter {
+      width: 60%;
+      height: 8%;
+      background: #fff;
+      border-top: 0.4em solid;
+      border-right: 0.4em solid;
+      bottom: 0;
+      left:0;
+    }
+
+    .bubble {
+      top: 1em;
+      left: 1em;
+      right: 1em;
+      border: 0.4em solid;
+      border-radius: 2em;
+      padding: 2em;
+      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+      background: white;
+
+      &::before {
+        content:"";
+        width: 2em;
+        height: 3em;
+        background: red;
+        top: 100%;
+        border-left: 0.4em solid;
+        background: linear-gradient(to bottom right, #fff calc(50% - 0.4em), #000 0 50%, #0000 0);
+      }
+
+      &.right::before {
+        transform: scaleX(-1);
+        right: 10%;
+      }
+
+      &::after {
+        display: block;
+        position: relative;
+        text-wrap: balance;
+        font-size: 2.5em;
+        text-align: center;
+      }
+    }
+  }
+}
+
+.table {
+  width: 50%;
+  height: 15%;
+  border: 0.5em solid;
+  border-bottom: 0;
+  border-right: 0;
+  bottom: 0;
+  right: 0;
+  background: #fff;
+
+  &::before {
+    content: "HELL";
+    font-size: 2em;
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    border: 0.2em solid;
+    border-bottom: 0;
+    padding: 0 1em;
+    top: -0.25em;
+    left: 5%;
+    background: gold;
+    transform: translateY(-100%) skew(-9deg);
+    box-shadow: 0.8em 0.6em 0 -0.6em;
+  }
+}
+
+.person { 
+  --skin-color: #fff;
+  --skin: linear-gradient(45deg, #fff0 0 0.25em, #000 0 0.5em, #fff0 0) 0 0 / 100% 0.6em, var(--skin-color);
+  width: 20em;
+  aspect-ratio: 2 / 3;
+  bottom: 0;
+
+  .body {
+    width: 40%;
+    height: 43%;
+    left: 49%;
+    transform: translate(-50%, 0);
+    bottom: 0;
+
+    .chest {
+      width: 100%;
+      height: 100%;
+      background: #000;
+      border-radius: 4em 4em 0 0;
+      aborder-radius: 100% 100% 0 0;
+    }
+
+    .arm {
+      width: 1em;
+      height: 20em;
+      background: #000;
+      top: 25%;
+      left: calc(100% - 1.1em);
+      transform-origin: 100% 0;
+      transform: rotate(-12deg);
+
+
+      & ~ & {
+        left: 0;
+        transform-origin: 0 0;
+        transform: rotate(14deg);
+      }
+    }
+  }
+
+  .head {
+    width: 45%;
+    height: 50%;
+    left: 50%;
+    transform: translate(-50%, 0);
+
+    .neck {
+      width: 15%;
+      height: 30%;
+      border: 0.4em solid;
+      border-radius: 2em;
+      left: 49%;
+      top: 90%;
+      transform: translate(-50%);
+      background: var(--skin);
+    }
+
+    .face {
+      width: 100%;
+      height: 100%;
+      border: 0.4em solid;
+      border-radius: 3em;
+      background: var(--skin);
+
+      .mouth {
+        left: 60%;
+        top: 82%;
+        width: 30%;
+        height: 7%;
+        background: #000;
+        border-radius: 50% / 0 0 100% 100%;
+        transform: translate(-50%);
+      }
+
+      .ear {
+        --skin: repeating-linear-gradient(45deg, #fff0 0 0.25em, #000 0 0.5em, #fff0 0) 0 0 / 100% 0.6em, var(--skin-color);
+        width: 30%;
+        aspect-ratio: 1;
+        border: 0.4em solid;
+        border-radius: 50%;
+        background: red;
+        background: var(--skin);
+        clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+        top: 59.5%;
+        left: 0;
+        transform: translate(-50%);
+      }
+
+      .eye {
+        width: 8%;
+        height: 13%;
+        background: #000;
+        border-radius: 6em;
+        left: 40%;
+        top: 50%;
+
+        & + & {
+          left: 80%;
+        }
+      }
+
+      .eyebrow {
+        --diff: ;
+        width: 25%;
+        height: 5%;
+        background: #000;
+        border-radius: 6em;
+        left: 45%;
+        top: 45%;
+        transform: translate(-50%, -50%) var(--diff);
+
+        & + & {
+          transform: translate(-50%, -50%) scaleX(-1) var(--diff);
+          left: 85%;
+        }
+      }
+
+      .nose {
+        width: 15%;
+        aspect-ratio: 0.8;
+        border: 0.4em solid;
+        top: 66%;
+        left: 60%;
+        border-radius: 0 10em 10em 0;
+        border-left: 0;
+      }
+    }
+  }
+}
+
+.person-1 {
+  left: 4%;
+
+  .body {
+    .arm {
+      transform: rotate(-10deg) translate(0em, -0.5em);
+      left: 87.75%;
+      & ~ & {
+        transform: rotate(10deg);
+      }
+    }
+  }
+  .head {
+    .face {
+      
+      .eyebrow {
+        --diff: rotate(2deg);
+        top: 41%;
+      }
+
+      .mouth {
+        transform: translateX(-50%) scale(0.5);
+        width: 43%;
+        height: 10%;
+      }
+
+      .hair {
+        width: 135%;
+        height: 20%;
+        background: #000;
+        border-radius: 50% / 100% 100% 0 0;
+        left: -0.3em;
+        top: -5%;
+        transform-origin: 0 100%;
+        transform: rotate(-5deg);
+
+        &::before,
+        &::after {
+          content: "";
+          width: 105%;
+          height: 100%;
+          border-radius: 50% / 100% 100% 0 0;
+          transform-origin: 0 100%;
+          transform: rotate(10deg);
+          background: #000;
+        }
+
+        &::after {
+          width: 100%;
+          transform: rotate(16deg);
+        }
+      }
+    }
+  }
+}
+
+.person-2 {
+  --skin-color: #f77;
+  right: 3%;
+  bottom: 10%;
+  transform: scaleX(-1);
+
+  .body {
+    top:58%;
+    height: 70%;
+
+    .arm {
+      background: var(--skin-color);
+      border: 0.4em solid;
+      width: 1.5em;
+      left: 80%;
+      top: 15%;
+      transform-origin: 50% 0;
+      transform: rotate(-15deg);
+
+      & ~ & {
+        left: auto;
+        left: 2%;
+        transform: rotate(20deg);
+      }
+    }
+  }
+
+  .head {
+    .face {
+      background: var(--skin);
+
+      &::after {
+        content: "";
+        width: 75%;
+        height: 20%;
+        background: #fffc;
+        left: 50%;
+        transform: translatE(-50%, -100%);
+        border-radius: 40% 40% 20% 20% / 100%;
+        top: 0;
+        background:
+          radial-gradient(50% 160% at 50% -50%, #0000 calc(99% - 1px), #000 99%)
+      }
+
+      .mouth {
+        transform: translate(-50%) scaleY(-0.8) rotate(2deg);
+      }
+
+      .ear {
+        top: 51%;
+      }
+
+      .eyebrow {
+        height: 4%;
+      }
+    }
+  }
+}
+
+section:nth-child(1) {
+  .bubble {
+    width: 65%;
+    top: 10%;
+    left: 10%;
+
+    &::before {
+      height: 5em;
+      transform: scaleX(-1) skew(-15deg) !important;
+    }
+
+    &::after {
+      content: "I'm sorry, but I can't find your name on the list.";
+    }
+  }
+
+  .person-1 {
+    .head {
+      .face {
+        .mouth {
+          border-radius: 50%;
+          width: 19%;
+        }
+        .eyebrow {
+          --diff: rotate(-4deg);
+          top: 40%;
+        }
+      }
+    }
+  }
+
+  .person-2 {
+    .head {
+      .face {
+        .eyebrow {
+          --diff: rotate(-4deg);
+        }
+      }
+    }
+  }
+}
+
+section:nth-child(2) {
+  .bubble {
+    width: 85%;
+    top: 3%;
+    
+    left: 5%;
+
+    &::before {
+      height: 7em;
+      
+      left: 24%;
+      transform: scaleX(-1) skew(20deg) !important;
+    }
+
+    &::after {
+      content: "That makes sense! As a Web Developer I did great things for humanity: I built accessible websites by adding aria-label to all elements.";
+      content: "That makes sense! When I was alive, I did great things for humanity: I built accessible websites by adding aria-label to all elements.";
+      
+      
+    }
+  }
+
+  /* tailwind */
+  /* .bubble {
+    top: 3%;
+    &::before { height: 7em; }
+    &::after {
+      content: "That makes sense! When I was alive, I did great things for humanity: I made the web better for everyone by adding Tailwind to all my projects.";
+      }
+  } */
+
+  .person-1 {
+    .body {
+      .arm {
+        transform: rotate(-15deg) translate(0em, -0.5em);
+        left: 87.75%;
+        & ~ & {
+          transform: rotate(12deg);
+        }
+      }
+    }
+  }
+
+  .person-2 {
+    .head {
+      .face {
+        .mouth {
+          height: 2.5%;
+          top: 85%;
+        }
+
+        .eyebrow {
+          top: 45%;
+
+          &~& {
+            top: 43%;
+            --diff: rotate(10deg);
+          }
+        }
+      }
+    }
+
+    .body {
+      .arm {
+        transform: rotate(-10deg);
+
+        &~& {
+          top: 18%;
+          transform: rotate(-3deg);
+        }
+      }
+    }
+  }
+}
+
+section:nth-child(3) {
+  .bubble {
+    width: 70%;
+    top: 7%;
+    left: 13%;
+
+    &::before {
+      height: 5em;
+      left: 73%;
+      transform: scaleX(-1) skew(-25deg) !important;
+    }
+
+    &::after {
+      content: "Oh! I see the mistake now! You are at the wrong desk! Go upstairs and turn right.";
+    }
+  }
+  .person-1 {
+    .head {
+      .face {
+        .mouth {
+          height: 12%;
+          top: 81%;
+          left: 58%;
+        }
+        .eyebrow {
+          --diff: rotate(4deg);
+          top: 40%;
+        }
+      }
+    }
+    .body {
+      .arm {
+        transform: rotate(-10deg) translate(0em, -0.5em);
+        left: 87.75%;
+        & ~ & {
+          transform: rotate(15deg);
+        }
+      }
+    }
+  }
+  .person-2 {
+    .head {
+      .face {
+        .mouth {
+          width: 15%;
+          height: 6%;
+          top: 85%;
+        }
+
+        .eyebrow {
+          --diff: rotate(-3deg);
+          top: 40%;
+        }
+      }
+    }
+
+    .body {
+      .arm {
+        transform: rotate(-26deg);
+
+        &~& {
+          transform: rotate(20deg);
+        }
+      }
+    }
+  }
+}
+
+section:nth-child(4) {
+  .table {
+    &::before {
+      content: "DOUBLE HELL";
+    }
+  }
+
+  .person-1 {
+    transform: rotate(-2deg);
+    bottom: -1%;
+
+    .head {
+      .face {
+        background:
+        linear-gradient(#07f3, #00f0 60%),
+          var(--skin);
+
+        .eyebrow {
+          top: 40%;
+          --diff: rotate(-16deg);
+        }
+
+        .mouth {
+          width: 20%;
+          height: 5%;
+          top: 84%;
+          left: 58%;
+          transform: translatE(-50%) scaleY(-1) rotate(2deg);
+        }
+      }
+    }
+  }
+
+
+  .person-2 {
+    .head {
+      .face {
+        
+        border-radius: 3.5em 3.5em 3em 3em;
+
+        &::after {
+          top: 0.1em;
+          height: 30%;
+          border-radius: 30% / 100%;
+        }
+
+        &::before {
+          content:"";
+          width: 40%;
+          height: 15%;
+          background: #000;
+          top: 100%;;
+          left: 59%;
+          transform: translateX(-50%);
+          clip-path: polygon(0 0, 100% 0, 70% 100%, 50% 70%, 30% 100%);
+        }
+
+        .eyebrow {
+          --diff: rotate(8deg);
+        }
+
+        .ear {
+          height: 20%;
+          width: 40%;
+          top: 57%;
+        }
+        .mouth {
+          transform: translate(-50%);
+          background:
+            linear-gradient(75deg, #0000 40%, #000 0 60%, #0000 0) 0 0 / 33.33% 100%,
+            linear-gradient(-75deg, #0000 40%, #000 0 60%, #0000 0) 16.66% 0 / 33.33% 100%,
+           yellow;
+          border: 0.4em solid;
+          width: 46%;
+          height: 11%;
+        }
+      }
+    }
+  }
+}
+
+section:nth-child(5) {
+  all: unset;
+  grid-column: 1/3;
+  text-align: right;
+  font-size: 2em;
+  font-family: Roboto, Helvetica, Arial, Verdana, sans-serif;
+  line-height: 0;
+
+  span {
+    position: relative;
+    font-size: 0.9em;
+  }
+}
+
+    </style>
+  </head>
+  <body>
+    <article role="img" aria-label="">
+      <section>
+        <div class="bubble bubble1 right"></div>
+        <div class="person person-1">
+          <div class="body">
+            <div class="arm"></div>
+            <div class="chest"></div>
+            <div class="arm"></div>
+          </div>
+          <div class="head">
+            <div class="neck"></div>
+            <div class="face">
+              <div class="ear"></div>
+              <div class="eye"></div>
+              <div class="eye"></div>
+              <div class="eyebrow"></div>
+              <div class="eyebrow"></div>
+              <div class="nose"></div>
+              <div class="mouth"></div>
+              <div class="hair"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="person person-2">
+          <div class="body">
+            <div class="arm"></div>
+            <div class="chest"></div>
+            <div class="arm"></div>
+          </div>
+          <div class="head">
+            <div class="neck"></div>
+            <div class="face">
+              <div class="ear"></div>
+              <div class="eye"></div>
+              <div class="eye"></div>
+              <div class="eyebrow"></div>
+              <div class="eyebrow"></div>
+              <div class="nose"></div>
+              <div class="mouth"></div>
+              <div class="hair"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="table"></div>
+      </section>
+      
+      <section>
+        <div class="bubble bubble1 right"></div>
+        <div class="person person-1">
+          <div class="body">
+            <div class="arm"></div>
+            <div class="chest"></div>
+            <div class="arm"></div>
+          </div>
+          <div class="head">
+            <div class="neck"></div>
+            <div class="face">
+              <div class="ear"></div>
+              <div class="eye"></div>
+              <div class="eye"></div>
+              <div class="eyebrow"></div>
+              <div class="eyebrow"></div>
+              <div class="nose"></div>
+              <div class="mouth"></div>
+              <div class="hair"></div>
+            </div>
+          </div>
+        </div>
+        <div class="person person-2">
+          <div class="body">
+            <div class="arm"></div>
+            <div class="chest"></div>
+            <div class="arm"></div>
+            <div class="breast"></div>
+            <div class="breast"></div>
+          </div>
+          <div class="head">
+            <div class="hair-back"></div>
+            <div class="neck"></div>
+            <div class="face">
+              <div class="ear"></div>
+              <div class="eye"></div>
+              <div class="eye"></div>
+              <div class="eyebrow"></div>
+              <div class="eyebrow"></div>
+              <div class="nose"></div>
+              <div class="mouth"></div>
+              <div class="hair"></div>
+            </div>
+          </div>
+        </div>
+        <div class="table"></div>
+      </section>
+      
+      <section>
+        <div class="bubble bubble2 right"></div>
+        <div class="person person-1">
+          <div class="body">
+            <div class="arm"></div>
+            <div class="chest"></div>
+            <div class="arm"></div>
+          </div>
+          <div class="head">
+            <div class="neck"></div>
+            <div class="face">
+              <div class="ear"></div>
+              <div class="eye"></div>
+              <div class="eye"></div>
+              <div class="eyebrow"></div>
+              <div class="eyebrow"></div>
+              <div class="nose"></div>
+              <div class="mouth"></div>
+              <div class="hair"></div>
+            </div>
+          </div>
+        </div>
+        <div class="person person-2">
+          <div class="body">
+            <div class="arm"></div>
+            <div class="chest"></div>
+            <div class="arm"></div>
+            <div class="breast"></div>
+            <div class="breast"></div>
+          </div>
+          <div class="head">
+            <div class="hair-back"></div>
+            <div class="neck"></div>
+            <div class="face">
+              <div class="ear"></div>
+              <div class="eye"></div>
+              <div class="eye"></div>
+              <div class="eyebrow"></div>
+              <div class="eyebrow"></div>
+              <div class="nose"></div>
+              <div class="mouth"></div>
+              <div class="hair"></div>
+            </div>
+          </div>
+        </div>
+        <div class="table"></div>
+      </section>
+    
+      <section>
+        <!-- <div class="bubble right"></div> -->
+        <div class="person person-1">
+            <div class="lines"></div>
+          <div class="body">
+            <div class="arm"></div>
+            <div class="chest"></div>
+            <div class="arm"></div>
+          </div>
+          <div class="head">
+            <div class="neck"></div>
+            <div class="face">
+              <div class="ear"></div>
+              <div class="eye"></div>
+              <div class="eye"></div>
+              <div class="eyebrow"></div>
+              <div class="eyebrow"></div>
+              <div class="nose"></div>
+              <div class="mouth"></div>
+              <div class="hair"></div>
+            </div>
+          </div>
+        </div>
+        <div class="person person-2">
+          <div class="body">
+            <div class="tail"></div>
+            <div class="arm"></div>
+            <div class="chest"></div>
+            <div class="arm"></div>
+          </div>
+          <div class="head">
+            <div class="neck"></div>
+            <div class="face">
+              <div class="ear"></div>
+              <div class="eye"></div>
+              <div class="eye"></div>
+              <div class="eyebrow"></div>
+              <div class="eyebrow"></div>
+              <div class="nose"></div>
+              <div class="mouth"></div>
+              <div class="hair"></div>
+            </div>
+          </div>
+        </div>
+        <div class="table"></div>
+      </section>
+      <section><span>COMI</span>CSS.ART</section>
+    </article>
+    <a href="/" style="position: fixed; bottom: 1rem; right: 1rem;" rel="up">See more comics</a>
+  </body>
+  </html>
\ No newline at end of file
diff --git a/comics/165/hell.png b/comics/165/hell.png
new file mode 100644
index 0000000..bbe1df3
Binary files /dev/null and b/comics/165/hell.png differ
diff --git a/comics/165/index.html b/comics/165/index.html
new file mode 100644
index 0000000..b1bb988
--- /dev/null
+++ b/comics/165/index.html
@@ -0,0 +1,228 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="author" content="Alvaro Montoro (alvaromontoro@gmail.com)" />
+    <meta name="keywords" content="comicss,webcomic,css,oc,humor,comic,cartoon,alvaro montoro,alvaro,montoro" />
+    <meta name="description" content="comiCSS: A webcomic about CSS. Coded in CSS." />
+    <meta name="theme-color" content="#993399" />
+
+    <title>comiCSS #165: Hell</title>
+
+    <meta property="og:title" content="comiCSS #165: Hell" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://comicss.art/comics/165" />
+    <meta property="og:image" content="https://comicss.art/comics/165/thumb.png" />
+    <meta property="og:description" content="A person is at the gate of Hell, a demon says 'you are not in the list', he replies 'of course not! I cared about everyone, even added aria-label to every HTML tag'. The demon replies 'I see, follow me' and guides him to a place called Double Hell" />
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:url" content="https://comicss.art/comics/165">
+    <meta name="twitter:title" content="comiCSS #165: Hell">
+    <meta name="twitter:description" content="A person is at the gate of Hell, a demon says 'you are not in the list', he replies 'of course not! I cared about everyone, even added aria-label to every HTML tag'. The demon replies 'I see, follow me' and guides him to a place called Double Hell">
+    <meta name="twitter:image" content="https://comicss.art/comics/165/thumb.png">
+    <meta name="monetization" content="$ilp.uphold.com/raZZQiMDDWLe" />
+
+    <link rel="shortcut icon" href="/favicon.png" />
+
+    <link rel="canonical" href="https://comicss.art/comics/165" />
+
+    <link rel="stylesheet" href="/css/almond.lite.min.css" />
+    <link rel="stylesheet" href="/css/styles.css" />
+  </head>
+  <body class="home">
+    <a href="#main" class="skip-link">Skip to main content</a>
+    <header>
+      <div>
+        <h2 class="page-title"><a href="/" rel="self" aria-current="page">comi<span>c</span><span>ss</span></a></h2>
+        <p>A webcomic about CSS. Coded in CSS.</p>
+      </div>
+      <nav aria-label="primary">
+        <ul>
+          <li>
+            <a href="/archive/" rel="archives">
+              <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true">
+                <path d="M12,30 5,30 5,5 95,5 95,30 88,30 88,95 12,95 12,30 88,30" />
+                <rect rx="3" ry="3" x="30" width="40" y="45" height="15" />
+              </svg><span>Archive</span>
+            </a>
+          </li>
+          <li>
+            <a href="/blog/">
+              <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true">
+                <path d="M95,30 30,95 5,95 5,70 70,5Z M5,95 12,88 M45,95 55,95 M65,95 75,95 M85,95 95,95" />
+              </svg><span>Blog</span>
+            </a>
+          </li>
+          <li>
+            <a href="/about/" rel="about">
+              <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true">
+                <path d="M50,40 C85,60 95,80 95,95 95,95 5,95 5,95 5,80 15,60 50,40Z" />
+                <circle cx="50" cy="30" r="25" style="fill:#fff" />
+              </svg><span>About</span>
+            </a>
+          </li>
+          <li>
+            <a href="/contact/">
+              <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true">
+                <path d="M95,15 95,85 5,85 5,15 95,15 50,55 5,15Z" />
+              </svg><span>Contact</span>
+            </a>
+          </li>
+          <li>
+            <a href="https://twitter.com/comi_CSS" rel="external author">
+              <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true">
+                <path d="M95,15 95,75 55,75 35,95 35,75 5,75 5,15Z" stroke-linejoin="round" />
+              </svg><span>Twitter</span>
+            </a>
+          </li>
+          <li>
+            <a href="https://comicss.printify.me" rel="external payment nofollow">
+              <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true">
+                <path d="M0,5 15,5 35,75 85,75 95,25 18,25" stroke-linejoin="round" />
+                <circle cx="40" cy="90" r="10" style="fill:currentColor; stroke-width: 0" />
+                <circle cx="80" cy="90" r="10" style="fill:currentColor; stroke-width: 0" />
+              </svg><span>Store</span>
+            </a>
+          </li>
+          <li>
+            <a href="https://www.patreon.com/alvaromontoro" rel="external payment">
+              <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true">
+                <path d="M9,0 9,100" style="stroke-width:18" />
+                <circle cx="62" cy="38" r="38" style="fill:currentColor; stroke-width: 0" />
+              </svg><span>Patreon</span>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <main id="main" class="latest">
+      <noscript>
+        This website needs JavaScript to navigate. But, you can see all the drawings linked at once 
+        (without needing any JavaScript) in the <a href="/archive">Archive</a>.
+      </noscript>
+
+      <h1>Hell</h1>
+
+      <nav aria-label="Comic strip browsing">
+        <a href="/comics/1" rel="first">
+          <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true">
+            <path d="M10,0 10,100 M100,0 50,50 100,100" />
+          </svg>
+          <span>First</span>
+        </a>
+        <a href="/comics/164" rel="prev">
+          <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true">
+            <path d="M75,0 25,50 75,100" />
+          </svg>
+          <span>Previous</span>
+        </a>
+        <a class="random-post" href="/comics/18">
+          <svg width="1em" height="1em" viewBox="0 0 100 100" class="random" aria-hidden="true">
+            <path class="random" d="M100,25 80,2 80,48Z" />
+            <path class="random" d="M100,75 80,98 80,52Z" />
+            <path d="M0,25 20,25 65,75 90,75 M0,75 20,75 65,25 95,25" />
+          </svg>
+          <span>Random</span>
+        </a>
+        <a href="/comics/166" rel="next">
+          <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true">
+            <path d="M25,0 75,50 25,100" />
+          </svg>
+          <span>Next</span>
+        </a>
+        <a href="/" rel="last">
+          <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true">
+            <path d="M90,0 90,100 M0,0 50,50 0,100" />
+          </svg>
+          <span>Last</span>
+        </a>
+      </nav>
+
+      <div id="comic-strip" role="img" class="" aria-label="A person is at the gate of Hell, a demon says 'you are not in the list', he replies 'of course not! I cared about everyone, even added aria-label to every HTML tag'. The demon replies 'I see, follow me' and guides him to a place called Double Hell">
+        <img src="/comics/165/165-hell-0.webp" alt="" width="350" />
+        <img src="/comics/165/165-hell-1.webp" alt="" width="350" />
+        <img src="/comics/165/165-hell-2.webp" alt="" width="350" />
+        <img src="/comics/165/165-hell-3.webp" alt="" width="350" />
+      </div>
+
+      <nav aria-label="Comic strip browsing">
+        <a href="/comics/1" rel="first">
+          <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true">
+            <path d="M10,0 10,100 M100,0 50,50 100,100" />
+          </svg>
+          <span>First</span>
+        </a>
+        <a href="/comics/164" rel="prev">
+          <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true">
+            <path d="M75,0 25,50 75,100" />
+          </svg>
+          <span>Previous</span>
+        </a>
+        <a class="random-post" href="/comics/74">
+          <svg width="1em" height="1em" viewBox="0 0 100 100" class="random" aria-hidden="true">
+            <path class="random" d="M100,25 80,2 80,48Z" />
+            <path class="random" d="M100,75 80,98 80,52Z" />
+            <path d="M0,25 20,25 65,75 90,75 M0,75 20,75 65,25 95,25" />
+          </svg>
+          <span>Random</span>
+        </a>
+        <a href="/comics/166" rel="next">
+          <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true">
+            <path d="M25,0 75,50 25,100" />
+          </svg>
+          <span>Next</span>
+        </a>
+        <a href="/" rel="last">
+          <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true">
+            <path d="M90,0 90,100 M0,0 50,50 0,100" />
+          </svg>
+          <span>Last</span>
+        </a>
+      </nav>
+
+      <p>Permalink: <a aria-label="permanet link" id="permanent-link" href="/comics/165">https://comicss.art/comics/165</a></p>
+      <p>Image link: <a aria-label="image version" id="image-link" href="/comics/165/hell.png">https://comicss.art/comics/165/hell.png</a></p>
+      <p>Source code: <a aria-label="html version" id="code-link" href="/comics/165/hell.html" rel="alternate">https://comicss.art/comics/165/hell.html</a></p>
+
+      <hr />
+      <p>This work is licensed under a <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="license external noreferrer nofollow">Creative Commons Attribution-NonCommercial 4.0 License</a>.</p>
+      <p>You are free to copy and share these comics, but not to sell them. <a href="/license" rel="license">More details on the license and use rights</a>.</p>
+      <hr />
+    </main>
+    <nav class="thumbs-nav" aria-label="trending comics">
+      <ul>
+        <li><a href="/comics/2"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-2.webp" alt="" /><span class="a11y-hidden">Comic 2</span></a></li>
+        <li><a href="/comics/46"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-46.webp" alt="" /><span class="a11y-hidden">Comic 46</span></a></li>
+        <li><a href="/comics/16"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-16.webp" alt="" /><span class="a11y-hidden">Comic 16</span></a></li>
+        <li><a href="/comics/48"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-48.webp" alt="" /><span class="a11y-hidden">Comic 48</span></a></li>
+        <li><a href="/comics/29"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-29.webp" alt="" /><span class="a11y-hidden">Comic 29</span></a></li>
+        <li><a href="/comics/32"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-32.webp" alt="" /><span class="a11y-hidden">Comic 32</span></a></li>
+        <li><a href="/comics/39"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-39.webp" alt="" /><span class="a11y-hidden">Comic 39</span></a></li>
+        <li><a href="/comics/50"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-50.webp" alt="" /><span class="a11y-hidden">Comic 50</span></a></li>
+        <li><a href="/comics/51"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-51.webp" alt="" /><span class="a11y-hidden">Comic 51</span></a></li>
+        <li><a href="/comics/59"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-59.webp" alt="" /><span class="a11y-hidden">Comic 59</span></a></li>
+        <li><a href="/comics/67"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-67.webp" alt="" /><span class="a11y-hidden">Comic 67</span></a></li>
+        <li><a href="/comics/78"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-78.webp" alt="" /><span class="a11y-hidden">Comic 78</span></a></li>
+        <li><a href="/comics/80"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-80.webp" alt="" /><span class="a11y-hidden">Comic 80</span></a></li>
+      </ul>
+    </nav>
+
+    <footer>
+      Copyright &copy; 2021-2024. <a href="https://alvaromontoro.com" rel="author external">Alvaro Montoro</a>
+      &mdash; <a href="/atom.xml">Atom Feed</a>
+      &mdash; <a href="/rss.xml">RSS Feed</a>
+      <hr />
+      <nav aria-labelledby="webring" class="full">
+        <h2 id="webring">CSS JOY Webring</h2>
+        <a href="https://webri.ng/webring/cssjoy/previous?via=https://comicss.art">Previous</a>
+        <a href="https://webri.ng/webring/cssjoy/random?via=https://comicss.art">Random</a>
+        <a href="https://webri.ng/webring/cssjoy/next?via=https://comicss.art">Next</a>
+      </nav>
+    </footer>
+
+    <script>let postId = 165;</script>
+    <script src="/js/data.js?"></script>
+    <script src="/js/code.js"></script>
+  </body>
+</html>
diff --git a/comics/165/thumb.png b/comics/165/thumb.png
new file mode 100644
index 0000000..bbe1df3
Binary files /dev/null and b/comics/165/thumb.png differ
diff --git a/index.html b/index.html
index 873fd8b..eca1a2d 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@
 
     <link rel="shortcut icon" href="/favicon.png" />
 
-    <link rel=canonical href=https://comicss.art />
+    <link rel="canonical" href="https://comicss.art" />
 
     <link rel="stylesheet" href="/css/almond.lite.min.css" />
     <link rel="stylesheet" href="/css/styles.css" />
@@ -102,7 +102,7 @@ <h2 class="page-title"><a href="/" rel="self" aria-current="page">comi<span>c</s
         (without needing any JavaScript) in the <a href="/archive">Archive</a>.
       </noscript>
 
-      <h1>AI Edits</h1>
+      <h1>Hell</h1>
 
       <nav aria-label="Comic strip browsing">
         <a href="/comics/1" rel="first">
@@ -111,13 +111,13 @@ <h1>AI Edits</h1>
           </svg>
           <span>First</span>
         </a>
-        <a href="/comics/163" rel="prev">
+        <a href="/comics/164" rel="prev">
           <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true">
             <path d="M75,0 25,50 75,100" />
           </svg>
           <span>Previous</span>
         </a>
-        <a class="random-post" href="/comics/114">
+        <a class="random-post" href="/comics/18">
           <svg width="1em" height="1em" viewBox="0 0 100 100" class="random" aria-hidden="true">
             <path class="random" d="M100,25 80,2 80,48Z" />
             <path class="random" d="M100,75 80,98 80,52Z" />
@@ -139,11 +139,11 @@ <h1>AI Edits</h1>
         </a>
       </nav>
 
-      <div id="comic-strip" class="" role="img" aria-label="cartoon with two panels. A person off-panel asks 'did Alvaro start using AI to edit the comics?', another person in the panel replies 'I don't know. You think he does?'. The first person is now in-panel and has large breasts and a cleavage 'I have a suspicion he did'">
-        <img src="/comics/164/164-ai-edits-0.webp" alt="" width="350" />
-        <img src="/comics/164/164-ai-edits-1.webp" alt="" width="350" />
-        <img src="/comics/164/164-ai-edits-2.webp" alt="" width="350" />
-        <img src="/comics/164/164-ai-edits-3.webp" alt="" width="350" />
+      <div id="comic-strip" class="" role="img" aria-label="A person is at the gate of Hell, a demon says 'you are not in the list', he replies 'of course not! I cared about everyone, even added aria-label to every HTML tag'. The demon replies 'I see, follow me' and guides him to a place called Double Hell">
+        <img src="/comics/165/165-hell-0.webp" alt="" width="350" />
+        <img src="/comics/165/165-hell-1.webp" alt="" width="350" />
+        <img src="/comics/165/165-hell-2.webp" alt="" width="350" />
+        <img src="/comics/165/165-hell-3.webp" alt="" width="350" />
       </div>
 
       <nav aria-label="Comic strip browsing">
@@ -153,13 +153,13 @@ <h1>AI Edits</h1>
           </svg>
           <span>First</span>
         </a>
-        <a href="/comics/163" rel="prev">
+        <a href="/comics/164" rel="prev">
           <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true">
             <path d="M75,0 25,50 75,100" />
           </svg>
           <span>Previous</span>
         </a>
-        <a class="random-post" href="/comics/25">
+        <a class="random-post" href="/comics/74">
           <svg width="1em" height="1em" viewBox="0 0 100 100" class="random" aria-hidden="true">
             <path class="random" d="M100,25 80,2 80,48Z" />
             <path class="random" d="M100,75 80,98 80,52Z" />
@@ -181,9 +181,9 @@ <h1>AI Edits</h1>
         </a>
       </nav>
 
-      <p>Permalink: <a aria-label="permalink" id="permanent-link" href="/comics/164">https://comicss.art/comics/164</a></p>
-      <p>Image link: <a aria-label="image link" id="image-link" href="/comics/164/ai-edits.png">https://comicss.art/comics/164/ai-edits.png</a></p>
-      <p>Source code: <a aria-label="html version" id="code-link" href="/comics/164/ai-edits.html" rel="alternate">https://comicss.art/comics/164/ai-edits.html</a></p>
+      <p>Permalink: <a aria-label="permalink" id="permanent-link" href="/comics/165">https://comicss.art/comics/165</a></p>
+      <p>Image link: <a aria-label="image link" id="image-link" href="/comics/165/hell.png">https://comicss.art/comics/165/hell.png</a></p>
+      <p>Source code: <a aria-label="html version" id="code-link" href="/comics/165/hell.html" rel="alternate">https://comicss.art/comics/165/hell.html</a></p>
 
       <hr />
       <p>This work is licensed under a <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="license external noreferrer nofollow">Creative Commons Attribution-NonCommercial 4.0 License</a>.</p>
@@ -222,7 +222,7 @@ <h2 id="webring">CSS JOY Webring</h2>
     </footer>
 
     <script>let postId = 0;</script>
-    <script src="/js/data.js?last-updated=2024-10-25"></script>
+    <script src="/js/data.js?last-updated=2024-11-02"></script>
     <script src="/js/code.js"></script>
   </body>
 </html>
diff --git a/js/data.js b/js/data.js
index dec4532..36d74a2 100644
--- a/js/data.js
+++ b/js/data.js
@@ -1290,4 +1290,11 @@ const posts = [
     title: "AI Edits",
     ariaLabel: "Comic with 4 panels in a 2x2 grid. A woman and a man are talking - Man: 'Hey, Ann! Long time no see here on comiCSS! How are you doing?' Woman: 'Yeah... I've been worried about showing up around here since people started using AI to edit cartoons and images. It always takes a sexist turn...' Man: And you think Alvaro will use AI to edit the CSS comics?. Woman (changed in this last panel to look slimmer and taller, and to have darker skin, cleavage, and bigger breasts): 'I dunno... But I have a suspicion he just started...'"
   },
+  {
+    id: 165,
+    uid: "hell",
+    boxes: 4,
+    title: "Hell",
+    ariaLabel: "A person is at the gate of Hell, a demon says 'you are not in the list', he replies 'of course not! I cared about everyone, even added aria-label to every HTML tag'. The demon replies 'I see, follow me' and guides him to a place called Double Hell"
+  },
 ]
diff --git a/rss.xml b/rss.xml
index d829e39..c54d563 100644
--- a/rss.xml
+++ b/rss.xml
@@ -1646,5 +1646,15 @@
       <enclosure url="https://comicss.art/comics/164/ai-edits.png" length="238000" type="image/png" />
       <author>alvaromontoro@gmail.com (Alvaro Montoro)</author>
     </item>
+    <item>
+      <guid isPermaLink="true">https://comicss.art/comics/165</guid>
+      <title>Hell</title>
+      <link>https://comicss.art/comics/165</link>
+      <category>Comic strip</category>
+      <description>A cartoon coded in CSS from comiCSS.</description>
+      <pubDate>Mon, 11 Nov 2024 00:00:00 +0000</pubDate>
+      <enclosure url="https://comicss.art/comics/165/hell.png" length="241000" type="image/png" />
+      <author>alvaromontoro@gmail.com (Alvaro Montoro)</author>
+    </item>
   </channel>
 </rss>
