From dd77ae8cfec257c10e4479cf878f9fa600472aac Mon Sep 17 00:00:00 2001
From: "Glitch (hello-webpage)" <none>
Date: Thu, 15 Oct 2020 20:27:52 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=AE=F0=9F=8E=AE=20Checkpoint=20./style?=
 =?UTF-8?q?.css:617503/4720=20./index.html:617503/15?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html |  2 +-
 style.css  | 66 ++++++++++++++++++++++++++++++++++--------------------
 2 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 7af7653..961f186 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
       </div>
       <img src="/illustration.svg" class="illustration" />
     </div>
-    <div class="remix">
+    <div class="navigation">
       <div>
         <button class="btn--remix">
           <img
diff --git a/style.css b/style.css
index ecb2144..6b65807 100644
--- a/style.css
+++ b/style.css
@@ -1,43 +1,58 @@
-/* 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;
-  --wrapper-height: 95vh;
+  --color-bg: #69F7BE;
+  --color-text-main: #373fff;
+  --wrapper-height: 120vh;
 }
 
-@media screen and (max-width: 750px) {
+/* Tablet portrait */
+@media (min-width: 768px) {
   :root {
-    --wrapper-height: 120vh;
+  --wrapper-hight: 80vh;
+  }
+}
+
+/* Tablet Landscape */
+@media (min-width: 1024px) {
+  :root {
+    --wrapper-height: 80vh;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1280px) {
+:root {
+    --wrapper-height: 90vh;
   }
 }
 
 @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: 134px;
   line-height: 105%;
 }
 
-
 .wrapper {
   min-height: var(--wrapper-height);
   display: grid;
@@ -50,18 +65,20 @@ body {
   padding: 1rem;
 }
 
-/* Our remix on glitch button + grid for other actions */
-.remix {
+/* Navigation grid */
+.navigation {
   display: grid;
   place-items: end;
 }
 
+
+/* Our remix on glitch button + grid for other actions */
 .btn--remix {
   font-family: HK Grotesk;
-  padding-left: .75rem;
-  padding-right: .75rem;
-  padding-top: .5rem;
-  padding-bottom: .5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   font-size: 1.1rem;
   line-height: 1rem;
   font-weight: 500;
@@ -75,10 +92,11 @@ body {
 }
 
 .btn--remix img {
-  margin-right: .75rem;
+  margin-right: 0.75rem;
 }
 
 /* Very light scaling for our illustration */
 .illustration {
-  max-width: 90%;
+  max-width: 70%;
+  max-height: 400px;
 }