Mobile

src/App.jsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { Analytics } from '@vercel/analytics/react'
 import { motion as m, useAnimate, useAnimation, AnimatePresence } from 'framer-motion'
 
+import background from './assets/background.png'
 import spaceship from './assets/spaceship.svg'
 import bottom from './assets/bottom.svg'
 import grain from './assets/grain.png'
@@ -22,19 +23,32 @@ const Background = styled(m.div)`
   z-index: 0;
   background-size: cover;
   background-position: center;
+
+  @media only screen 
+  and (max-device-width: 480px) {
+    background: url(${background});
+    background-size: 60vh;
+    background-position: center;
+  }
 `
 
 const Foreground = styled(m.img)`
   min-width: 100vw;
   position: absolute;
   bottom: 0;
   z-index: 0;
+
+  @media only screen 
+  and (max-device-width: 480px) {
+    display: none;
+  }
 `
 
 const Grain = styled.div`
   height: 100vh;
   width: 100vw;
   position: absolute;
+  opacity: 0.4;
   background: url(${grain});
   background-size: 100px;
   mix-blend-mode: overlay;
@@ -54,6 +68,12 @@ const Centered = styled.div`
   width: 1000px;
   margin: 7em;
   z-index: 10;
+
+  @media only screen 
+  and (max-device-width: 480px) {
+    margin: 2em;
+    margin-top: 8em;
+  }
 `
 
 const BetaIconWrapper = styled.div`
@@ -75,6 +95,17 @@ const BetaIconWrapper = styled.div`
   margin-top: 0.5em;
   margin-right: 0.5em;
   z-index: 10;
+
+  @media only screen 
+  and (max-device-width: 480px) {
+    border: 1px solid #3986FC;
+    height: 0.6em;
+    width: 1.6em;
+    font-size: 11px;
+    font-weight: normal;
+    margin-top: 0.25em;
+    margin-right: 0.25em;
+  }
 `;
 
 const BetaText = styled.span`

src/components/BackButton.jsx

@@ -12,6 +12,11 @@ const StyledButton = styled(Button)`
   margin-top: 0.5em;
   margin-left: 0.5em;
   padding: 1.2em 2.5em;
+
+  @media only screen 
+  and (max-device-width: 480px) {
+    padding: 0.5em 1em;
+  }
 `
 
 const BackButton = ({ page, prevPage }) => {

src/components/Button.jsx

@@ -20,6 +20,10 @@ const StyledButton = style.button`
     border: 1px solid #913BE7;
     box-shadow: 0px 0px 16px #8232C0;
   }
+  @media only screen 
+  and (max-device-width: 480px) {
+    font-size: 14px;
+  }
 `
 
 export default StyledButton

src/components/Pages.jsx

@@ -56,16 +56,33 @@ const Input = styled.input`
   padding: 0.5em;
   font-size: 18px;
   width: 550px;
+
+  @media only screen 
+  and (max-device-width: 480px) {
+    width: 300px;
+  }
+`
+
+const QuestionLabel = styled.p`
+  margin: 0;
+  margin-bottom: 0.4em;
 `
 
 const Images = styled(m.div)`
   margin: 2em 0;
+  text-align: center;
 `
 
 const Image = styled(m.img)`
     max-height: 300px;
     max-width: 300px;
     margin: 0 1em;
+
+    @media only screen 
+    and (max-device-width: 480px) {
+      max-height: 140px;
+      max-width: 140px;
+    }
 `
 
 const Illustration = styled(m.img)`
@@ -77,6 +94,11 @@ const Buttons = styled.div`
   width: 1000px;
   position: absolute;
   bottom: 6em;
+
+  @media only screen 
+  and (max-device-width: 480px) {
+    bottom: 3em;
+  }
 `
 
 const QuestionButton = styled(Button)`
@@ -85,6 +107,12 @@ const QuestionButton = styled(Button)`
   text-align: left;
   margin-bottom: 0.5em;
   font-size: 20px;
+
+  @media only screen 
+  and (max-device-width: 480px) {
+    font-size: 14px;
+    width: 300px;
+  }
 `
 
 const Text = styled.div`
@@ -138,7 +166,7 @@ const AnimationContent = ({ children, myKey, delay }) => {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            transition={{ duration: 0.6, delay: delay ? 0.2 : 0 }}
+            transition={{ duration: 0.8, delay: delay ? 0.2 : 0 }}
         >
             {children}
         </m.div>
@@ -170,7 +198,7 @@ const Question = ({
     next()
   }
     return <>
-        <span>Question {index}/8</span>
+        <QuestionLabel>Question {index}/8</QuestionLabel>
         <m.h2
             initial={{ x: -100, opacity: 0 }}
             animate={{ x: 0, opacity: 1 }}

src/style/GlobalStyle.jsx

@@ -18,15 +18,20 @@ body {
   padding: 0;
   margin: 0;
   color: white;
+
+  @media only screen 
+  and (max-device-width: 480px) {
+    font-size: 12px;
+  }
 }
 h1, h2, h3 {
   margin: 0;
 }
 h1 {
-  font-size: 48px;
+  font-size: 3.5em;
 }
 h2 {
-  font-size: 36px;
+  font-size: 2.2em;
 }
 h3 {
   font-size: 28px;