diff --git a/cv.css b/cv.css
new file mode 100644
index 0000000..e38633b
--- /dev/null
+++ b/cv.css
@@ -0,0 +1,60 @@
+h3 {
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+}
+
+aside {
+	margin-top: -0.6rem;
+	text-transform: uppercase;
+	opacity: 0.7;
+	letter-spacing: 0.05em;
+	line-height: 1;
+}
+
+section#publications span.journal,
+section#conferences span.conference {
+	font-style: italic;
+}
+
+h2 {
+	border-bottom-width: 1px;
+	border-bottom-color: var(--accent);
+	border-bottom-style: solid;
+}
+
+@media print {
+	:root {
+		--primary: #000000;
+		--background: #ffffff;
+		--accent: #000000;
+	}
+
+	h2 {
+		border-bottom-width: 0.5pt;
+	}
+
+	html,
+	body {
+		max-width: initial;
+		font-size: 10pt;
+		padding: 0;
+	}
+
+	aside {
+		opacity: 1.0;
+	}
+
+	a::after {
+		display: none;
+	}
+
+	a:hover {
+		background: inherit;
+	}
+
+	@page {
+		margin: 25mm;
+		size: A4;
+	}
+}
diff --git a/cv.html b/cv.html
index 573f354..934869b 100644
--- a/cv.html
+++ b/cv.html
@@ -5,6 +5,9 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="style.css">
+	<link rel="stylesheet" href="cv.css">
+
 	<meta name="description"
 		content="The curriculum vitae of Benjamin Stadlbauer including his professional background and education">
 	<meta property="og:title" content="The CV of Benjamin Stadlbauer">
@@ -22,153 +25,6 @@
 	<meta name="theme-color" content="#ffffff">
 
 	<title>CV Benjamin Stadlbauer</title>
-	<style>
-		:root {
-			--white-neutral: #f4f4f9;
-			--white-hover: #ececff;
-			--black-neutral: #1a1a1c;
-			--black-hover: #282833;
-			--accent: #7a7a99;
-
-			--primary: var(--black-neural);
-			--background: var(--white-neutral);
-			--hover-background: var(--white-hover);
-		}
-
-		body {
-			color: var(--primary);
-			background-color: var(--background);
-			padding: 3ch;
-			max-width: 80ch;
-			margin: 0 auto;
-			font-family: system-ui;
-			line-height: 1.6;
-		}
-
-		ul {
-			list-style-type: "-";
-			padding-left: 1.5em;
-		}
-
-		li {
-			padding-left: 0.25em;
-		}
-
-		h3 {
-			display: flex;
-			justify-content: space-between;
-			flex-wrap: wrap;
-			line-height: 1.4;
-			font-weight: normal;
-			font-size: 1.2rem;
-			margin: 1.2rem 0;
-		}
-
-		a {
-			color: inherit;
-			text-decoration: none;
-		}
-
-		a::after {
-			/* copied from https://practicaltypography.com/how-to-use.html */
-			position: relative;
-			content: "\FEFF°";
-			margin-left: 0.1em;
-			font-size: 90%;
-			top: -0.1em;
-			color: var(--accent);
-			font-feature-settings: "caps";
-			font-variant-numeric: normal;
-		}
-
-		a:hover {
-			background: var(--hover-background);
-			transition-property: background;
-			transition-duration: 0.2s;
-		}
-
-		h2 {
-			border-bottom-width: 1px;
-			border-bottom-color: var(--accent);
-			border-bottom-style: solid;
-			line-height: 1.2;
-			font-size: 1.44rem;
-			font-weight: normal;
-			margin: 1.44rem 0;
-		}
-
-		h1 {
-			line-height: 1.0;
-			font-weight: normal;
-			font-size: 1.73rem;
-			margin: 1.73rem 0;
-		}
-
-		aside {
-			margin-top: -0.6rem;
-			text-transform: uppercase;
-			opacity: 0.7;
-			letter-spacing: 0.05em;
-			line-height: 1;
-		}
-
-		section#publications span.journal,
-		section#conferences span.conference {
-			font-style: italic;
-		}
-
-		@media (prefers-color-scheme: light) {
-			:root {
-				--primary: var(--black-neural);
-				--background: var(--white-neutral);
-				--hover-background: var(--white-hover);
-			}
-		}
-
-		@media (prefers-color-scheme: dark) {
-			:root {
-				--primary: var(--white-neutral);
-				--background: var(--black-neutral);
-				--hover-background: var(--black-hover);
-			}
-		}
-
-		@media print {
-			:root {
-				--primary: #000000;
-				--background: #ffffff;
-				--accent: #000000;
-			}
-
-			h2 {
-				border-bottom-width: 0.5pt;
-			}
-
-			html,
-			body {
-				max-width: initial;
-				font-size: 10pt;
-				padding: 0;
-			}
-
-			aside {
-				opacity: 1.0;
-			}
-
-			a::after {
-				display: none;
-			}
-
-			a:hover {
-				background: inherit;
-			}
-
-			@page {
-				margin: 25mm;
-				size: A4;
-			}
-		}
-	</style>
 </head>
 
 <body>
