diff --git a/css/shared.css b/css/shared.css
index eea1648..d13a0dd 100644
--- a/css/shared.css
+++ b/css/shared.css
@@ -1,37 +1,13 @@
-html {
-	height: 100vh;
-	width: 100vw;
-	background: linear-gradient(45deg, gold 2%, purple);
-	overflow: hidden;
-	margin: 0px;
-	animation: gradient 35s linear infinite;
-	background-size: 180% 180%;
-}
-
-body {
-	display: flex;
-	color: white;
-	margin: 0px;
-}
+:root { color: white; font-family:sans-serif }
 
+body { margin: 0px; }
 
 .artical {
-	width: min(calc(100vw - 4em), 55em);
 	margin: auto;
-	margin-top: 2em;
-	height: 25em;
 	overflow: hidden;
 	transition-duration: 1.5s;
-}
-
-.artical:hover {
-	width: calc(100% - 8em);
-	height: calc(100vh - 6em);
-	overflow: scroll;
-}
-
-.artical h1 {
-	margin: auto auto 0px auto;
+	width:25%;
+	display: block;
 }
 
 .artical hr {
@@ -41,18 +17,29 @@ body {
 	height: 0.3em;
 }
 
+.artical embed{
+	  position: sticky;
+	  height:100%;
+	  width:100%;
+	  overflow:hidden;
+}
+
 .artical:hover .preview {
 	display: none;
 }
 
 .content {
 	display: none;
+	color: white;
 }
 
 .artical:hover .content {
 	display: block;
 }
 
+
+
+
 .glass {
 	background: rgba(128, 128, 128, 0.35);
 	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
@@ -60,6 +47,16 @@ body {
 	padding: 1em 2em;
 }
 
+.sunset {
+	background: linear-gradient(45deg, gold 2%, purple);
+	margin: 0px;
+	animation: gradient 35s linear infinite;
+	background-size: 180% 180%;
+	height: 100vh;
+	width: 100vw;
+	position: fixed;
+	z-index: -1;
+}
 
 @keyframes gradient {
 	0% {
diff --git a/index.html b/index.html
index 497f252..cdff9b9 100644
--- a/index.html
+++ b/index.html
@@ -5,16 +5,32 @@
 <head>
 	<meta charset="UTF-8">
 	<link rel="stylesheet" href="css/shared.css">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/comic-mono@0.0.1/index.css">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta name="description" content="A simple blog">
 </head>
 
 <body>
-	<div class="glass artical">
-		<h1>Test title #1</h1>
-		<hr>
-		<p class="preview">test text</p>
-		<p class="content">test content</p>
+	<div class="sunset"></div>
+	<div class=slide>
+		<span class="glass artical">
+			<h1>Test title #1</h1>
+			<hr>
+			<embed class="preview" type="text/html" src="snippet.html"></embed>
+			<embed class="content" type="text/html" src="snippet.html"></embed>
+		</span>
+		<span class="glass artical">
+			<h1>Test title #2</h1>
+			<hr>
+			<embed class="preview" type="text/html" src="snippet.html"></embed>
+			<embed class="content" type="text/html" src="snippet.html"></embed>
+		</span>
+		<span class="glass artical">
+			<h1>Test title #2</h1>
+			<hr>
+			<embed class="preview" type="text/html" src="snippet.html"></embed>
+			<embed class="content" type="text/html" src="snippet.html"></embed>
+		</span>
 	</div>
 </body>
 
diff --git a/snippet.html b/snippet.html
new file mode 100644
index 0000000..f78aa9b
--- /dev/null
+++ b/snippet.html
@@ -0,0 +1,68 @@
+<link rel="stylesheet" href="css/shared.css">
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+<p>hello mario</p>
+
