body {
  background: linear-gradient(to bottom right, #215aa5, #081b7c);
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* min-height: 200vh; */
  color: white;
  height: 1100px;
}

#app {
  position: relative;
  min-height: 100%;
}

nav {
  color: white;
}
header a, header a:link {
  color: lightgrey;
}
header a:focus, header a:hover {
  color: darkgrey;
}

#about {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width:770px) {
  #about {
    position: static;
    transform: translateX(0);
  }
}

#wx-container h2, #wx-container h6 {
  font-family: 'Bebas Neue', Helvetica, sans-serif;
}
.wx-component {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;

  min-height: 50vh;

  transition: 1s ease all;
}
.wx-component:hover {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}
#title-text {
  flex: 100%;
  margin-bottom: 1em;
}
#title-text + div {
  flex: 40%;
}

#search-input, #search-input:empty {
  background: none;
  border: none;
  border-bottom: 2px solid lightgrey;
  outline: black;
  color: white;
}
#search-input:focus {
  border-bottom-color: white;
}