diff --git a/index.html b/index.html
index c50f85e..6962240 100644
--- a/index.html
+++ b/index.html
@@ -15,21 +15,21 @@
   </head>
   <body>
     <div class="wrapper">
-      <div class="content">
-        <span class="title">Hello world!</span>
-      </div>
-      <img src="/illustration.svg" class="illustration" />
-    </div>
-    <div class="remix">
-      <div>
-        <a href="https://glitch.com/edit/#!/remix/glitch-hello-website" class="btn--remix">
+        <div class="content">
+          <span class="title">Hello World!</span>
           <img
-            src="https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576"
+            src="illustration.svg"
+            class="illustration"
+            alt="Editor illustration"
           />
+        </div>
+      </div>
+      <nav class="navigation">
+        <a href="https://glitch.com/edit/#!/remix/glitch-hello-website" class="btn--remix">
+          <img src="https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576" />
           Remix on Glitch
         </a>
-      </div>
-    </div>
+      </nav>
 
     <!-- include the Glitch button to show what the webpage is about and
           to make it easier for folks to view source and remix -->
diff --git a/style.css b/style.css
index 49a601e..61caea3 100644
--- a/style.css
+++ b/style.css
@@ -1,38 +1,71 @@
-/* Our CSS values that we'll use in the rest of our styling */
+/* Our default values set for mobile */
 :root {
-  --main-bg-color: #69F7BE;
-  --main-text-color: #373fff;
+  --color-bg: #69F7BE;
+  --color-text-main: #2800FF;
+  --wrapper-height: 87vh;
+  --image-max-width: 300px;
+  --image-margin: 3rem;
+
+}
+
+/* Tablet portrait */
+@media (min-width: 768px) {
+  :root {
+    --wrapper-height: 87vh;
+    --image-max-width: 400px;
+    --image-margin: 5rem;
+  }
+}
+
+/* Tablet Landscape */
+@media (min-width: 1024px) {
+  :root {
+    --wrapper-height: 87vh;
+    --image-max-width: 500px;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1280px) {
+  :root {
+    --wrapper-height: 87vh;
+    --image-max-width: 500px;
+  }
 }
 
 @font-face {
-    font-family: HK Grotesk;
-    src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Regular.otf?v=1602782380076") format("opentype");
+  font-family: HK Grotesk;
+  src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Regular.otf?v=1602782380076")
+    format("opentype");
 }
 
 @font-face {
-    font-family: HK Grotesk;
-    font-weight: bold;
-    src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Bold.otf?v=1602782484249") format("opentype");
+  font-family: HK Grotesk;
+  font-weight: bold;
+  src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Bold.otf?v=1602782484249")
+    format("opentype");
 }
 
 body {
   font-family: HK Grotesk;
-  background-color: var(--main-bg-color);
+  background-color: var(--color-bg);
 }
 
 .title {
-  color: var(--main-text-color);
+  color: var(--color-text-main);
   font-family: HK Grotesk;
   font-style: normal;
   font-weight: bold;
-  font-size: 164px;
+  font-size: 120px;
   line-height: 105%;
 }
 
 .wrapper {
-  min-height: 95vh;
+  min-height: var(--wrapper-height);
   display: grid;
   place-items: center;
+  margin-left: 2rem;
+  margin-top: 3rem;
 }
 
 .content {
@@ -40,18 +73,21 @@ body {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 1rem;
+}
+
+/* Navigation grid */
+.navigation {
+  display: flex;
+  justify-content: flex-end;
 }
 
 /* Our remix on glitch button + grid for other actions */
-.remix {
-  display: grid;
-  place-items: end;
-}
-
 .btn--remix {
   font-family: HK Grotesk;
-  padding: .5rem .75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
   font-size: 1.1rem;
   line-height: 1rem;
   font-weight: 500;
@@ -62,14 +98,28 @@ body {
   border: 1px solid #000000;
   box-sizing: border-box;
   border-radius: 4px;
-  text-decoration: none;
+}
+
+.btn--remix:hover {
+  background-color: #D0FFF1;
 }
 
 .btn--remix img {
-  margin-right: .75rem;
+  margin-right: 0.5rem;
 }
 
+.btn--remix {
+  margin-right: 1rem;
+}
+
+/* Very light scaling for our illustration */
 .illustration {
   max-width: 100%;
-
+  max-height: var(--image-max-width);
+  margin-top: var(--image-margin);
 }
+
+
+/*
+  Add hover state to the buttons!! oops
+*/
\ No newline at end of file
