diff --git a/deploy/web/landingapp/src/index.js b/deploy/web/landingapp/src/index.js
index 0811601bc..ad4c2acc1 100755
--- a/deploy/web/landingapp/src/index.js
+++ b/deploy/web/landingapp/src/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import "./styles.css";
 
 import AppRouter from "./AppRouter";
 
diff --git a/deploy/web/landingapp/src/pages/AboutPage/index.js b/deploy/web/landingapp/src/pages/AboutPage/index.js
index 841f53f2c..14e08384d 100644
--- a/deploy/web/landingapp/src/pages/AboutPage/index.js
+++ b/deploy/web/landingapp/src/pages/AboutPage/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { Link, useHistory } from "react-router-dom";
 
-import "../../styles.css";
+import "./styles.css";
 
 import Unicorn from "../../assets/images/unicorn.jpg";
 
@@ -9,47 +9,47 @@ const AboutPage = (props) => {
   let history = useHistory();
   return (
     <div className="aboutpage-container">
-      <div
-        className="main-container"
-        style={{
-          backgroundColor: "#697b4d",
-          alignItems: "center",
-          height: "90%",
-          padding: "3em",
-        }}
-      >
+      <div className="aboutpage-body">
         <div style={{ width: "100%", flexDirection: "flexStart" }}>
           <div className="back-button" onClick={() => history.goBack()}>
             Back
           </div>
         </div>
-        <h1 style={{ color: "white" }}>About LIGHT</h1>
-        <p style={{ color: "white" }}>
-          LIGHT is a research project focused on creating realistic interactive
-          AI. LIGHT stands for
-          <i>“Learning in Interactive Games with Humans and Text.”</i>
-          The LIGHT game is a direct application of
-          <a href="https://parl.ai/projects/light/"> our research</a>, and also
-          acts as a live environment to allow players to interact with models
-          and other players directly. We believe that by collecting gameplay
-          interactions, we can train better agents to follow stories and create
-          meaningful experiences for players.
-        </p>
-        <p style={{ color: "white" }}>
-          We also feel that model-supported architectures can enable creators to
-          tell their own stories. Thus, much of our project’s research will
-          support user-created content in our world builder. By reducing the
-          barrier of entry to create full, fleshed out worlds, it should be
-          easier for anyone to create and share a slice of fantasy.
-        </p>
-        <p style={{ color: "white" }}>
-          We plan to regularly release complete anonymized and sanitized data
-          collected from within LIGHT, with the goal of enabling other
-          researchers to extend upon our work, and this will be available for
-          download from the project page. The complete source code for the
-          project is available on our github.
-        </p>
-        <img style={{ width: "50%", height: "auto" }} src={Unicorn} />
+        <h1 className="aboutpage-header">About LIGHT</h1>
+        <div className="aboutpage-text__container">
+          <p>
+            LIGHT is a research project focused on creating realistic
+            interactive AI. LIGHT stands for
+            <i>“Learning in Interactive Games with Humans and Text.”</i>
+            The LIGHT game is a direct application of
+            <a
+              style={{ color: "yellow", fontWeight: "bold" }}
+              href="https://parl.ai/projects/light/"
+            >
+              {" "}
+              our research
+            </a>
+            , and also acts as a live environment to allow players to interact
+            with models and other players directly. We believe that by
+            collecting gameplay interactions, we can train better agents to
+            follow stories and create meaningful experiences for players.
+          </p>
+          <p>
+            We also feel that model-supported architectures can enable creators
+            to tell their own stories. Thus, much of our project’s research will
+            support user-created content in our world builder. By reducing the
+            barrier of entry to create full, fleshed out worlds, it should be
+            easier for anyone to create and share a slice of fantasy.
+          </p>
+          <p>
+            We plan to regularly release complete anonymized and sanitized data
+            collected from within LIGHT, with the goal of enabling other
+            researchers to extend upon our work, and this will be available for
+            download from the project page. The complete source code for the
+            project is available on our github.
+          </p>
+        </div>
+        <img className="aboutpage-image" src={Unicorn} />
       </div>
     </div>
   );
diff --git a/deploy/web/landingapp/src/pages/AboutPage/styles.css b/deploy/web/landingapp/src/pages/AboutPage/styles.css
new file mode 100644
index 000000000..ae7c861df
--- /dev/null
+++ b/deploy/web/landingapp/src/pages/AboutPage/styles.css
@@ -0,0 +1,99 @@
+.aboutpage-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 1em 5em 4em 5em;
+  background-image: url("../../assets/images/InexplicableTavern.png");
+  background-size: cover;
+  height: 100%;
+  overflow: scroll;
+}
+
+.aboutpage-body {
+  width: 100%;
+  background-color: rgba(105, 123, 77, 0.9);
+  border: darkgray;
+  border-width: 1em;
+  border-style: ridge;
+  border-radius: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 3em;
+  box-shadow: 0.25em 0.25em 0.25em black;
+}
+
+.aboutpage-text__container {
+  color: white;
+  padding-left: 7px;
+}
+
+.aboutpage-header {
+  text-align: center;
+  color: white;
+}
+
+.aboutpage-text {
+  text-align: center;
+}
+
+.aboutpage-image {
+  height: auto;
+  width: 90%;
+  max-width: 70em;
+}
+
+.back-button {
+  color: gold;
+  font-weight: bolder;
+  cursor: pointer;
+  border-radius: 15px;
+}
+
+.back-button:hover {
+  color: yellow;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.back-button:active {
+  color: yellow;
+  cursor: pointer;
+  text-decoration: underline;
+  font-weight: 900;
+}
+
+@media only screen and (max-width: 1224px) {
+}
+
+@media only screen and (max-width: 950px) {
+}
+
+@media only screen and (max-width: 600px) {
+  .aboutpage-container {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    background-image: url("../../assets/images/InexplicableTavern.png");
+    background-size: cover;
+    height: 100%;
+    overflow: scroll;
+    padding: 0;
+  }
+
+  .aboutpage-body {
+    width: 90%;
+    background-color: rgba(105, 123, 77, 0.9);
+    border: darkgray;
+    border-width: 1em;
+    border-style: ridge;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 0.25em 0.25em 0.25em black;
+    padding: 0;
+    margin: 0;
+  }
+}
diff --git a/deploy/web/landingapp/src/pages/ErrorPage/index.js b/deploy/web/landingapp/src/pages/ErrorPage/index.js
index b0e6411df..8768cd3fc 100644
--- a/deploy/web/landingapp/src/pages/ErrorPage/index.js
+++ b/deploy/web/landingapp/src/pages/ErrorPage/index.js
@@ -1,24 +1,19 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-import "../../styles.css";
+import "./styles.css";
 
 const ErrorPage = (props) => {
   return (
     <div className="errorpage-container">
-      <div
-        className="main-container"
-        style={{
-          backgroundColor: "#253a20",
-          alignItems: "center",
-          height: "90%",
-          padding: "3em",
-          color: "white",
-          opacity: "0.7",
-          justifyContent: "flex-start",
-        }}
-      >
-        <div style={{ width: "100%", flexDirection: "flexStart" }}>
+      <div className="errorpage-body">
+        <div
+          style={{
+            width: "100%",
+            flexDirection: "flexStart",
+            paddingLeft: "20px",
+          }}
+        >
           <Link style={{ textDecoration: "none", color: "yellow" }} to="/">
             Return Home
           </Link>
diff --git a/deploy/web/landingapp/src/pages/ErrorPage/styles.css b/deploy/web/landingapp/src/pages/ErrorPage/styles.css
new file mode 100644
index 000000000..5b75435e2
--- /dev/null
+++ b/deploy/web/landingapp/src/pages/ErrorPage/styles.css
@@ -0,0 +1,60 @@
+.errorpage-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 1em 5em 4em 0.5em;
+  background-image: url("../../assets/images/spider.png");
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(46, 66, 35, 1);
+}
+
+.errorpage-body {
+  width: 80%;
+  opacity: 0.9;
+  border: darkgray;
+  border-width: 1em;
+  border-style: ridge;
+  border-radius: 15px;
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  box-shadow: 0.25em 0.25em 0.25em black;
+  background-color: rgba(46, 66, 35, 1);
+  align-items: center;
+  height: 90%;
+  padding: 3em;
+  color: white;
+  opacity: 0.7;
+  justify-content: flex-start;
+}
+
+@media only screen and (max-width: 1224px) {
+}
+
+@media only screen and (max-width: 950px) {
+}
+
+@media only screen and (max-width: 600px) {
+  .errorpage-container {
+    padding: 0;
+    background-image: url("../../assets/images/spider.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 100%;
+    width: 100%;
+  }
+
+  .errorpage-body {
+    width: 93%;
+    border-width: 0.5em;
+    padding: 0;
+    background-color: rgba(46, 66, 35, 0.7);
+    align-items: center;
+    height: 90%;
+    padding: 0;
+  }
+}
diff --git a/deploy/web/landingapp/src/pages/LandingPage/index.js b/deploy/web/landingapp/src/pages/LandingPage/index.js
index 8acc992f5..ebb9583f4 100644
--- a/deploy/web/landingapp/src/pages/LandingPage/index.js
+++ b/deploy/web/landingapp/src/pages/LandingPage/index.js
@@ -4,7 +4,7 @@ import "react-tippy/dist/tippy.css";
 import "emoji-mart/css/emoji-mart.css";
 
 import Scribe from "../../assets/images/scribe.png";
-import "../../styles.css";
+import "./styles.css";
 
 const LandingPage = (props) => {
   let [page, setPage] = useState(0);
@@ -22,133 +22,139 @@ const LandingPage = (props) => {
     <div className="landingpage-container">
       <h1 className="header-text">Welcome to the world of LIGHT</h1>
       <div className="main-container">
-        <div className="instructions-container">
-          <div className="instructions-container__section">
-            <div className="instruction-bubble">
-              <div className="guide-container">
-                <img className="guide-img" src={Scribe} />
-                <div className="arrowbox">
-                  {page !== 0 ? (
-                    <div
-                      onClick={() => pageChangeHandler("-")}
-                      className="instruction-arrow__container"
-                    >
-                      <p className="instruction-arrow">{"<"}</p>
-                    </div>
-                  ) : (
-                    <div style={{ width: "3em", margin: ".5em" }} />
-                  )}
-                  {page !== 2 ? (
-                    <div
-                      onClick={() => pageChangeHandler("+")}
-                      className="instruction-arrow__container "
-                    >
-                      <p className="instruction-arrow">{">"}</p>
-                    </div>
-                  ) : (
-                    <div style={{ width: "3em", margin: ".5em" }} />
-                  )}
+        <div className="main-section">
+          <div className="instructions-container">
+            <div className="instructions-container__section">
+              <div className="instruction-bubble">
+                <div className="guide-container">
+                  <img className="guide-img" src={Scribe} />
+                  <div className="arrowbox">
+                    {page !== 0 ? (
+                      <div
+                        onClick={() => pageChangeHandler("-")}
+                        className="instruction-arrow__container"
+                      >
+                        <p className="instruction-arrow">{"<"}</p>
+                      </div>
+                    ) : (
+                      <div className="instruction-arrow__placeholder" />
+                    )}
+                    {page !== 2 ? (
+                      <div
+                        onClick={() => pageChangeHandler("+")}
+                        className="instruction-arrow__container "
+                      >
+                        <p className="instruction-arrow">{">"}</p>
+                      </div>
+                    ) : (
+                      <div className="instruction-arrow__placeholder" />
+                    )}
+                  </div>
+                </div>
+                <div className="instruction-text__container">
+                  {page == 0 ? (
+                    <>
+                      <p className="instruction-welcome">
+                        The Dungeon Master is glad to see you.
+                      </p>
+                    </>
+                  ) : null}
+                  {page == 1 ? (
+                    <>
+                      <h2 className="instruction-header">
+                        Roleplay your Character
+                      </h2>
+                      <p className="instruction-text">
+                        You will be teleported into our mystical realm and fill
+                        the shoes of a character who lives there — playing that
+                        role you must act and talk with other LIGHT denizens. As
+                        you interact, your messages will be evaluated by the
+                        Dungeon Master AI. Portray your character well and you
+                        will increase your <b>experience points</b>.
+                      </p>
+                      <p className="instruction-text">
+                        Other characters will also be playing their roles as
+                        well — some of them will be other human souls, others
+                        will be AIs. When everyone is playing their role to the
+                        best of their ability in the realm the experience will
+                        be maximized. You can <b>reward</b> other players when
+                        you are impressed by their skills. You can also{" "}
+                        <b>report</b> or demote unwanted behaviors: e.g.,
+                        mentions of the real world or bad behavior. Stay good,
+                        my denizens!
+                      </p>
+                    </>
+                  ) : null}
+                  {page == 2 ? (
+                    <>
+                      <h2 className="instruction-header">
+                        Interact with the World
+                      </h2>
+                      <p className="instruction-text">
+                        <b>Talking:</b> Talking is the most important part of
+                        playing your role in the world. You can say, whisper,
+                        shout or tell something to other individuals — all using
+                        free-form text, e.g.
+                        <i>
+                          tell the smithy “I’d love to own such a fine tool! It
+                          looks like wonderful craftsmanship, well done!”{" "}
+                        </i>
+                        .
+                      </p>
+                      <p className="instruction-text">
+                        <b>Emotes:</b> You can also express your emotions in the
+                        game with
+                        <u>emote actions</u>, e.g. <i>smile, grin, scream</i> or{" "}
+                        <i>dance</i>.
+                      </p>
+                      <p className="instruction-text">
+                        <b>Actions:</b> You can move into new locations (e.g.,{" "}
+                        <i> go west</i>), pick up objects (e.g., <i>get tool</i>
+                        ), give objects (e.g.,
+                        <i>give tool to smithy</i>), wear clothing, wield
+                        weapons, eat, drink, try to steal objects, and more.
+                        Type
+                        <i> help </i>
+                        in game for the full list of actions.
+                      </p>
+                    </>
+                  ) : null}
                 </div>
-              </div>
-              <div className="instruction-text__container">
-                {page == 0 ? (
-                  <>
-                    <p style={{ fontSize: "2.5em", textAlign: "center" }}>
-                      The Dungeon Master is glad to see you.
-                    </p>
-                  </>
-                ) : null}
-                {page == 1 ? (
-                  <>
-                    <h2 style={{ color: "gold", textAlign: "center" }}>
-                      Roleplay your Character
-                    </h2>
-                    <p>
-                      You will be teleported into our mystical realm and fill
-                      the shoes of a character who lives there — playing that
-                      role you must act and talk with other LIGHT denizens. As
-                      you interact, your messages will be evaluated by the
-                      Dungeon Master AI. Portray your character well and you
-                      will increase your <b>experience points</b>.
-                    </p>
-                    <p>
-                      Other characters will also be playing their roles as well
-                      — some of them will be other human souls, others will be
-                      AIs. When everyone is playing their role to the best of
-                      their ability in the realm the experience will be
-                      maximized. You can <b>reward</b> other players when you
-                      are impressed by their skills. You can also <b>report</b>{" "}
-                      or demote unwanted behaviors: e.g., mentions of the real
-                      world or bad behavior. Stay good, my denizens!
-                    </p>
-                  </>
-                ) : null}
-                {page == 2 ? (
-                  <>
-                    <h2 style={{ color: "gold", textAlign: "center" }}>
-                      Interact with the World
-                    </h2>
-                    <p>
-                      <b>Talking:</b> Talking is the most important part of
-                      playing your role in the world. You can say, whisper,
-                      shout or tell something to other individuals — all using
-                      free-form text, e.g.
-                      <i>
-                        tell the smithy “I’d love to own such a fine tool! It
-                        looks like wonderful craftsmanship, well done!”{" "}
-                      </i>
-                      .
-                    </p>
-                    <p>
-                      <b>Emotes:</b> You can also express your emotions in the
-                      game with
-                      <u>emote actions</u>, e.g. <i>smile, grin, scream</i> or{" "}
-                      <i>dance</i>.
-                    </p>
-                    <p>
-                      <b>Actions:</b> You can move into new locations (e.g.,{" "}
-                      <i> go west</i>), pick up objects (e.g., <i>get tool</i>),
-                      give objects (e.g.,
-                      <i>give tool to smithy</i>), wear clothing, wield weapons,
-                      eat, drink, try to steal objects, and more. Type
-                      <i> help </i>
-                      in game for the full list of actions.
-                    </p>
-                  </>
-                ) : null}
               </div>
             </div>
-          </div>
-          <div className="menu-container__section">
-            <div className="menu-container">
-              <a style={{ textDecoration: "none" }} href="/play/">
-                <div className="menu-item ">
-                  <h1>Play Now</h1>
-                </div>
-              </a>
-              <Link style={{ textDecoration: "none" }} to="/tutorial">
-                <div className="menu-item">
-                  <h1>How To Play</h1>
-                </div>
-              </Link>
-              <Link style={{ textDecoration: "none" }} to="/about">
-                <div className="menu-item">
-                  <h1>About</h1>
-                </div>
-              </Link>
+            <div className="menu-container__section">
+              <div className="menu-container">
+                <a style={{ textDecoration: "none" }} href="/play/">
+                  <div className="menu-item ">
+                    <h1 className="menu-item__text">Play Now</h1>
+                  </div>
+                </a>
+                <Link style={{ textDecoration: "none" }} to="/tutorial">
+                  <div className="menu-item">
+                    <h1 className="menu-item__text">How To Play</h1>
+                  </div>
+                </Link>
+                <Link style={{ textDecoration: "none" }} to="/about">
+                  <div className="menu-item">
+                    <h1 className="menu-item__text">About</h1>
+                  </div>
+                </Link>
+              </div>
             </div>
           </div>
         </div>
-        <div className="terms-container">
-          <h3 style={{ color: "yellow" }}>Usage terms</h3>
-          <p style={{ color: "white" }}>
-            You should read our{" "}
-            <Link style={{ color: "yellow" }} to="/terms">
-              terms
-            </Link>{" "}
-            regarding how we process and use data that you send to LIGHT. You
-            are accepting these terms by playing the game.
-          </p>
+        <div className="terms-section">
+          <div className="terms-container">
+            <h3 style={{ color: "yellow", margin: "0" }}>Usage terms</h3>
+            <p style={{ color: "white" }}>
+              You should read our{" "}
+              <Link style={{ color: "yellow" }} to="/terms">
+                terms
+              </Link>{" "}
+              regarding how we process and use data that you send to LIGHT. You
+              are accepting these terms by playing the game.
+            </p>
+          </div>
         </div>
       </div>
     </div>
diff --git a/deploy/web/landingapp/src/pages/LandingPage/styles.css b/deploy/web/landingapp/src/pages/LandingPage/styles.css
new file mode 100644
index 000000000..bea4e6b8b
--- /dev/null
+++ b/deploy/web/landingapp/src/pages/LandingPage/styles.css
@@ -0,0 +1,430 @@
+.header-text {
+  font-size: 80px;
+  text-align: center;
+  color: #fff;
+  animation: pulse 1s ease-in-out infinite alternate;
+}
+
+@keyframes pulse {
+  from {
+    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #eef079, 0 0 20px #eef079,
+      0 0 25px #eef079, 0 0 30px #eef079, 0 0 35px #eef079;
+  }
+  to {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #eef079,
+      0 0 40px #eef079, 0 0 50px #eef079, 0 0 60px #eef079, 0 0 70px #eef079;
+  }
+}
+
+.landingpage-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 1em 5em 4em 5em;
+  background-image: url("../../assets/images/InexplicableTavern.png");
+  background-size: cover;
+  height: 100%;
+  overflow: scroll;
+}
+
+.main-container {
+  width: 100%;
+  background-color: gray;
+  opacity: 0.9;
+  border: darkgray;
+  border-width: 1em;
+  border-style: ridge;
+  border-radius: 15px;
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  box-shadow: 0.25em 0.25em 0.25em black;
+}
+
+.main-section {
+  display: flex;
+  flex-direction: row;
+}
+
+.instructions-container {
+  width: 100%;
+  height: 80%;
+  display: flex;
+  flex-direction: row;
+}
+
+.instructions-container__section {
+  width: 60%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.instruction-bubble {
+  background-color: whitesmoke;
+  padding: 2em;
+  border-radius: 15px;
+  display: flex;
+  height: 45em;
+  width: 80%;
+  flex-direction: row;
+  margin: 1em;
+  overflow-y: scroll;
+  box-shadow: 0.25em 0.25em 0.25em black;
+  overflow-x: hidden;
+}
+
+.instruction-arrow__container {
+  background-color: gold;
+  height: 3em;
+  width: 3em;
+  border-radius: 1.5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0.25em 0.25em 0.5em black;
+  margin: 0.5em;
+  cursor: pointer;
+}
+
+.instruction-text__container {
+  width: 70%;
+  text-align: left;
+  height: 100%;
+}
+
+.instruction-welcome {
+  font-size: 2.5em;
+  text-align: center;
+}
+
+.instruction-header {
+  color: gold;
+  text-align: center;
+}
+.instruction-text {
+  text-align: left;
+  font-size: 1.5em;
+  text-align: center;
+}
+
+.instruction-arrow__container:active {
+  box-shadow: 0em 0em 0em black;
+}
+
+.instruction-arrow {
+  color: white;
+  font-size: 2em;
+  text-align: center;
+  font-weight: bold;
+}
+.instruction-arrow__placeholder {
+  margin: 0.5em;
+  width: 3em;
+}
+
+.arrowbox {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+.guide-container {
+  width: 35%;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.guide-img {
+  height: 30%;
+  border-style: solid;
+  border-color: chocolate;
+  box-shadow: 0.25em 0.5em 0.5em black;
+  margin-bottom: 0.5em;
+}
+.menu-container__section {
+  display: flex;
+  width: 30%;
+  height: 100%;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.menu-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.menu-item {
+  width: 20em;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background-color: red;
+  color: white;
+  box-shadow: 0.25em 0.25em 0.5em black;
+}
+
+.menu-item__text {
+  font-size: 3em;
+}
+
+.menu-item :hover {
+  color: yellow;
+}
+
+.menu-item:active {
+  box-shadow: 0em 0em 0em black;
+}
+.terms-section {
+  width: 100%;
+}
+
+.terms-container {
+  display: flex;
+  text-align: center;
+  width: 100%;
+  flex-direction: column;
+}
+
+@media only screen and (max-width: 1224px) {
+  .instructions-container {
+    width: 100%;
+    height: 80%;
+    display: flex;
+    flex-direction: column;
+  }
+  .instructions-container__section {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .main-container {
+    width: 100%;
+    background-color: gray;
+    opacity: 0.9;
+    border: darkgray;
+    border-width: 1em;
+    border-style: ridge;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+    justify-content: space-between;
+    box-shadow: 0.25em 0.25em 0.25em black;
+  }
+  .terms-container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    flex-direction: column;
+  }
+  .menu-container__section {
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  .menu-container {
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  .menu-item__text {
+    font-size: 2em;
+  }
+}
+
+@media only screen and (max-width: 950px) {
+  .instructions-container__section {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .instruction-bubble {
+    background-color: whitesmoke;
+    padding: 1em;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 1em;
+    overflow: scroll;
+  }
+  .guide-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .guide-img {
+    height: auto;
+    width: 30%;
+    min-width: 112px;
+    border-style: solid;
+    border-color: chocolate;
+    box-shadow: 0.25em 0.5em 0.5em black;
+    margin-bottom: 0.5em;
+  }
+  .menu-container {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  /* Landing Page */
+  .landingpage-container {
+    padding: 2px 10px 2px 10px;
+    background-size: cover;
+    overflow: scroll;
+  }
+
+  .main-container {
+    width: 80%;
+    overflow-x: hidden;
+  }
+
+  .header-text {
+    font-size: 40px;
+  }
+
+  .instructions-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .instructions-container__section {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .instruction-bubble {
+    height: 40vh;
+    width: 90%;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow-x: hidden;
+  }
+
+  .instruction-arrow__container {
+    background-color: gold;
+    height: 3em;
+    width: 3em;
+    border-radius: 1.5em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0.25em 0.25em 0.5em black;
+    margin: 0.5em;
+    cursor: pointer;
+  }
+
+  .instruction-text__container {
+    width: 100%;
+  }
+
+  .instruction-welcome {
+    font-size: 1em;
+  }
+
+  .instruction-header {
+    color: gold;
+    text-align: center;
+    font-size: 12px;
+  }
+
+  .instruction-text {
+    text-align: left;
+    font-size: 0.5em;
+    text-align: center;
+  }
+
+  .instruction-arrow__placeholder {
+    margin: 0.5em;
+    width: 3em;
+  }
+
+  .arrowbox {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: center;
+  }
+
+  .guide-container {
+    width: 85%;
+    flex-direction: row;
+    padding: 0.2em;
+  }
+
+  .guide-img {
+    height: 6em;
+    border-style: solid;
+    border-color: chocolate;
+    box-shadow: 0.25em 0.25em 0.5em black;
+    margin-bottom: 0.5em;
+    margin-left: 2em;
+  }
+  .menu-container__section {
+    display: flex;
+    width: 100%;
+    align-items: center;
+  }
+
+  .menu-container {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .menu-item {
+    width: 10em;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background-color: red;
+    color: white;
+    border-radius: 15px;
+    box-shadow: 0.25em 0.25em 0.5em black;
+  }
+
+  .menu-item__text {
+    font-size: 1em;
+  }
+
+  .menu-item :hover {
+    color: yellow;
+  }
+
+  .menu-item:active {
+    box-shadow: 0em 0em 0em black;
+  }
+
+  .terms-section {
+    height: 100%;
+  }
+  .terms-container {
+    display: flex;
+    text-align: center;
+    width: 100%;
+    flex-direction: column;
+    margin: 0;
+  }
+}
diff --git a/deploy/web/landingapp/src/pages/LoginPage/index.js b/deploy/web/landingapp/src/pages/LoginPage/index.js
index a7453a5d8..a6647f0a0 100644
--- a/deploy/web/landingapp/src/pages/LoginPage/index.js
+++ b/deploy/web/landingapp/src/pages/LoginPage/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-import "../../styles.css";
+import "./styles.css";
 
 const LoginPage = (props) => {
   return (
diff --git a/deploy/web/landingapp/src/pages/LoginPage/styles.css b/deploy/web/landingapp/src/pages/LoginPage/styles.css
new file mode 100644
index 000000000..ba5d7bbc3
--- /dev/null
+++ b/deploy/web/landingapp/src/pages/LoginPage/styles.css
@@ -0,0 +1,93 @@
+.loginpage-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  padding: 1em 5em 4em 0.5em;
+  background-image: url("../../assets/images/InexplicableTavern.png");
+  background-size: cover;
+  height: 100%;
+}
+
+.login-form__container {
+  width: 50%;
+  min-width: 250px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #cfb47d;
+  border-color: #9d733d;
+  border-style: ridge;
+  border-width: 1em;
+  padding: 1em;
+  color: white;
+}
+
+.login-form__field {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+}
+
+.login-form__label {
+  font-family: fantasy;
+  font-weight: bold;
+  font-size: 1.3em;
+  margin-right: 10px;
+}
+
+.login-form__input {
+  font-size: 1rem;
+  font-family: fantasy;
+  font-weight: bold;
+  border: none;
+  background: transparent;
+  border-bottom: 1px solid #fff;
+  outline: none;
+  color: white;
+}
+
+.login-form__submit {
+  padding: 5px 15px;
+  font-family: fantasy;
+  font-weight: bold;
+  background: white;
+  border-radius: 15px;
+  border: 0 none;
+  cursor: pointer;
+  box-shadow: 0.25em 0.2em 0.2em black;
+}
+
+.login-form__submit:active {
+  box-shadow: 0em 0em 0em black;
+}
+
+@media only screen and (max-width: 1224px) {
+}
+
+@media only screen and (max-width: 950px) {
+}
+
+@media only screen and (max-width: 600px) {
+  .loginpage-container {
+    padding: 0;
+    margin: 0;
+  }
+  .login-form__container {
+    width: 30%;
+    min-width: 250px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #cfb47d;
+    border-color: #9d733d;
+    border-style: ridge;
+    border-width: 1em;
+    padding: 1em;
+    color: white;
+  }
+}
diff --git a/deploy/web/landingapp/src/pages/LogoutPage/index.js b/deploy/web/landingapp/src/pages/LogoutPage/index.js
index 8cfb418ea..97d85f3d9 100644
--- a/deploy/web/landingapp/src/pages/LogoutPage/index.js
+++ b/deploy/web/landingapp/src/pages/LogoutPage/index.js
@@ -1,17 +1,17 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import "../../styles.css";
+import "./styles.css";
 
 const LogoutPage = (props) => {
   return (
     <div className="logoutpage-container">
-      <div style={{ width: "100%", flexDirection: "flexStart" }}>
-        <Link style={{ textDecoration: "none", color: "yellow" }} to="/">
-          Back
+      <div className="logoutpage-body">
+        <Link className="logoutpage-link" to="/">
+          Back to Home
         </Link>
       </div>
       <div>
-        <h1 style={{ color: "white", marginLeft: "15px" }}>
+        <h1 className="logoutpage-text">
           You are now logged out. Thank you for playing!
         </h1>
       </div>
diff --git a/deploy/web/landingapp/src/pages/LogoutPage/styles.css b/deploy/web/landingapp/src/pages/LogoutPage/styles.css
new file mode 100644
index 000000000..fdb76f321
--- /dev/null
+++ b/deploy/web/landingapp/src/pages/LogoutPage/styles.css
@@ -0,0 +1,48 @@
+.logoutpage-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 1em 5em 4em 0.5em;
+  background-image: url("../../assets/images/Squirrel.png");
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(20, 67, 13, 1);
+}
+
+.logoutpage-body {
+  width: 100%;
+  color: white;
+  justify-content: flex-start;
+}
+
+.logoutpage-link {
+  text-decoration: none;
+  color: yellow;
+  margin-left: 2em;
+}
+
+.logoutpage-text {
+  color: white;
+  text-align: center;
+}
+
+@media only screen and (max-width: 1224px) {
+}
+
+@media only screen and (max-width: 950px) {
+}
+
+@media only screen and (max-width: 600px) {
+  .logoutpage-container {
+    padding: 0;
+    background-image: url("../../assets/images/Squirrel.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .logoutpage-body {
+    padding: 0;
+  }
+}
diff --git a/deploy/web/landingapp/src/pages/TermsPage/index.js b/deploy/web/landingapp/src/pages/TermsPage/index.js
index aba3b7e8f..2b1e6d488 100644
--- a/deploy/web/landingapp/src/pages/TermsPage/index.js
+++ b/deploy/web/landingapp/src/pages/TermsPage/index.js
@@ -1,54 +1,49 @@
 import React from "react";
 import { Link, useHistory } from "react-router-dom";
 
-import "../../styles.css";
+import "./styles.css";
 
 const TermsPage = (props) => {
   let history = useHistory();
   return (
     <div className="termspage-container">
-      <div
-        className="main-container"
-        style={{
-          backgroundColor: "#253a20",
-          alignItems: "center",
-          height: "90%",
-          padding: "3em",
-          color: "white",
-          opacity: "0.7",
-          justifyContent: "flex-start",
-        }}
-      >
+      <div className="termspage-body">
         <div style={{ width: "100%", flexDirection: "flexStart" }}>
           <div className="back-button" onClick={() => history.goBack()}>
             Back
           </div>
         </div>
-        <h1 style={{ color: "white" }}>Terms</h1>
-        <p>
-          Facebook will process the messages you send in playing the game in
-          accordance with our Data Policy (
-          <a href="http://facebook.com/policy" target="_blank">
-            facebook.com/policy
-          </a>
-          ). Messages you send in playing the game may be used by Facebook for
-          research purposes and as otherwise specified in our Data Policy, and
-          may be used by and/or shared with third parties in connection with
-          this research.
-        </p>
-        <p>
-          This may involve public disclosure of the messages as part of a
-          research paper or data set. We will take measures to remove any
-          information that directly identifies you before doing so, but cannot
-          guarantee that messages will be completely anonymous. Do not send
-          personal information (for example, name, address, email, or phone
-          number) in your messages.
-        </p>
-        <p>
-          Facebook's Community Standards apply and you may not use any racist,
-          sexist, or otherwise offensive language, or harass other players. If
-          you violate our policies you may be reported and blocked.
-        </p>
+        <h1 className="termspage-header">Terms</h1>
+        <div className="termspage-text__container">
+          <p>
+            Facebook will process the messages you send in playing the game in
+            accordance with our Data Policy (
+            <a
+              style={{ color: "yellow" }}
+              href="http://facebook.com/policy"
+              target="_blank"
+            >
+              facebook.com/policy
+            </a>
+            ). Messages you send in playing the game may be used by Facebook for
+            research purposes and as otherwise specified in our Data Policy, and
+            may be used by and/or shared with third parties in connection with
+            this research.
+          </p>
+          <p>
+            This may involve public disclosure of the messages as part of a
+            research paper or data set. We will take measures to remove any
+            information that directly identifies you before doing so, but cannot
+            guarantee that messages will be completely anonymous. Do not send
+            personal information (for example, name, address, email, or phone
+            number) in your messages.
+          </p>
+          <p>
+            Facebook's Community Standards apply and you may not use any racist,
+            sexist, or otherwise offensive language, or harass other players. If
+            you violate our policies you may be reported and blocked.
+          </p>
+        </div>
       </div>
     </div>
   );
diff --git a/deploy/web/landingapp/src/pages/TermsPage/styles.css b/deploy/web/landingapp/src/pages/TermsPage/styles.css
new file mode 100644
index 000000000..d7abbadbf
--- /dev/null
+++ b/deploy/web/landingapp/src/pages/TermsPage/styles.css
@@ -0,0 +1,65 @@
+.termspage-container {
+  display: flex;
+  flex-direction: column;
+  padding: 1em 5em 4em 5em;
+  background-image: url("../../assets/images/deer.png");
+  background-size: cover;
+  background-color: rgb(37, 58, 32, 0.7);
+  height: 100%;
+  overflow: scroll;
+  width: 100%;
+}
+.termspage-body {
+  width: 80%;
+  border: darkgray;
+  border-width: 1em;
+  border-style: ridge;
+  border-radius: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 3em;
+  box-shadow: 0.25em 0.25em 0.25em black;
+  background-color: rgb(37, 58, 32, 0.9);
+  align-items: center;
+  height: 90%;
+  padding: 3em;
+}
+
+.termspage-header {
+  color: white;
+}
+
+.termspage-text__container {
+  color: white;
+}
+
+@media only screen and (max-width: 1224px) {
+}
+
+@media only screen and (max-width: 950px) {
+}
+
+@media only screen and (max-width: 600px) {
+  .termspage-container {
+    padding: 0;
+    margin: 0;
+    height: 100vh;
+    width: 100vw;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  .termspage-body {
+    width: 90%;
+    height: 100%;
+    border: darkgray;
+    border-width: 0.7em;
+    background-color: rgb(37, 58, 32, 0.7);
+    padding: 0;
+    margin: 0;
+    overflow-y: scroll;
+  }
+  .termspage-text__container {
+    padding-left: 3px;
+  }
+}
diff --git a/deploy/web/landingapp/src/pages/TutorialPage/styles.css b/deploy/web/landingapp/src/pages/TutorialPage/styles.css
index 08d738b6c..a0aabacda 100644
--- a/deploy/web/landingapp/src/pages/TutorialPage/styles.css
+++ b/deploy/web/landingapp/src/pages/TutorialPage/styles.css
@@ -98,3 +98,49 @@
   animation: pulse 1s infinite;
   box-shadow: 0px 0px 0px black;
 }
+
+@media only screen and (max-width: 1224px) {
+}
+
+@media only screen and (max-width: 950px) {
+}
+
+@media only screen and (max-width: 600px) {
+  .tutorialpage-content {
+    background-color: white;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    width: 100%;
+    height: 100%;
+    border-style: ridge;
+    border-color: darkgrey;
+    background-color: rgba(255, 255, 255, 0.95);
+    border-width: 0.5em;
+    padding: 3px;
+    margin: 0;
+  }
+
+  .tutorial-header {
+    font-size: 1.35em;
+    text-align: center;
+  }
+  .tutorial-subheader {
+    font-size: 1em;
+    text-align: center;
+  }
+  .tutorial-text {
+    font-size: 0.9em;
+  }
+  .tutorialpage-image__row {
+    width: 100%;
+  }
+  .tutorialpage-image__half {
+    width: 100%;
+  }
+  .tutorialpage-image__75 {
+    width: 100%;
+  }
+  .tutorialpage-image__quarter {
+    width: 100%;
+  }
+}
diff --git a/deploy/web/landingapp/src/styles.css b/deploy/web/landingapp/src/styles.css
index 7e1d0a667..a66777bad 100755
--- a/deploy/web/landingapp/src/styles.css
+++ b/deploy/web/landingapp/src/styles.css
@@ -411,54 +411,6 @@ body .fadeShow {
   color: black;
 }
 
-.neon-text2 {
-  color: #fff;
-  text-shadow: 0.1vw 0vw 0.25vw #d0d3ec, 0.2vw 0vw 0.25vw #d0d3ec,
-    0.4vw 0vw 0.25vw #d0d3ec, 0.1vw 0vw 0vw #d0d3ec, 0.2vw 0vw 0vw #d0d3ec,
-    0.4vw 0vw 0vw #d0d3ec, 0.1vw 0vw 0.1vw #9798c5, 0.2vw 0vw 0.1vw #9798c5,
-    0.4vw 0vw 0.1vw #9798c5, 0.1vw 0vw 2vw #6061c9, 0.2vw 0vw 2vw #6061c9,
-    0.4vw 0vw 2vw #6061c9, 0.1vw 0vw 1vw #2d2ba1, 0.2vw 0vw 1vw #2d2ba1,
-    0.4vw 0vw 5vw #2d2ba1, 0.1vw 0vw 5vw #181ab1, 0.2vw 0vw 20vw #181ab1,
-    0.4vw 0vw 10vw #181ab1, 0.1vw 0vw 10vw #04139e, 0.2vw 0vw 30vw #04139e,
-    0.4vw 0vw 10vw #04139e;
-}
-
-.header-text {
-  font-size: 80px;
-  text-align: center;
-  color: #fff;
-  animation: pulse 1s ease-in-out infinite alternate;
-}
-
-@keyframes pulse {
-  from {
-    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #eef079, 0 0 20px #eef079,
-      0 0 25px #eef079, 0 0 30px #eef079, 0 0 35px #eef079;
-  }
-  to {
-    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #eef079,
-      0 0 40px #eef079, 0 0 50px #eef079, 0 0 60px #eef079, 0 0 70px #eef079;
-  }
-}
-
-.header-text2 {
-  font-size: 80px;
-  text-align: center;
-  color: #fff;
-  animation: glow 1s ease-in-out infinite alternate;
-}
-
-@keyframes glow {
-  from {
-    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6,
-      0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6;
-  }
-  to {
-    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0073e6,
-      0 0 40px #0073e6, 0 0 50px #0073e6, 0 0 60px #0073e6, 0 0 70px #0073e6;
-  }
-}
-
 .app-container {
   height: 100vh;
   width: 100vw;
@@ -468,27 +420,6 @@ body .fadeShow {
 }
 
 /* Page Containers */
-.landingpage-container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  padding: 1em 5em 4em 5em;
-  background-image: url("./assets/images/InexplicableTavern.png");
-  background-size: cover;
-  height: 100%;
-  overflow: scroll;
-}
-
-.aboutpage-container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  padding: 1em 5em 4em 5em;
-  background-image: url("./assets/images/InexplicableTavern.png");
-  background-size: cover;
-  height: 100%;
-  overflow: scroll;
-}
 
 .errorpage-container {
   display: flex;
@@ -500,26 +431,6 @@ body .fadeShow {
   height: 100%;
 }
 
-.loginpage-container {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  padding: 1em 5em 4em 0.5em;
-  background-image: url("./assets/images/InexplicableTavern.png");
-  background-size: cover;
-  height: 100%;
-}
-
-.logoutpage-container {
-  display: flex;
-
-  flex-direction: column;
-  padding: 1em 5em 4em 0.5em;
-  background-image: url("./assets/images/Squirrel.png");
-  background-size: cover;
-  height: 100%;
-}
-
 .profilepage-container {
   display: flex;
   flex-direction: column;
@@ -529,21 +440,9 @@ body .fadeShow {
   height: 100%;
 }
 
-.termspage-container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  padding: 1em 5em 4em 5em;
-  background-image: url("./assets/images/deer.png");
-  background-size: cover;
-  height: 100%;
-  overflow: scroll;
-}
-
 /* Component Containers*/
 .main-container {
   width: 100%;
-  height: 80%;
   background-color: gray;
   opacity: 0.9;
   border: darkgray;
@@ -555,232 +454,9 @@ body .fadeShow {
   padding: 5px;
   box-shadow: 0.25em 0.25em 0.25em black;
 }
-
-.instructions-container {
-  width: 100%;
-  height: 80%;
-  display: flex;
-  flex-direction: row;
-}
-.instructions-container__section {
-  width: 60%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.instruction-bubble {
-  background-color: whitesmoke;
-  padding: 2em;
-  border-radius: 15px;
-  display: flex;
-  height: 90%;
-  width: 80%;
-  flex-direction: row;
-  margin: 1em;
-  overflow: scroll;
-  box-shadow: 0.25em 0.25em 0.25em black;
-}
-
-.instruction-bubble2 {
-  border: white;
-  border-width: 1em;
-  border-style: solid;
-  border-radius: 15px;
-  flex-direction: column;
-  padding: 2em;
-  border-radius: 15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 70%; /* Full width */
-  height: auto; /* Full height */
-  margin: 10%;
-  box-shadow: 0.25em 0.25em 0.25em black;
-  box-shadow: 0 0 0.1vw 0.4vw #fff7f7, 0 0 0.4vw 0.6vw #74ace4,
-    0 0 4vw 0.4vw #0073e6, inset 0 0 1.5vw 0.4vw #0073e6,
-    inset 0 0 0.4vw 0.2vw #74ace4, inset 0 0 0.5vw 0.2vw #fff7f7;
-}
-
-.instruction-arrow__container {
-  background-color: gold;
-  height: 3em;
-  width: 3em;
-  border-radius: 1.5em;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0.25em 0.25em 0.5em black;
-  margin: 0.5em;
-  cursor: pointer;
-}
-
-.instruction-arrow__container2 {
-  height: 3em;
-  width: 3em;
-  border-radius: 1.5em;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0.25em 0.25em 0.5em black;
-  margin: 0.5em;
-  cursor: pointer;
-}
-
-.instruction-text__container {
-  width: 70%;
-  text-align: left;
-}
-
-.instruction-text2 {
-  color: white;
-  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6,
-    0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6;
-}
-
-.instruction-arrow__container:active {
-  box-shadow: 0em 0em 0em black;
-}
-
-.instruction-arrow {
-  color: white;
-  font-size: 2em;
-  text-align: center;
-  font-weight: bold;
-}
-
-.arrowbox {
+.main-section {
   display: flex;
   flex-direction: row;
-  width: 100%;
-  justify-content: center;
-}
-.guide-container {
-  width: 30%;
-  justify-content: center;
-}
-
-.guide-img {
-  height: 10em;
-  width: 10em;
-  border-style: solid;
-  border-color: chocolate;
-  box-shadow: 0.25em 0.5em 0.5em black;
-  margin-bottom: 0.5em;
-}
-.menu-container__section {
-  display: flex;
-  width: 30%;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.menu-container {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.menu-container2 {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.menu-item {
-  width: 20em;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  background-color: red;
-  color: white;
-  box-shadow: 0.25em 0.25em 0.5em black;
-}
-
-.menu-item2 {
-  width: 20em;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  cursor: pointer;
-}
-
-.menu-item :hover {
-  color: yellow;
-}
-
-.menu-item2 :hover {
-  color: grey;
-}
-
-.menu-item:active {
-  box-shadow: 0em 0em 0em black;
-}
-.terms-container {
-  display: flex;
-  text-align: center;
-  width: 100%;
-  flex-direction: column;
-}
-
-.login-form__container {
-  width: 30%;
-  min-width: 250px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background-color: #cfb47d;
-  border-color: #9d733d;
-  border-style: ridge;
-  border-width: 1em;
-  padding: 1em;
-  color: white;
-}
-
-.login-form__field {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  width: 100%;
-}
-
-.login-form__label {
-  font-family: fantasy;
-  font-weight: bold;
-  font-size: 1.3em;
-  margin-right: 10px;
-}
-
-.login-form__input {
-  font-size: 1rem;
-  font-family: fantasy;
-  font-weight: bold;
-  border: none;
-  background: transparent;
-  border-bottom: 1px solid #fff;
-  outline: none;
-  color: white;
-}
-
-.login-form__submit {
-  padding: 5px 15px;
-  font-family: fantasy;
-  font-weight: bold;
-  background: white;
-  border-radius: 15px;
-  border: 0 none;
-  cursor: pointer;
-  box-shadow: 0.25em 0.2em 0.2em black;
-}
-
-.login-form__submit:active {
-  box-shadow: 0em 0em 0em black;
 }
 
 .nameplate-container {
@@ -852,99 +528,10 @@ body .fadeShow {
 }
 
 @media only screen and (max-width: 1224px) {
-  .instructions-container {
-    width: 100%;
-    height: 80%;
-    display: flex;
-    flex-direction: column;
-  }
-  .instructions-container__section {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .main-container {
-    width: 100%;
-    height: 100%;
-    background-color: gray;
-    opacity: 0.9;
-    border: darkgray;
-    border-width: 1em;
-    border-style: ridge;
-    border-radius: 15px;
-    display: flex;
-    flex-direction: column;
-    padding: 5px;
-    justify-content: space-between;
-    box-shadow: 0.25em 0.25em 0.25em black;
-  }
-  .terms-container {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    flex-direction: column;
-  }
-  .menu-container__section {
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-  }
-  .menu-container {
-    flex-direction: row;
-    justify-content: space-around;
-  }
 }
 
-@media only screen and (max-width: 870px) {
-  .main-container {
-    overflow: scroll;
-  }
-  .instructions-container__section {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .instruction-bubble {
-    background-color: whitesmoke;
-    padding: 1em;
-    border-radius: 15px;
-    display: flex;
-    height: 100%;
-    width: 80%;
-    display: flex;
-    flex-direction: column;
-    margin: 1em;
-    overflow: scroll;
-    align-items: center;
-  }
-  .guide-container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-  .guide-img {
-    height: auto;
-    width: 30%;
-    min-width: 112px;
-    border-style: solid;
-    border-color: chocolate;
-    box-shadow: 0.25em 0.5em 0.5em black;
-    margin-bottom: 0.5em;
-  }
-  .menu-container {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-  .terms-container {
-    margin-top: 10em;
-  }
+@media only screen and (max-width: 950px) {
+}
+
+@media only screen and (max-width: 600px) {
 }