Add validation to RSVP field

Add fade in/out of bg image
Clean up layout

src/components/RsvpButton/RsvpButton.css

@@ -27,7 +27,7 @@
 }
 
 .rsvpGroup {
-  width: 60%;
+  width: 65%;
 }
 
 .rsvpButtonGroup {
@@ -64,6 +64,27 @@
   box-shadow: 0 0 4px #fff;
 }
 
+.inputInvalid {
+  animation: shake 0.5s linear;
+}
+
+.invalidMsg {
+  display: none;
+  padding: 10px 16px;
+  border: 4px solid var(--colour-red);
+  border-radius: 14px;
+  background: transparent;
+  color: #fff;
+  text-decoration: none;
+  font-size: 18px;
+  line-height: 1.3333333;
+  transition: opacity ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
+}
+
+.invalidMsgVisible {
+  display: inline-block;
+}
+
 .button {
   display: block;
   box-sizing: border-box;
@@ -89,3 +110,28 @@
   opacity: 1;
   box-shadow: 0 0 4px #fff;
 }
+
+@keyframes shake {
+  8%,
+  41% {
+    transform: translateX(-10px);
+  }
+
+  25%,
+  58% {
+    transform: translateX(10px);
+  }
+
+  75% {
+    transform: translateX(-5px);
+  }
+
+  92% {
+    transform: translateX(5px);
+  }
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+}