diff --git a/doc/default.nix b/doc/default.nix
index bcbc20b9f983b9b..40cddf3dd7e703e 100644
--- a/doc/default.nix
+++ b/doc/default.nix
@@ -122,13 +122,12 @@ in pkgs.stdenv.mkDerivation {
       ${pkgs.documentation-highlighter}/mono-blue.css \
       ${pkgs.documentation-highlighter}/loader.js
 
-    cp -t out ./overrides.css ./style.css
+    cp -t out ./style.css
 
     nixos-render-docs manual html \
       --manpage-urls ./manpage-urls.json \
       --revision ${pkgs.lib.trivial.revisionWithDefault (pkgs.rev or "master")} \
       --stylesheet style.css \
-      --stylesheet overrides.css \
       --stylesheet highlightjs/mono-blue.css \
       --script ./highlightjs/highlight.pack.js \
       --script ./highlightjs/loader.js \
diff --git a/doc/overrides.css b/doc/overrides.css
deleted file mode 100644
index 73901a3f543bf92..000000000000000
--- a/doc/overrides.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.docbook .xref img[src^=images\/callouts\/],
-.screen img,
-.programlisting img,
-.literallayout img,
-.synopsis img {
-    width: 1em;
-}
-
-.calloutlist img {
-    width: 1.5em;
-}
-
-.prompt,
-.screen img,
-.programlisting img,
-.literallayout img,
-.synopsis img {
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
diff --git a/doc/style.css b/doc/style.css
index 474dd32e3fb148c..3a8baeb04fac648 100644
--- a/doc/style.css
+++ b/doc/style.css
@@ -1,291 +1,391 @@
-/* Copied from http://bakefile.sourceforge.net/, which appears
-   licensed under the GNU GPL. */
+html {
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+}
 
+body {
+    margin: 0;
+}
 
-/***************************************************************************
-                             Basic headers and text:
- ***************************************************************************/
+.book {
+    margin: auto;
+    width: 100%;
+}
 
-body
-{
-    font-family: "Nimbus Sans L", sans-serif;
-    font-size: 1em;
-    background: white;
-    margin: 2em 1em 2em 1em;
+@media screen and (min-width: 768px) {
+    .book {
+        max-width: 46rem;
+    }
 }
 
-h1, h2, h3, h4
-{
-    color: #005aa0;
+@media screen and (min-width: 992px) {
+    .book {
+        max-width: 60rem;
+    }
 }
 
-h1 /* title */
-{
-    font-size: 200%;
+@media screen and (min-width: 1200px) {
+    .book {
+        max-width: 73rem;
+    }
 }
 
-h2 /* chapters, appendices, subtitle */
-{
-    font-size: 180%;
+.book .list-of-examples {
+    display: none;
 }
 
-div.book
-{
-    text-align: center;
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
 }
 
-div.book > div
-{
-    /*
-     * based on https://medium.com/@zkareemz/golden-ratio-62b3b6d4282a
-     * we do 70 characters per line to fit code listings better
-     * 70 * (font-size / 1.618)
-     * expression for emacs:
-     * (* 70 (/ 1 1.618))
-     */
-    max-width: 43.2em;
-    text-align: left;
-    margin: auto;
+hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow: visible;
 }
 
-/* Extra space between chapters, appendices. */
-div.chapter > div.titlepage h2, div.appendix > div.titlepage h2
-{
-    margin-top: 1.5em;
+pre {
+    font-family: monospace, monospace;
+    font-size: 1em;
 }
 
-div.section > div.titlepage h2 /* sections */
-{
-    font-size: 150%;
-    margin-top: 1.5em;
+a {
+    background-color: transparent;
 }
 
-h3 /* subsections */
-{
-    font-size: 125%;
+strong {
+    font-weight: bolder;
 }
 
-div.simplesect h2
-{
-    font-size: 110%;
+code {
+    font-family: monospace, monospace;
+    font-size: 1em;
 }
 
-div.appendix h3
-{
-    font-size: 150%;
-    margin-top: 1.5em;
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
 }
 
-div.refnamediv h2, div.refsynopsisdiv h2, div.refsection h2 /* refentry parts */
-{
-    margin-top: 1.4em;
-    font-size: 125%;
+sup {
+    top: -0.5em;
 }
 
-div.refsection h3
-{
-    font-size: 110%;
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
 }
 
+pre {
+    overflow: auto;
+}
 
-/***************************************************************************
-                               Examples:
- ***************************************************************************/
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
 
-div.example
-{
-    border: 1px solid #b0b0b0;
-    padding: 6px 6px;
-    margin-left: 1.5em;
-    margin-right: 1.5em;
-    background: #f4f4f8;
-    border-radius: 0.4em;
-    box-shadow: 0.4em 0.4em 0.5em #e0e0e0;
+html {
+    font-size: 100%;
+    line-height: 1.77777778;
 }
 
-div.example p.title
-{
-    margin-top: 0em;
+@media screen and (min-width: 4000px) {
+    html {
+        background: #000;
+    }
+
+    html body {
+        margin: auto;
+        max-width: 250rem;
+    }
 }
 
-div.example pre
-{
-    box-shadow: none;
+@media screen and (max-width: 320px) {
+    html {
+        font-size: calc(16 / 320 * 100vw);
+    }
 }
 
+body {
+    font-size: 1rem;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    color: #000000;
+    background-color: #ffffff;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
 
-/***************************************************************************
-                            Screen dumps:
- ***************************************************************************/
+@media screen and (max-width: 767.9px) {
+    body {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}
 
-pre.screen, pre.programlisting
-{
-    border: 1px solid #b0b0b0;
-    padding: 3px 3px;
-    margin-left: 0.5em;
-    margin-right: 0.5em;
+a {
+    text-decoration: none;
+    border-bottom: 1px solid;
+    color: #405d99;
+}
 
-    background: #f4f4f8;
-    font-family: monospace;
-    border-radius: 0.4em;
-    box-shadow: 0.4em 0.4em 0.5em #e0e0e0;
+ul {
+    padding: 0;
+    margin-top: 0;
+    margin-right: 0;
+    margin-bottom: 1rem;
+    margin-left: 1rem;
 }
 
-div.example pre.programlisting
-{
-    border: 0px;
-    padding: 0 0;
-    margin: 0 0 0 0;
+table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-bottom: 1rem;
 }
 
-/***************************************************************************
-                               Notes, warnings etc:
- ***************************************************************************/
+thead th {
+    text-align: left;
+}
 
-.note, .warning
-{
-    border: 1px solid #b0b0b0;
-    padding: 3px 3px;
-    margin-left: 1.5em;
-    margin-right: 1.5em;
-    margin-bottom: 1em;
-    padding: 0.3em 0.3em 0.3em 0.3em;
-    background: #fffff5;
-    border-radius: 0.4em;
-    box-shadow: 0.4em 0.4em 0.5em #e0e0e0;
+hr {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
 }
 
-div.note, div.warning
-{
-    font-style: italic;
+h1 {
+    font-weight: 800;
+    line-height: 110%;
+    font-size: 250%;
+    margin-bottom: 1rem;
+    color: #6586c8;
 }
 
-div.note h3, div.warning h3
-{
-    color: red;
-    font-size: 100%;
-    padding-right: 0.5em;
-    display: inline;
+h2 {
+    font-weight: 800;
+    line-height: 110%;
+    font-size: 200%;
+    margin-bottom: 0.625rem;
+    color: #6586c8;
 }
 
-div.note p, div.warning p
-{
-    margin-bottom: 0em;
+h2:not(:first-child) {
+    margin-top: 1rem;
 }
 
-div.note h3 + p, div.warning h3 + p
-{
-    display: inline;
+h3 {
+    font-weight: 800;
+    line-height: 110%;
+    margin-bottom: 1rem;
+    font-size: 150%;
+    color: #6586c8;
 }
 
-div.note h3
-{
-    color: blue;
-    font-size: 100%;
+h4 {
+    font-weight: 800;
+    line-height: 110%;
+    margin-bottom: 1rem;
+    font-size: 140%;
+    color: #6586c8;
 }
 
-div.navfooter *
-{
-    font-size: 90%;
+h5 {
+    font-weight: 800;
+    line-height: 110%;
+    margin-bottom: 1rem;
+    font-size: 130%;
+    color: #6a6a6a;
 }
 
+h6 {
+    font-weight: 800;
+    line-height: 110%;
+    margin-bottom: 1rem;
+}
 
-/***************************************************************************
-                        Links colors and highlighting:
- ***************************************************************************/
+strong {
+    font-weight: bold;
+}
 
-a { text-decoration: none; }
-a:hover { text-decoration: underline; }
-a:link { color: #0048b3; }
-a:visited { color: #002a6a; }
+p {
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
 
+dt>*:first-child,
+dd>*:first-child {
+    margin-top: 0;
+}
 
-/***************************************************************************
-                              Table of contents:
- ***************************************************************************/
+dt>*:last-child,
+dd>*:last-child {
+    margin-bottom: 0;
+}
 
-div.toc
-{
-    font-size: 90%;
+pre,
+code {
+    font-family: monospace;
 }
 
-div.toc dl
-{
-    margin-top: 0em;
-    margin-bottom: 0em;
+code {
+    color: #ff8657;
+    background: #f4f4f4;
+    display: inline-block;
+    padding: 0 0.5rem;
+    border: 1px solid #d8d8d8;
+    border-radius: 0.5rem;
+    line-height: 1.57777778;
 }
 
+div.book .programlisting {
+    border-radius: 1.25rem;
+    padding: 1rem;
+    overflow: auto;
+}
 
-/***************************************************************************
-                               Special elements:
- ***************************************************************************/
+div.book .programlisting {
+    background: #f2f8fd;
+    color: #000000;
+    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1) inset;
+}
 
-tt, code
-{
-    color: #400000;
+div.book .note,
+div.book .tip,
+div.book .warning,
+div.book .caution,
+div.book .important {
+    margin-bottom: 1rem;
+    border-radius: 1.25rem;
+    padding: 1.5rem;
+    overflow: auto;
+    background: #f4f4f4;
 }
 
-.term
-{
-    font-weight: bold;
+div.book .note>.title,
+div.book .tip>.title,
+div.book .warning>.title,
+div.book .caution>.title,
+div.book .important>.title {
+    font-weight: 800;
+    /* font-family: 'Overpass', serif; */
+    line-height: 110%;
+    margin-bottom: 1rem;
+    color: inherit;
+    margin-bottom: 0;
+}
 
+div.book .note> :first-child,
+div.book .tip> :first-child,
+div.book .warning> :first-child,
+div.book .caution> :first-child,
+div.book .important> :first-child {
+    margin-top: 0;
 }
 
-div.variablelist dd p, div.glosslist dd p
-{
-    margin-top: 0em;
+div.book .note> :last-child,
+div.book .tip> :last-child,
+div.book .warning> :last-child,
+div.book .caution> :last-child,
+div.book .important> :last-child {
+    margin-bottom: 0;
 }
 
-div.variablelist dd, div.glosslist dd
-{
-    margin-left: 1.5em;
+div.book .note,
+div.book .tip {
+    color: #5277c3;
+    background: #f2f8fd;
 }
 
-div.glosslist dt
-{
-    font-style: italic;
+div.book .warning,
+div.book .caution {
+    color: #cc3900;
+    background-color: #fff5e1;
 }
 
-.varname
-{
-    color: #400000;
+div.book .section {
+    margin-top: 2em;
 }
 
-span.command strong
-{
-    font-weight: normal;
-    color: #400000;
+div.book div.example {
+    margin-top: 1.5em;
 }
 
-div.calloutlist table
-{
-    box-shadow: none;
+div.book br.example-break {
+    display: none;
 }
 
-table
-{
-    border-collapse: collapse;
-    box-shadow: 0.4em 0.4em 0.5em #e0e0e0;
+div.book div.footnotes>hr {
+    border-color: #d8d8d8;
 }
 
-table.simplelist
-{
-    text-align: left;
-    color: #005aa0;
+div.book div.footnotes>br {
+    display: none;
+}
+
+div.book dt {
+    margin-top: 1em;
+}
+
+div.book .toc dt {
+    margin-top: 0;
+}
+
+div.book .list-of-examples dt {
+    margin-top: 0;
+}
+
+div.book code {
+    padding: 0;
     border: 0;
-    padding: 5px;
-    background: #fffff5;
-    font-weight: normal;
-    font-style: italic;
-    box-shadow: none;
-    margin-bottom: 1em;
+    background-color: inherit;
+    color: inherit;
+    font-size: 100%;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    hyphens: none;
+}
+
+div.book div.toc {
+    margin-bottom: 3em;
+    border-bottom: 0.0625rem solid #d8d8d8;
+}
+
+div.book div.toc dd {
+    margin-left: 2em;
+}
+
+div.book span.command {
+    font-family: monospace;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    hyphens: none;
+}
+
+div.book .informaltable th,
+div.book .informaltable td {
+    padding: 0.5rem;
+}
+
+div.book h1 {
+    font-size: 200%;
+    margin-bottom: 0.625rem;
 }
 
-div.navheader table, div.navfooter table {
-    box-shadow: none;
+div.book h2 {
+    font-size: 150%;
+    margin-bottom: 1rem;
 }
 
-div.affiliation
-{
-    font-style: italic;
+div.book h3 {
+    font-size: 140%;
 }
+
+div.book h4 {
+    font-size: 130%;
+    color: #6a6a6a;
+}
\ No newline at end of file
diff --git a/nixos/doc/manual/default.nix b/nixos/doc/manual/default.nix
index a368b16201f8f98..cf9dcb482760677 100644
--- a/nixos/doc/manual/default.nix
+++ b/nixos/doc/manual/default.nix
@@ -105,7 +105,6 @@ in rec {
       mkdir -p $dst
 
       cp ${../../../doc/style.css} $dst/style.css
-      cp ${../../../doc/overrides.css} $dst/overrides.css
       cp -r ${pkgs.documentation-highlighter} $dst/highlightjs
 
       ${prepareManualFromMD}
@@ -115,7 +114,6 @@ in rec {
         --revision ${lib.escapeShellArg revision} \
         --generator "nixos-render-docs ${lib.version}" \
         --stylesheet style.css \
-        --stylesheet overrides.css \
         --stylesheet highlightjs/mono-blue.css \
         --script ./highlightjs/highlight.pack.js \
         --script ./highlightjs/loader.js \
diff --git a/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py b/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py
index b9227814dea2087..2cc462f017b6c02 100644
--- a/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py
+++ b/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py
@@ -163,7 +163,7 @@ def attr_span_begin(self, token: Token, tokens: Sequence[Token], i: int) -> str:
         # keycap-styled spans.
         (id_part, class_part) = ("", "")
         if s := token.attrs.get('id'):
-            id_part = f'<a id="{escape(cast(str, s), True)}" />'
+            id_part = f'<a id="{escape(cast(str, s), True)}"></a>'
         if s := token.attrs.get('class'):
             if s == 'keycap':
                 class_part = '<span class="keycap"><strong>'
diff --git a/pkgs/tools/nix/nixos-render-docs/src/tests/test_html.py b/pkgs/tools/nix/nixos-render-docs/src/tests/test_html.py
index fba0ce2679a411e..e5aaac627296e4e 100644
--- a/pkgs/tools/nix/nixos-render-docs/src/tests/test_html.py
+++ b/pkgs/tools/nix/nixos-render-docs/src/tests/test_html.py
@@ -167,7 +167,7 @@ def test_full() -> None:
           <span class="citerefentry"><span class="refentrytitle">man</span>(1)</span>
          </a> reference
         </p>
-        <p><a id="b" />some <a id="a" />nested anchors</p>
+        <p><a id="b"></a>some <a id="a"></a>nested anchors</p>
         <p>
          <span class="emphasis"><em>emph</em></span>␣
          <span class="strong"><strong>strong</strong></span>␣