@@ -270,14 +126,16 @@
 		<h2>Skills</h2>
 		<ul>
 			<li>Experience with Java, C/C++ and JavaScript</li>
-			<li>With help and preparation I can work with Apache Maven, Apache Thrift, HTML, CSS, Python, Common Lisp, LaTeX</li>
+			<li>With help and preparation I can work with Apache Maven, Apache Thrift, HTML, CSS, Python, Common Lisp,
+				LaTeX</li>
 			<li>Deeper knowledge of and experience with Git</li>
 			<li>Can work in a Windows, Linux and MacOS environment</li>
 			<li>Willing to learn and adapt to other programming languages</li>
 			<li>Very conscientious way of working</li>
 		</ul>
 		<p>
-			German is my native language and I am fluent and experienced in English (I have an Academic-IELTS-score of 8.0
+			German is my native language and I am fluent and experienced in English (I have an Academic-IELTS-score of
+			8.0
 			from 2018 which is equivalent to an CEFR-score of C1&ndash;C2).
 		</p>
 	</section>
diff --git a/index.html b/index.html
index d586134..c6bb347 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Benjamin&rsquo;s Website</title>
+	<link rel="stylesheet" href="style.css">
 
 	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -14,6 +14,9 @@
 	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
 	<meta name="msapplication-TileColor" content="#2b5797">
 	<meta name="theme-color" content="#ffffff">
+
+	<title>Benjamin&rsquo;s Website</title>
+
 	<script>
 		async function getIssues() {
 			let response = await fetch("https://benjamin.stadlbauer.wien/git/api/v1/repos/Benjamin/personal-website/issues?state=open", {
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..f21359e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,91 @@
+:root {
+	--white-neutral: #f4f4f9;
+	--white-hover: #ececff;
+	--black-neutral: #1a1a1c;
+	--black-hover: #282833;
+	--accent: #7a7a99;
+
+	--primary: var(--black-neural);
+	--background: var(--white-neutral);
+	--hover-background: var(--white-hover);
+}
+
+body {
+	color: var(--primary);
+	background-color: var(--background);
+	padding: 3ch;
+	max-width: 80ch;
+	margin: 0 auto;
+	font-family: system-ui;
+	line-height: 1.6;
+}
+
+ul {
+	list-style-type: "-";
+	padding-left: 1.5em;
+}
+
+li {
+	padding-left: 0.25em;
+}
+
+h3 {
+	line-height: 1.4;
+	font-weight: normal;
+	font-size: 1.2rem;
+	margin: 1.2rem 0;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+a::after {
+	/* copied from https://practicaltypography.com/how-to-use.html */
+	position: relative;
+	content: "\FEFF°";
+	margin-left: 0.1em;
+	font-size: 90%;
+	top: -0.1em;
+	color: var(--accent);
+	font-feature-settings: "caps";
+	font-variant-numeric: normal;
+}
+
+a:hover {
+	background: var(--hover-background);
+	transition-property: background;
+	transition-duration: 0.2s;
+}
+
+h2 {
+	line-height: 1.2;
+	font-size: 1.44rem;
+	font-weight: normal;
+	margin: 1.44rem 0;
+}
+
+h1 {
+	line-height: 1.0;
+	font-weight: normal;
+	font-size: 1.73rem;
+	margin: 1.73rem 0;
+}
+
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--primary: var(--black-neural);
+		--background: var(--white-neutral);
+		--hover-background: var(--white-hover);
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--primary: var(--white-neutral);
+		--background: var(--black-neutral);
+		--hover-background: var(--black-hover);
+	}
+}