diff --git a/site/cretin.png b/site/cretin.png
new file mode 100644
index 0000000..f4641ff
Binary files /dev/null and b/site/cretin.png differ
diff --git a/site/humans/distracting.html b/site/humans/distracting.html
index 2b41390..7edb223 100644
--- a/site/humans/distracting.html
+++ b/site/humans/distracting.html
@@ -5,13 +5,13 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>something silly - distracting</title>
-	<style>
-		html { color-scheme: dark; }
-	</style>
+	<link rel="stylesheet" href="/style.css">
+	<link rel="icon" type="image/x-icon" href="/cretin.png">
 </head>
 
 <body>
-	<h1>distracting </h1>
+	<main>
+		<h1>distracting </h1>
 <p>
 i work in an open office. that means there are 30 people in the same room trying to work. and between 1 and 5 conversations happening at once. i cannot work if i hear people talking, this is a constant problem. loud music helps some but makes me more tired too.<br>
 today i brought a bearing, i like to fidget with something while i think. <br>
@@ -23,6 +23,7 @@ i refuse to believe that <em>anyone</em> likes open offices. they just suck. bos
 <p>
 go back to <a href="/">procrastinating</a><br>
 
+	</main>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/site/index.html b/site/index.html
index 936a197..6422c8a 100644
--- a/site/index.html
+++ b/site/index.html
@@ -5,13 +5,13 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>something silly - index</title>
-	<style>
-		html { color-scheme: dark; }
-	</style>
+	<link rel="stylesheet" href="/style.css">
+	<link rel="icon" type="image/x-icon" href="/cretin.png">
 </head>
 
 <body>
-	<h1>crispys blug</h1>
+	<main>
+		<h1>crispys blug</h1>
 <p>
 hello i might write some words here from time to time<br>
 </p>
@@ -34,6 +34,7 @@ this means it is<br>
 - todo: put more words in the computer<br>
 </p>
 
+	</main>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/site/keyboards-are-fun.html b/site/keyboards-are-fun.html
index a7111ce..8558564 100644
--- a/site/keyboards-are-fun.html
+++ b/site/keyboards-are-fun.html
@@ -5,13 +5,13 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>something silly - keyboards-are-fun</title>
-	<style>
-		html { color-scheme: dark; }
-	</style>
+	<link rel="stylesheet" href="/style.css">
+	<link rel="icon" type="image/x-icon" href="/cretin.png">
 </head>
 
 <body>
-	<h1>keyboards!</h1>
+	<main>
+		<h1>keyboards!</h1>
 <p>
 I love weird keyboards. I have many ideas for more weird keyboards that I might make one day, physical and digital.<br>
 </p>
@@ -30,6 +30,7 @@ this bit was written with 8vim<br>
 <p>
 <a href="/">click other words</a><br>
 
+	</main>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/site/style.css b/site/style.css
new file mode 100644
index 0000000..bc32d34
--- /dev/null
+++ b/site/style.css
@@ -0,0 +1,13 @@
+html {
+	color-scheme: dark;
+	font-family: sans-serif;
+}
+
+main {
+	width: 800px;
+	background-color: #222;
+	margin: auto;
+	padding: 2px 32px 32px;
+	border-left: 4px solid #d39;
+	border-right: 4px solid #d39;
+}
\ No newline at end of file
diff --git a/template.html b/template.html
index b3f8726..1d90c3e 100644
--- a/template.html
+++ b/template.html
@@ -5,13 +5,14 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>something silly - {FILENAME}</title>
-	<style>
-		html { color-scheme: dark; }
-	</style>
+	<link rel="stylesheet" href="/style.css">
+	<link rel="icon" type="image/x-icon" href="/cretin.png">
 </head>
 
 <body>
-	{CONTENT}
+	<main>
+		{CONTENT}
+	</main>
 </body>
 
-</html>
+</html>
\ No newline at end of file
