styles.css

@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css);
@import url(https://unpkg.com/bulma-quickview@1.0.1/dist/bulma-quickview.min.css);
* {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}

.hero .nav, .hero.is-success .nav {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.hero .subtitle {
  padding: 3rem 0;
  line-height: 1.5;
}

.is-info .hero-body {
  padding-top: 1.5rem;
  padding-bottom: 6rem;
}

.is-info .w-player {
  background-color: rgba(0, 0, 0, 0.9);
}

.shadow {
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
}

.no-shadow {
  text-shadow: none;
}

.selectable-box {
  cursor: pointer;
}

.selectable-box:hover {
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.selectable-box:hover img {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.selectable-box:hover .no-hover-inverse {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.selectable-box.is-lighter:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.button.is-transparent {
  background-color: transparent;
  color: white;
}

.button.is-transparent:hover {
  background-color: white;
  color: black;
}