🌅🏋 Checkpoint

./public/style.css:1062301/3252

public/style.css

@@ -7,38 +7,39 @@
   --image-margin: 3rem;
 
 }
+/******************************************************************************
+START Glitch hello-app default styles
 
-/* Tablet portrait */
-@media (min-width: 768px) {
-  :root {
-    --wrapper-height: 87vh;
-    --image-max-width: 400px;
-    --image-margin: 5rem;
-  }
+The styles in this section do some minimal CSS resets, set default fonts and 
+colors, and handle the layout for our footer and "Remix on Glitch" button. If
+you're new to CSS they may seem a little complicated, but you can scroll down
+to this section's matching END comment to see page-specific styles.
+******************************************************************************/
+/* Our default values set as CSS variables */
+:root {
+  --color-bg: #D7F5EF;
+  --color-text-main: #2800FF;
+  --color-primary: #AFECE0;
+  --wrapper-height: 85vh;
+  --image-max-width: 320px;
+  --font-family: "HK Grotesk";
+  --font-family-header: "HK Grotesk";
 }
 
-/* Tablet Landscape */
-@media (min-width: 1024px) {
-  :root {
-    --wrapper-height: 87vh;
-    --image-max-width: 500px;
-  }
+/* Basic page style resets */
+* {
+  box-sizing: border-box;
 }
-
-/* Desktop */
-@media (min-width: 1280px) {
-  :root {
-    --wrapper-height: 87vh;
-    --image-max-width: 500px;
-  }
+[hidden] {
+  display: none !important;
 }
 
+/* Import fonts */
 @font-face {
   font-family: HK Grotesk;
   src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
     format("opentype");
 }
-
 @font-face {
   font-family: HK Grotesk;
   font-weight: bold;
@@ -46,6 +47,66 @@
     format("opentype");
 }
 
+/* Our remix on glitch button */
+.btn--remix {
+  font-family: HK Grotesk;
+  padding: 0.75rem 1rem;
+  font-size: 1.1rem;
+  line-height: 1rem;
+  font-weight: 500;
+  height: 2.75rem;
+  align-items: center;
+  cursor: pointer;
+  background: #FFFFFF;
+  border: 1px solid #000000;
+  box-sizing: border-box;
+  border-radius: 4px;
+  text-decoration: none;
+  color: #000;
+  white-space: nowrap;
+}
+.btn--remix img {
+  margin-right: 0.5rem;
+}
+.btn--remix:hover {
+  background-color: #D0FFF1;
+}
+
+/* Navigation grid */
+.footer {
+  display: flex;
+  justify-content: space-between;
+  margin: 1rem auto 0;
+  padding: 1rem 0 0.75rem 0;
+  width: 100%;
+  border-top: 4px solid #fff;
+}
+
+.footer a:not(.btn--remix):link,
+a:not(.btn--remix):visited {
+  font-family: HK Grotesk;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1.1rem;
+  color: #000;
+  text-decoration: none;
+  border-style: none;
+}
+.footer a:hover {
+  background: var(--color-primary);
+}
+
+.footer .links {
+  padding: 0.5rem 1rem;
+}
+
+.divider {
+  padding: 0 1rem;
+}
+/******************************************************************************
+END Glitch hello-app default styles
+******************************************************************************/
+
 body {
   font-family: HK Grotesk;
   background-color: var(--color-bg);