diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..ff53985
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,220 @@
+html {
+  height: 100%;
+}
+
+body {
+  background-color: #e7dfc6;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: Cinzel, serif;
+  font-size: 1.5em;
+  letter-spacing: 0.4em;
+  overflow: hidden;
+}
+
+body .background {
+  display: none;
+}
+
+@media (min-width: 950px) {
+  body .background {
+    display: block;
+    position: absolute;
+    z-index: -1;
+    top: -50%;
+    left: 0;
+    width: 80%;
+    height: 200%;
+    background-color: #131b23;
+    border-radius: 0 50% 50% 0;
+  }
+}
+
+body form {
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: 0;
+}
+
+@media (min-width: 950px) {
+  body form {
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-columns: 80% auto;
+        grid-template-columns: 80% auto;
+    -ms-grid-rows: 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+  }
+}
+
+body form #messageWrapper,
+body form #nameWrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  cursor: pointer;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 50%;
+  height: 200px;
+  width: 200px;
+  color: #e7dfc6;
+  background-color: #131b23;
+  -webkit-box-shadow: 0 0 6px #131b23;
+          box-shadow: 0 0 6px #131b23;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+@media (min-width: 950px) {
+  body form #messageWrapper,
+  body form #nameWrapper {
+    width: 500px;
+    height: auto;
+    cursor: auto;
+    background-color: unset;
+    -webkit-box-shadow: unset;
+            box-shadow: unset;
+    border-radius: 0;
+    display: block;
+    margin: auto;
+    font-size: 2em;
+  }
+}
+
+body form #messageWrapper input,
+body form #nameWrapper input {
+  margin-top: 10px;
+  display: none;
+  border-radius: 5px;
+  background-color: #e7dfc6;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: none;
+  outline: unset;
+  padding: 10px;
+  -webkit-transition: background-color 0.3s ease;
+  transition: background-color 0.3s ease;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+@media (min-width: 950px) {
+  body form #messageWrapper input,
+  body form #nameWrapper input {
+    display: block;
+  }
+}
+
+body form #messageWrapper input:focus,
+body form #nameWrapper input:focus {
+  background-color: white;
+}
+
+body form #messageWrapper input#message,
+body form #nameWrapper input#message {
+  width: 200px;
+}
+
+body form #messageWrapper.active,
+body form #nameWrapper.active {
+  position: absolute;
+  z-index: 1;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  border-radius: 0;
+  width: 100%;
+  height: 100%;
+}
+
+body form button.submit {
+  position: relative;
+  z-index: 0;
+  background-color: #131b23;
+  color: #e7dfc6;
+  font-family: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  border-radius: 5px;
+  border: none;
+  padding: 10px 30px;
+}
+
+@media (min-width: 950px) {
+  body form button.submit {
+    -ms-grid-column: 2;
+    grid-column: 2;
+    -ms-grid-row: 1;
+    -ms-grid-row-span: 2;
+    grid-row: 1 / 3;
+  }
+  body form button.submit span {
+    -webkit-writing-mode: vertical-rl;
+        -ms-writing-mode: tb-rl;
+            writing-mode: vertical-rl;
+    text-orientation: upright;
+  }
+}
+
+body form button[disabled].submit::before {
+  position: absolute;
+  content: " ";
+  width: 80%;
+  height: 1px;
+  background-color: #e7dfc6;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
+}
+
+@media (min-width: 950px) {
+  body form button[disabled].submit::before {
+    width: 1px;
+    height: 90%;
+  }
+}
+
+body form button.submit::before {
+  width: 0%;
+}
+
+body form button:enabled.submit {
+  -webkit-box-shadow: 0 5px 0 #816c61;
+          box-shadow: 0 5px 0 #816c61;
+}
+
+body form button:enabled.submit:hover,
+body form button:enabled.submit:focus {
+  -webkit-transform: translateY(2px);
+          transform: translateY(2px);
+  -webkit-box-shadow: 0 3px 0 #816c61;
+          box-shadow: 0 3px 0 #816c61;
+}
+
+body form button:enabled.submit:active {
+  -webkit-transform: translateY(5px);
+          transform: translateY(5px);
+  -webkit-box-shadow: 0 0px 0 #816c61;
+          box-shadow: 0 0px 0 #816c61;
+}
+/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
new file mode 100644
index 0000000..2c71663
--- /dev/null
+++ b/css/main.css.map
@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "main.scss"
+    ],
+    "names": [],
+    "file": "main.css"
+}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
new file mode 100644
index 0000000..7efe93e
--- /dev/null
+++ b/css/main.scss
@@ -0,0 +1,161 @@
+$colors: (
+  primary: #e7dfc6,
+  primary-light: lighten(#e7dfc6, 20%),
+  accent: #816c61,
+  background: #131b23
+);
+$desktop: 950px;
+@function color($color-name) {
+  @return map-get($colors, $color-name);
+}
+@mixin desktop {
+  @media (min-width: #{$desktop}) {
+    @content;
+  }
+}
+
+html {
+  height: 100%;
+}
+body {
+  background-color: color(primary);
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: Cinzel, serif;
+  font-size: 1.5em;
+  letter-spacing: 0.4em;
+  overflow: hidden;
+  .background {
+    display: none;
+    @include desktop {
+      display: block;
+      position: absolute;
+      z-index: -1;
+      top: -50%;
+      left: 0;
+      width: 80%;
+      height: 200%;
+      background-color: color(background);
+      border-radius: 0 50% 50% 0;
+    }
+  }
+  form {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    margin: 0;
+    @include desktop {
+      display: grid;
+      grid-template-columns: 80% auto;
+      grid-template-rows: 1fr 1fr;
+    }
+    #messageWrapper,
+    #nameWrapper {
+      display: flex;
+      justify-content: center;
+      cursor: pointer;
+      align-items: center;
+      border-radius: 50%;
+      height: 200px;
+      width: 200px;
+      color: color(primary);
+      background-color: color(background);
+      box-shadow: 0 0 6px color(background);
+      transition: all 0.3s ease;
+      @include desktop {
+        width: 500px;
+        height: auto;
+        cursor: auto;
+        background-color: unset;
+        box-shadow: unset;
+        border-radius: 0;
+        display: block;
+        margin: auto;
+        font-size: 2em;
+      }
+      input {
+        margin-top: 10px;
+        display: none;
+        border-radius: 5px;
+        background-color: color(primary);
+        box-shadow: none;
+        border: none;
+        outline: unset;
+        padding: 10px;
+        transition: background-color 0.3s ease;
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+        @include desktop {
+          display: block;
+        }
+      }
+      input:focus {
+        background-color: color(primary-light);
+      }
+      input#message {
+        width: 200px;
+      }
+    }
+    #messageWrapper.active,
+    #nameWrapper.active {
+      position: absolute;
+      z-index: 1;
+      flex-direction: column;
+      border-radius: 0;
+      width: 100%;
+      height: 100%;
+    }
+    button.submit {
+      position: relative;
+      z-index: 0;
+      background-color: color(background);
+      color: color(primary);
+      font-family: inherit;
+      font-size: inherit;
+      letter-spacing: inherit;
+      border-radius: 5px;
+      border: none;
+      padding: 10px 30px;
+      @include desktop {
+        grid-column: 2;
+        grid-row: 1 / 3;
+        span {
+          writing-mode: vertical-rl;
+          text-orientation: upright;
+        }
+      }
+    }
+    button[disabled].submit::before {
+      position: absolute;
+      content: " ";
+      width: 80%;
+      height: 1px;
+      background-color: color(primary);
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      @include desktop {
+        width: 1px;
+        height: 90%;
+      }
+    }
+    button.submit::before {
+      width: 0%;
+    }
+    button:enabled.submit {
+      box-shadow: 0 5px 0 color(accent);
+    }
+    button:enabled.submit:hover,
+    button:enabled.submit:focus {
+      transform: translateY(2px);
+      box-shadow: 0 3px 0 color(accent);
+    }
+    button:enabled.submit:active {
+      transform: translateY(5px);
+      box-shadow: 0 0px 0 color(accent);
+    }
+  }
+}
diff --git a/index.html b/index.html
index d5a22a2..cc8e614 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,30 @@
-  <html>
-     <head>
-      <title>Please leave your message here! (For a change, be creative!)</title>
-     </head>
-     <body>
-        <form action="action.php" method="post">
-          Message<br>
-          <input type="text" name="field1"><br>
-          Name
-            <input type="text" name="field2"><br>
-           <input type="submit" value="Submit">
-        </form>
-     </body>
-    </html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Please leave your message here!</title>
+  <link rel="stylesheet" href="css/main.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+</head>
+
+<body>
+  <div class="background"></div>
+  <form action="action.php" method="post">
+    <div id="nameWrapper">
+      <label for="name">Name</label>
+      <input id="name" type="text" name="field2"><br>
+    </div>
+    <div id="messageWrapper">
+      <label for="message">Message</label>
+      <input id="message" type="text" maxlength="28" name="field1"><br>
+    </div>
+    <button class="submit" type="submit" disabled><span>Submit</span></button>
+  </form>
+
+  <script src="./js/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..d090feb
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,22 @@
+if ($(window).width() < 950) {
+    $('#nameWrapper, #messageWrapper').on('click', (e) => {
+        if(!$(e.target).hasClass('active')) {
+            $(e.target).addClass('active');
+            $('#' + e.target.getAttribute('id') + ' input').fadeIn();
+        } else {
+            $('#' + e.target.getAttribute('id') + ' input').fadeOut(100);
+            setTimeout(() => {
+                $(e.target).removeClass('active');
+            }, 100)
+        }
+    })
+}
+
+const inputs = $('input');
+inputs.on('input', () => {
+    if (inputs[0].value.length > 0 && inputs[1].value.length > 0) {
+        $('button').attr('disabled', false);
+    } else {
+        $('button').attr('disabled', true);
+    }
+})
\ No newline at end of file