Move stylesheet inline with HTML file

I can't be bothered to fiddle with the server's cache settings,
and it doesn't matter anyway.

static/c3lingo.css

-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol, ul {
-  list-style: none;
-}
-blockquote, q {
-  quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-
-body {
-  font: 1em/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-}
-
-a {
-  text-decoration: none;
-}
-a:hover {
-  text-decoration: underline;
-}
-
-a.block-link {
-  display: block;
-  color: inherit;
-  background-color: #ececec;
-  padding: 1em;
-}
-a.block-link:hover {
-  text-decoration: none;
-  background-color: #e2e2e2;
-}
-a.block-link:active {
-  background-color: #d9d9d9;
-}
-a.block-link h1 {
-  color: blue;
-}
-
-/* For elements that occur next to block links but aren't clickable */
-.block-padding {
-  display: block;
-  padding: 1em;
-}
-
-.wrapper {
-  max-width: 60rem;
-  margin: 0 auto;
-  padding: 0 1rem;
-}
-
-.page {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  min-height: 100vh;
-}
-
-main {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  padding: 3em 0;
-}
-
-main header {
-  margin-bottom: 2rem;
-}
-
-main header h1 {
-  font-size: 3em;
-  margin-bottom: 1rem;
-}
-
-footer {
-  background-color: #ececec;
-  padding: 1em 0;
-}
-
-.main-grid {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin: 2em -.5em;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-}
-.main-grid > * {
-  margin: .5em;
-  -ms-flex-preferred-size: 20em;
-      flex-basis: 20em;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-}
-
-section h2 {
-  font-size: 1.4rem;
-  margin-bottom: 1rem;
-}
-section > * + * {
-  margin-top: .5rem;
-}
-section > * + h2 {
-  margin-top: 2rem;
-}
-strong, b, dt {
-  font-weight: 700;
-}
-dd + dt {
-  margin-top: .5rem;
-}
-.field {
-  border: 1px solid #ddd;
-  padding: .2em;
-}
-.field.blank {
-  user-select: none;
-  -moz-user-select: none;
-  pointer-events: none;
-  color: #999;
-}
-.language-selection {
-  text-align: right;
-  margin-top: 1rem;
-}
-.language-selection > * {
-  margin-left: 0.5em;
-}
-
-body[lang="en"] [data-lang="de"] {
-  display: none;
-}
-body[lang="en"] [data-lang="fr"] {
-  display: none;
-}
-body[lang="de"] [data-lang="en"] {
-  display: none;
-}
-body[lang="de"] [data-lang="fr"] {
-  display: none;
-}
-body[lang="fr"] [data-lang="de"] {
-  display: none;
-}
-body[lang="fr"] [data-lang="en"] {
-  display: none;
-}
-
-.callout {
-  padding: .5em;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  border-radius: 3px;
-}
-.callout--error {
-  background-color: #f2cdcc;
-  color: #520000;
-}
-.callout--success {
-  background-color: rgb(217, 243, 220);
-  color: rgb(1, 71, 7);
-}

static/index.html

@@ -4,7 +4,220 @@
     <meta charset="utf-8">
     <title>36C3 Live Translations</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="c3lingo.css?v2">
+    <style>
+      html, body, div, span, applet, object, iframe,
+      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+      a, abbr, acronym, address, big, cite, code,
+      del, dfn, em, img, ins, kbd, q, s, samp,
+      small, strike, strong, sub, sup, tt, var,
+      b, u, i, center,
+      dl, dt, dd, ol, ul, li,
+      fieldset, form, label, legend,
+      table, caption, tbody, tfoot, thead, tr, th, td,
+      article, aside, canvas, details, embed,
+      figure, figcaption, footer, header, hgroup,
+      menu, nav, output, ruby, section, summary,
+      time, mark, audio, video {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+      }
+      /* HTML5 display-role reset for older browsers */
+      article, aside, details, figcaption, figure,
+      footer, header, hgroup, menu, nav, section {
+        display: block;
+      }
+      body {
+        line-height: 1;
+      }
+      ol, ul {
+        list-style: none;
+      }
+      blockquote, q {
+        quotes: none;
+      }
+      blockquote:before, blockquote:after,
+      q:before, q:after {
+        content: '';
+        content: none;
+      }
+      table {
+        border-collapse: collapse;
+        border-spacing: 0;
+      }
+
+
+      body {
+        font: 1em/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+      }
+
+      a {
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+
+      a.block-link {
+        display: block;
+        color: inherit;
+        background-color: #ececec;
+        padding: 1em;
+      }
+      a.block-link:hover {
+        text-decoration: none;
+        background-color: #e2e2e2;
+      }
+      a.block-link:active {
+        background-color: #d9d9d9;
+      }
+      a.block-link h1 {
+        color: blue;
+      }
+
+      /* For elements that occur next to block links but aren't clickable */
+      .block-padding {
+        display: block;
+        padding: 1em;
+      }
+
+      .wrapper {
+        max-width: 60rem;
+        margin: 0 auto;
+        padding: 0 1rem;
+      }
+
+      .page {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+        min-height: 100vh;
+      }
+
+      main {
+        -webkit-box-flex: 1;
+            -ms-flex-positive: 1;
+                flex-grow: 1;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        padding: 3em 0;
+      }
+
+      main header {
+        margin-bottom: 2rem;
+      }
+
+      main header h1 {
+        font-size: 3em;
+        margin-bottom: 1rem;
+      }
+
+      footer {
+        background-color: #ececec;
+        padding: 1em 0;
+      }
+
+      .main-grid {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        margin: 2em -.5em;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+      }
+      .main-grid > * {
+        margin: .5em;
+        -ms-flex-preferred-size: 20em;
+            flex-basis: 20em;
+        -webkit-box-flex: 1;
+            -ms-flex-positive: 1;
+                flex-grow: 1;
+        -ms-flex-negative: 0;
+            flex-shrink: 0;
+      }
+
+      section h2 {
+        font-size: 1.4rem;
+        margin-bottom: 1rem;
+      }
+      section > * + * {
+        margin-top: .5rem;
+      }
+      section > * + h2 {
+        margin-top: 2rem;
+      }
+      strong, b, dt {
+        font-weight: 700;
+      }
+      dd + dt {
+        margin-top: .5rem;
+      }
+      .field {
+        border: 1px solid #ddd;
+        padding: .2em;
+      }
+      .field.blank {
+        user-select: none;
+        -moz-user-select: none;
+        pointer-events: none;
+        color: #999;
+      }
+      .language-selection {
+        text-align: right;
+        margin-top: 1rem;
+      }
+      .language-selection > * {
+        margin-left: 0.5em;
+      }
+
+      body[lang="en"] [data-lang="de"] {
+        display: none;
+      }
+      body[lang="en"] [data-lang="fr"] {
+        display: none;
+      }
+      body[lang="de"] [data-lang="en"] {
+        display: none;
+      }
+      body[lang="de"] [data-lang="fr"] {
+        display: none;
+      }
+      body[lang="fr"] [data-lang="de"] {
+        display: none;
+      }
+      body[lang="fr"] [data-lang="en"] {
+        display: none;
+      }
+
+      .callout {
+        padding: .5em;
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+        border-radius: 3px;
+      }
+      .callout--error {
+        background-color: #f2cdcc;
+        color: #520000;
+      }
+      .callout--success {
+        background-color: rgb(217, 243, 220);
+        color: rgb(1, 71, 7);
+      }
+    </style>
   </head>
   <body>
     <div class="page">