More updates to the RSVP page

Slack message improvements
Font changes

src/routes/home/Home.css

@@ -32,6 +32,7 @@
   margin: 0 auto 40px;
   text-align: center;
   color: #fff;
+  text-shadow: 3px 3px 8px var(--colour-nearblack);
   font-size: 1.3em;
 }
 

src/routes/rsvp/Rsvp.css

@@ -19,28 +19,36 @@
 }
 
 .bgImageFocus {
-  filter: grayscale(0.4) brightness(1);
+  filter: grayscale(0.4) brightness(0.8);
 }
 
 .container {
   padding-top: 5vh;
   margin: 0 20px;
+  text-align: center;
 }
 
 .heading {
   font-family: var(--font-family-cursive);
-  color: var(--colour-nearblack);
   text-align: center;
+  margin-top: 0;
+  font-size: 4em;
+  color: #fff;
+  text-shadow: 2px 2px 6px var(--colour-nearblack);
 }
 
 .flexContainer {
   display: flex;
-  flex-direction: row;
   flex-flow: row wrap;
+  justify-content: space-around;
 }
 
-@media (--sm-viewport) {
-  .flexContainer {
-    flex-flow: row nowrap;
-  }
+.notes {
+  display: inline-block;
+  margin: 0 auto 40px;
+  padding: 0 15px;
+  border: 3px solid #fff;
+  border-radius: 14px;
+  background-color: rgba(0, 0, 0, 0.4);
+  color: #fff;
 }

src/routes/rsvp/Rsvp.js

@@ -35,12 +35,15 @@ class Rsvp extends React.Component {
           ].join(' ')}
         />
         <div className={s.container}>
-          <h1 className={s.heading}>Répondez, s&#39;il vous plaît</h1>
+          <h1 className={s.heading}>Odpovezte prosím</h1>
           <div className={s.flexContainer}>
             {this.props.people.map(person => (
               <RsvpCard key={person.key} person={person} focusCallback={this.focusCallback} />
             ))}
           </div>
+          <div className={s.notes}>
+            <p>You can modify the above details up until XX/XX/XXXX</p>
+          </div>
         </div>
       </div>
     );