stuff

src/App.js

@@ -30,8 +30,11 @@ const styles = {
     animation: 'App-logo-spin infinite 20s linear'
   },
   logo: {
-    height: 'auto',
-    width: '100%'
+    backgroundImage:`url(${require('./invite.jpeg')})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'contain',
+    width: '20em',
+    height: '26em'
   },
   columnLeft: {
     flex: 1,
@@ -57,7 +60,7 @@ class App extends Component {
       <div className="App" style={styles.main}>
 
         <header className="App-header" style={styles.meat}>
-          <img src={require('./invite.jpeg')} alt="invite" style={styles.logo}/>
+          <div id='main-image' style={styles.logo}/>
           <ChristmasForm />
         </header>
 

src/form.js

@@ -184,10 +184,10 @@ class TextFields extends React.Component {
             onChange={this.handleSignificantOther} />
       </div>
           <br />
-          <Button style={{marginTop: '1.25em'}}onClick={this.submitForm}> Click to Confirm Attendance </Button>
+          <Button onClick={this.submitForm}> Click to Confirm Attendance </Button>
           <br />
       </form>
-      <h5 style={{color: '#901a23', marginTop: '8px', marginBottom: '8px', padding: '4px'}}>Such lovely people, these:</h5>
+      <h5 style={{color: '#901a23', marginTop: '24px', marginBottom: '16px', padding: '4px'}}>Such lovely people, these:</h5>
         {this.state.attendees}
       </div>
     );