style.css

body {
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #D7C9E0;
}

h1 {
  text-align: center;
}

.welcome {
  font-family: 'Satisfy', cursive;
  color: #957FEF;
  font-size: 7em;
  text-shadow: 4px 4px 2px rgba(150, 150, 150, 0.79);
}

h2 {
  font-family: 'Satisfy', cursive;
  color: #957FEF;
  font-size: 2.5em
}

span {
  font-family: 'Source Code Pro', monospace
}

h2 span {
  color: #F7F7F7;
  font-family: 'Satisfy', cursive;
  text-shadow: 4px 4px 2px rgba(150, 150, 150, 0.79);
}

.container {
  display: flex;
  align-items: center;
  /*height: 30em;*/
  flex-wrap: wrap;
  justify-content: center;
  width:auto;
}
.container a {
  text-decoration: none;
  font-size: 2em;
  cursor: pointer;
  font-family: 'Satisfy', cursive;
}
.containerFixed {
  display: flex;
  align-items: center;
  /*height: 30em;*/
  flex-wrap: wrap;
  justify-content: center;
  width:fixed;
}
.containerFixed a {
  text-decoration: none;
  font-size: 2em;
  cursor: pointer;
  font-family: 'Prociono', serif;
}

.createEvent,
.checkinEvent {
  background-color: #957FEF;
  margin: 1em;
  padding: 3em;
  text-align: center;
  border-radius: 15px;
  -webkit-box-shadow: 0 8px 16px -6px black;
	   -moz-box-shadow: 0 8px 16px -6px black;
	        box-shadow: 0 8px 16px -6px black;
}
.createEvent:hover,
.checkinEvent:hover {
  color: #fff;
}
.homeEvent {
  font-size: 16px;
  flex-wrap: wrap;
  background-color: #957FEF;
  margin: 1em;
  padding: 3em;
  text-align: center;
  border-radius: 15px;
  -webkit-box-shadow: 0 8px 16px -6px black;
	   -moz-box-shadow: 0 8px 16px -6px black;
	        box-shadow: 0 8px 16px -6px black;
}

.homeEvent:hover {
  color: #fff;
}
.customHomeEvent {
  font-size: 16px;
  font-family: 'Satisfy', cursive;
  flex-wrap: wrap;
  background-color: #957FEF;
  margin: 1em;
  padding: 3em;
  text-align: center;
  border-radius: 15px;
  -webkit-box-shadow: 0 8px 16px -6px black;
	   -moz-box-shadow: 0 8px 16px -6px black;
	        box-shadow: 0 8px 16px -6px black;
}

.customHomeEvent:hover {
  color: #fff;
}


.event-flex,
.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: 'Source Code Pro', monospace;
}

.event-header {
  background: #957FEF;
  padding: 1em 0;
  font-weight: 300;
  text-align: center;
  color: #fff;
  margin: 0 20% 0 20%;
  font-family: 'Source Code Pro', monospace;
  font-size: 1.5em;
  order: 1;
}

.event-body,
.listEvents {
  background: #EEEEEE;
  text-align: center;
  font-family: 'Source Code Pro', monospace;
  margin: 0 20% 0 20%;
  /*margin: 0 6em 0 6em;*/
  order: 2;
}

.event-body button {
  font-family: 'Source Code Pro', monospace;
  letter-spacing: 0.1em;
  font-size: .5em;
  margin: 0.6em 0;
  border: 1px solid #000;
  border-radius: 3px;
  background: #fff;
  width: 10%;
  padding: 1%;
  color: #000;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.event-body button:hover {
  background: #957FEF;
  cursor: pointer;
}

.code {
  text-align: center;
  font-family: 'Source Code Pro', monospace;
  order: 3;
}

.code h1 {
  font-size: 3.5em;
  font-family: 'Source Code Pro', monospace;
}

/*Form Styling*/

.form-style {
    max-width: 400px;
    margin: 10px auto;
    padding: 16px;
    background: #F7F7F7;
    border-radius: 4px;
}

.form-style h2,
 .username {
    background: #957FEF;
    padding: 1em 0;
    font-weight: 300;
    text-align: center;
    color: #fff;
    margin: -16px -16px 16px -16px;
    font-family: 'Source Code Pro', monospace;
    font-size: 1.5em;
}

.username {
  font-size: 1em;
}

.form-style input[placeholder="Title"],
.form-style input[placeholder="Location"],
.form-style input[placeholder="Time"],
.form-style input[placeholder="Code"],
.form-style input[placeholder="Date"],
.form-style input[placeholder="Your Name"],
.form-style input[placeholder="Cost"] {
      font-family: 'Source Code Pro', monospace;
      font-size: 1em;
      -webkit-transition: all 0.30s ease-in-out;
      -moz-transition: all 0.30s ease-in-out;
      -ms-transition: all 0.30s ease-in-out;
      -o-transition: all 0.30s ease-in-out;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      width: 100%;
      background: #fff;
      margin-bottom: 4%;
      border: 1px solid #ccc;
      padding: 3%;
      color: #555;
}

form button {
  font-family: 'Source Code Pro', monospace;
  letter-spacing: 0.1em;
  font-size: 1em;
  margin: 0.6em 0;
  border: 1px solid #000;
  border-radius: 3px;
  background: #fff;
  width: 100%;
  padding: 3%;
  color: #000;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.userButton {
  font-family: 'Source Code Pro', monospace;
  cursor: pointer;
  letter-spacing: 0.1em;
  font-size: 1em;
  margin: 1em;
  border: 1px solid #000;
  border-radius: 3px;
  background: #fff;
  width: 100%;
  padding: 3%;
  color: #000;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

form button:hover {
  background: #957FEF;
  cursor: pointer;
}

.userboss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;;
  align-items: center;
  padding: 2em;
  margin-bottom: 1.5%;
}

.usercontainer {
  width: 40%;
  margin: 10px auto;
  padding: 16px;
  background: #F7F7F7;
  border-radius: 4px;
  font-family: 'Source Code Pro', monospace;
  font-size: 1.5em;
  -webkit-box-shadow: 0 8px 16px -6px black;
  -moz-box-shadow: 0 8px 16px -6px black;
  box-shadow: 0 8px 16px -6px black;
}

img {
  width:25%;
  height: auto;
}