diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 7677400..4206c6b 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -9,7 +9,202 @@
 		    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
 		{{ end -}}
 		<link rel="stylesheet" href="{{ .Site.BaseURL }}css/normalize.css">
-		<link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css">
+		<style>
+		html {
+			background-color: black;
+			color: #dfdfdf;
+		}
+		/* ubuntu-font */
+		@font-face {
+			font-family: "UbuntuMono";
+			src: local('UbuntuMono-B'), url("../fonts/UbuntuMono-Bold.ttf");
+			font-weight: bold;
+		}
+		@font-face {
+			font-family: "UbuntuMono";
+			src: local('UbuntuMono-RI'), url("../fonts/UbuntuMono-Italic.ttf");
+			font-style: italic;
+		}
+		@font-face {
+			font-family: "UbuntuMono";
+			src: local('UbuntuMono-R'), url("../fonts/UbuntuMono-Regular.ttf");
+		}
+		#background {
+			position: fixed;
+			z-index: -1;
+			background-color: rgb(47, 41, 41);/*rgb(153, 34, 13);*/
+			width: 100%;
+			height: 100%;
+		}
+		@keyframes backgroundFallin {
+			00% {height: 0%;}
+			10% {height: 0%;}
+			50% {height: 100%;}
+			65% {height: 80%;}
+			80% {height: 100%;}
+			90% {height: 90%;}
+			100% {height: 100%;}
+		}
+		@keyframes headspin {
+			0% {transform: rotate(-760deg) scale(0,0);}
+			100% {transform: rotate(0deg) scale(1,1);}
+		}
+		@keyframes dealfall {
+			0% {transform: translateY(-2000%) }
+			1% {transform: translateY(-200%) }
+			100% {transform: translateY(0%) }
+		}
+		body {
+			font-family: 'UbuntuMono';
+			display: flex;
+			flex-flow: row;
+			text-align: center;
+			font-size: 20px;
+		}
+		body > header {
+			width: 100%;
+			position: absolute;
+			text-align: center;
+			align-content: center;
+			display: flex;
+			flex-flow: row;
+		}
+		body > header h1 {
+			display: flex;
+			flex-flow: row;
+			margin: 0;
+		}
+		#main {
+			flex: auto;
+			min-height: 100vh;
+			overflow: hidden;
+		
+			display: flex;
+			flex-flow: column;
+			align-items: center;
+		}
+		#main > nav, #main > main, #main > footer {
+			padding: 15px;
+		}
+		#main > main {
+			flex: 1;
+			margin-right: 25px;
+		}
+		#main > footer {
+			padding-top: 50px;
+		}
+		@media (prefers-color-scheme: dark) {
+			html {
+				background-color: black;
+				color: #dfdfdf;
+			}
+			article img:not([src$=".jpg"]):not([src$=".jpeg"]) {
+				/* prevent transparent images from showing the black background */
+				background-color: white;
+				border: 5px solid white;
+				box-sizing: border-box;
+			}
+		}
+		/* Article list */
+		.article-list {
+			max-width: 45em;
+			width: 90vw;
+		}
+		.article-list article{
+			margin: 1.2em 0 0 0;
+		}
+		.article-list article > header {
+			display: flex;
+			flex-flow: row;
+			align-items: center;
+			margin-bottom: 0;
+		}
+		.article-list article time {
+			color:grey;
+		}
+		.article-list article h3 {
+			display: inline-block;
+			margin: 0.5em;
+		}
+		.article-list .summary {
+			text-align: justify;
+			margin: 0 1em;
+		}
+		.article-list article small {
+			font-weight: normal;
+			color: gray;
+		}
+		a, a:visited {
+			color: inherit;
+		}
+		article > header {
+			text-align: center;
+			margin-bottom: 2em;
+		}
+		article > header time {
+			color: gray;
+		}
+		article {
+			max-width: 45em;
+			width: 90vw;
+			text-align: justify;
+		}
+		table {
+			margin: auto;
+			width: 90%;
+			background: #221d1d;
+		}
+		table, th, td {
+			padding: 15px;
+			text-align: left;
+			border-color: #4c4c4c;
+			border-collapse: collapse;
+			border: 1px solid black;
+		}
+		article video, article img {
+			max-width: 100%;
+		}
+		article img[src$='#center'] {
+			display: block;
+			margin: 0.7rem auto;
+		}
+		article img[src$='#floatleft'] {
+			float:left;
+			margin: 0.7rem;
+		}
+		article img[src$='#floatright'] {
+			float:right;
+			margin: 0.7rem;
+		}
+		article .footnotes {
+			font-size: 0.75em;
+		}
+		pre {
+			background-color: #272822;
+			color: #f8f8f2;
+			padding: 15px;
+			overflow: auto;
+		
+			tab-size: 2;
+			-moz-tab-size: 2;
+		}
+		p code, li code {
+			color: #930d72;
+		}
+		.centerdiv {
+			margin: 0;
+			position: absolute;
+			display: flex;
+			width: 100%;
+			height: 90%;
+			z-index: -1;
+		}
+		.logo_anim {
+			margin:auto;
+			max-height: 60%;
+			max-width: 60%;
+		}
+		</style>
 		<link rel="shortcut icon" type="image/x-icon" href="{{ .Site.BaseURL }}\img\favicon.ico" />
 	</head>
 	<body>