Move gatsby data to top level

src/styles/global.css

@@ -0,0 +1,72 @@
+/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap'); */
+/* black, bold, regular */
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  box-sizing: border-box;
+}
+/* .hero * {
+  transition: color .2s, background-color .2s;
+} */
+@layer utilities {
+  .scroll-snap-none {
+    scroll-snap-type: none;
+  }
+  .scroll-snap-x {
+    scroll-snap-type: x mandatory;
+  }
+  .scroll-snap-y {
+    scroll-snap-type: y mandatory;
+  }
+  .scroll-snap-start {
+    scroll-snap-align: start;
+  }
+  .scroll-padding-6 {
+    scroll-padding: theme('spacing.6');
+  }
+  @variants responsive {
+
+    .h-two-thirds-vw {
+      height: 67vw;
+    }
+  }
+}
+
+body {
+  @apply bg-gray-100;
+  /* @apply bg-black; */
+  /* @apply text-white; */
+}
+
+h1 {
+  @apply text-2xl;
+}
+h2 {
+  @apply text-xl;
+}
+h3 {
+  @apply text-lg;
+}
+a {
+  @apply text-blue-600;
+}
+
+.arrow-right-after:after {
+  content: "\279C";
+  margin-left: 3px;
+  transform: translate(0px);
+  display: inline-block;
+  transition: all .2s;
+}
+
+.arrow-left-before:before {
+  content: "\21AB";
+  margin-left: 3px;
+  transform: translate(0px);
+  display: inline-block;
+  /* transition: all .2s; */
+}

src/styles/index.css

@@ -0,0 +1,3 @@
+/* main.hero {
+  
+} */

src/styles/resume.css

@@ -0,0 +1,6 @@
+.resume {
+  h1 {
+    @apply text-3xl font-bold;
+  }
+}
+