Add details not found page

src/main/resources/static/details.css

@@ -14,12 +14,14 @@ main {
     }
     
     & > :first-child {
-        border-radius: var(--corner-radius) var(--corner-radius) 0 0;
+        border-top-left-radius: var(--corner-radius);
+        border-top-right-radius: var(--corner-radius);
         margin-top: var(--pad-main);
     }
 
     & > :last-child {
-        border-radius: 0 0 var(--corner-radius) var(--corner-radius);
+        border-bottom-left-radius: var(--corner-radius);
+        border-bottom-right-radius: var(--corner-radius);
         margin-bottom: var(--pad-main);
     }
 
@@ -43,10 +45,13 @@ header {
     grid-gap: var(--gap-medium);
 }
 
-#title {
-    grid-column: 1 / 3;
+h1 {
     margin-block: var(--gap-medium) 0;
     text-align: center;
+}
+
+#title {
+    grid-column: 1 / 3;
 
     &::after {
         content: attr(data-type);
@@ -69,7 +74,7 @@ header {
     }
 }
 
-:has(#rating), #url {
+#details summary, #url {
     text-align: start;
     grid-column: 1 / 3;
 }
@@ -103,10 +108,6 @@ a {
     color: var(--text-color); 
 }
 
-#terms-of-use {
-    /* text-align: end; */
-}
-
 .upvote {
     margin: var(--gap-medium) 0;
     align-self: self-start;
@@ -125,10 +126,10 @@ a {
     text-wrap: balance;
     text-wrap: pretty;
     margin-top: 0;
+}
 
-    br {
-        margin-bottom: .5lh;
-    }
+:is(#full-description, #not-found) br {
+    margin-bottom: .5lh;
 }
 
 .skeleton {
@@ -178,3 +179,22 @@ a {
         background-position-x: calc(1.4 * var(--min-card-size)), 0;
     }
 }
+
+#not-found:not(.hidden) {
+    min-height: calc(100vh - 2 * var(--pad-main));
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-large);
+    justify-content: space-evenly;
+    container: nothing-found / inline-size;
+
+    p, h1 {
+        text-align: center;
+        text-wrap: balance;
+        text-wrap: pretty;
+    }
+}
+
+#nothing-found-bg {
+    background-position-x: calc(50% + 3cqh);
+}