* {
  box-sizing: border-box;
}

button {
  cursor: pointer;
  padding: 8px 16px;
  margin: 10px 5px;
}

main {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.controls {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  min-height: 70px;
}

.slides-container {
  position: relative;
  overflow: hidden;
  display: flex;
  flex: 1;
}

.slide {
  position: absolute;
  font-size: 90px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: calc(100% / 3);
  width: 100%;
}

.slides-inner {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.typewriter h2{
  text-align: center;
  font-family: monospace; /* Web-safe typewriter-like font */
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .25em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blinking-cursor .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blinking-cursor {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
 background: #111;
 font-family: "Open Sans",  Impact;
}

.area {
  text-align: center;
  font-size: 2.5em;
  color: #fff;
  letter-spacing: -7px;
  font-weight: 100;
  text-transform: uppercase;
  animation: blur .75s ease-out infinite;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
  }
}