* {
  font-family: 'Futura Md BT', sans-serif;
}

html {
  background: #1e1a20;
}

.webgl {
  position: fixed;
  top: 0;
  left: 0;
}

.container {
  color: white;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(7, 100vh);
  align-items: center;
}

.section {
  color: #ffeded;
  grid-column: 2 / 8;
}

section:nth-child(even) {
  grid-column: 7 / 12;
}

section:nth-child(4) {
  grid-column: 2 / 12;
}

.video {
  width: 100%
}

.title {
  font-size: 4rem;
}

.subtitle {
  font-size: 1rem;
}

.green,
.subtitle,
.demo-container {
  color: #00c878;
}

.demo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo-container > p {
  margin-right: 20px;
}

.link {
  color: #00c878;
  text-decoration: none;
}

@media only screen and (max-width: 600px) {
  .section {
    grid-column: 1 / 13;
  }

  section:nth-child(even) {
    grid-column: 1 / 13;
  }

  .title {
    text-align: center;
    font-size: 2rem;
  }
}