mfx/site/src/pages/index.module.css

In-browser video editing toolkit, with effects accelerated by WebGL

/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.heroBanner {
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  flex: 1;
  color: white;
  background-color: black;
  text-align: left;
  min-height: 400px;

  letter-spacing: -0.5px;
}

.heroBanner video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100vw;
}

.container {
  position: relative;
  display: block;
  z-index: 100;
}

@media screen and (max-width: 996px) {
  .heroBanner {
    padding: 1rem;
  }
}

@media screen and (max-width: 600px) {
  .heroBanner video {
    display: none;
  }
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}