bg.css

@import url(https://fonts.googleapis.com/css?family=Lobster);
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

body {
  background: url(http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg) no-repeat;
  background-size: cover;
  color: #FFF;
  font-family: 'Lobster';
}

.img-responsive {
  width: 90vw;
  max-width:500px;
}

h1 {
  font-family: 'Pacifico';
  font-size: 6em;
  color: black;
}

.alert {
  margin-top: 10px;
}

.container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  min-height: 100vh;
  min-width: 200vh;
  overflow:hidden;
}

.search {
  flex: 1;
  text-align: center;
}

button {
  background-color: black;
  border: 0;
  color: white;
  font-size: 2em;
  padding: 10px;
  margin-left: 0;
  font-family: 'Lobster';
}

input[type=text] {
  background: rgba(255, 255, 255, 0.5);
  outline: none;
  border: 2px solid black;
  color: black;
  font-family: 'Lato';
  font-size: 2em;
  padding: 8px;
  margin-right: 0;
  text-align:center;
}


::-webkit-input-placeholder {
  color: black;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: black;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: black;
}

:-ms-input-placeholder {
  color: black;
}

#poster {
  margin-top: 20px
}

#poster p {
  font-size: 2em;
  color: black;
}

input:focus {
  outline: none;
}

.alert {
  background-color: rgba(0, 0, 0, 0.95);
  display: inline;
  padding: 10px;
  color: white;
}