diff --git a/viewer/css/pdf_viewer.css b/viewer/css/pdf_viewer.css
new file mode 100644
index 0000000..3abb7c8
--- /dev/null
+++ b/viewer/css/pdf_viewer.css
@@ -0,0 +1,47 @@
+html,
+body {
+    height: 100%;
+}
+
+body,
+canvas {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    background-color: #c0c0c0;
+}
+
+#container {
+    --scale-factor: 1;
+
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+}
+
+#container canvas,
+#container .textLayer {
+    /* overlay child elements on top of each other */
+    grid-row-start: 1;
+    grid-column-start: 1;
+}
+
+canvas {
+    display: inline-block;
+    position: relative;
+}
+
+[data-main-rotation="90"] {
+    transform: rotate(90deg);
+}
+
+[data-main-rotation="180"] {
+    transform: rotate(180deg);
+}
+
+[data-main-rotation="270"] {
+    transform: rotate(270deg);
+}
diff --git a/viewer/css/text_layer.css b/viewer/css/text_layer.css
new file mode 100644
index 0000000..0753d24
--- /dev/null
+++ b/viewer/css/text_layer.css
@@ -0,0 +1,68 @@
+:root {
+    --text-layer-opacity: 0.2;
+    --text-layer-foreground: transparent;
+}
+
+.textLayer {
+    text-align: initial;
+    position: absolute;
+    overflow: hidden;
+    opacity: var(--text-layer-opacity);
+    line-height: 1;
+}
+
+.textLayer span,
+.textLayer br {
+    color: var(--text-layer-foreground);
+    position: absolute;
+    white-space: pre;
+    cursor: text;
+    transform-origin: 0 0;
+}
+
+.textLayer .highlight {
+    margin: -1px;
+    padding: 1px;
+    background-color: rgba(180, 0, 170, 1);
+    border-radius: 4px;
+}
+
+.textLayer .highlight.appended {
+    position: initial;
+}
+
+.textLayer .highlight.begin {
+    border-radius: 4px 0 0 4px;
+}
+
+.textLayer .highlight.end {
+    border-radius: 0 4px 4px 0;
+}
+
+.textLayer .highlight.middle {
+    border-radius: 0;
+}
+
+.textLayer .highlight.selected {
+    background-color: rgba(0, 100, 0, 1);
+}
+
+.textLayer ::selection {
+    background: rgba(0, 0, 255, 1);
+}
+
+.textLayer .endOfContent {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    cursor: default;
+    user-select: none;
+}
+
+.textLayer .endOfContent.active {
+    top: 0;
+}
diff --git a/viewer/main.css b/viewer/main.css
index 883b8c2..fb59309 100644
--- a/viewer/main.css
+++ b/viewer/main.css
@@ -1,111 +1,2 @@
-:root {
-    --text-layer-opacity: 0.2;
-    --text-layer-foreground: transparent;
-}
-
-html, body {
-    height: 100%;
-}
-
-body, canvas {
-    padding: 0;
-    margin: 0;
-}
-
-body {
-    background-color: #c0c0c0;
-}
-
-#container {
-    --scale-factor: 1;
-
-    width: 100%;
-    height: 100%;
-    display: grid;
-    place-items: center;
-}
-
-#container canvas, #container .textLayer {
-    /* overlay child elements on top of each other */
-    grid-row-start: 1;
-    grid-column-start: 1;
-}
-
-canvas {
-    display: inline-block;
-    position: relative;
-}
-
-.textLayer {
-    text-align: initial;
-    position: absolute;
-    overflow: hidden;
-    opacity: var(--text-layer-opacity);
-    line-height: 1;
-}
-
-.textLayer span,
-.textLayer br {
-    color: var(--text-layer-foreground);
-    position: absolute;
-    white-space: pre;
-    cursor: text;
-    transform-origin: 0 0;
-}
-
-.textLayer .highlight {
-    margin: -1px;
-    padding: 1px;
-    background-color: rgba(180, 0, 170, 1);
-    border-radius: 4px;
-}
-
-.textLayer .highlight.appended {
-    position: initial;
-}
-
-.textLayer .highlight.begin {
-    border-radius: 4px 0 0 4px;
-}
-
-.textLayer .highlight.end {
-    border-radius: 0 4px 4px 0;
-}
-
-.textLayer .highlight.middle {
-    border-radius: 0;
-}
-
-.textLayer .highlight.selected {
-    background-color: rgba(0, 100, 0, 1);
-}
-
-.textLayer ::selection {
-    background: rgba(0, 0, 255, 1);
-}
-
-.textLayer .endOfContent {
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 100%;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
-    cursor: default;
-    user-select: none;
-}
-
-.textLayer .endOfContent.active {
-    top: 0;
-}
-
-[data-main-rotation="90"] {
-    transform: rotate(90deg);
-}
-[data-main-rotation="180"] {
-    transform: rotate(180deg);
-}
-[data-main-rotation="270"] {
-    transform: rotate(270deg);
-}
+@import url(css/pdf_viewer.css);
+@import url(css/text_layer.css);