:root {
  --font-col: #237d47;
  --bg-col: #111;
  --primary: #00bcd4;
  --primary-dark: rebeccapurple;
}


.app-header {
  font-family: "Montserrat", sans-serif;
  position: absolute;
  left: 4%;
  top: 34%;
}
.app-header .layer-one,
.app-header .layer-two {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 60%;
  height: 10vh;
  padding: 3rem;
}
.app-header .layer-one .title,
.app-header .layer-two .title {
  margin: 0 0 -2rem;
  font-size: 6rem;

}
.app-header .layer-one .subtitle,
.app-header .layer-two .subtitle {
  margin: 0;
  font-size: 2.6rem;
  letter-spacing: 2px;
  width: 500px;
}
.app-header .layer-one .title {
  -webkit-text-stroke: 2px var(--primary);
  color: transparent;
  filter: drop-shadow(0 0 5px var(--primary));
}
.app-header .layer-one .subtitle {
  -webkit-text-stroke: 1px var(--font-col);
  color: transparent;
  filter: drop-shadow(0 0 2px var(--font-col));
}
.app-header .layer-two {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--primary);
  -webkit-clip-path: circle(var(--size, 0) at var(--x, 1%) var(--y, 1%));
          clip-path: circle(var(--size, 0) at var(--x, 1%) var(--y, 1%));
}
.app-header .layer-two .title,
.app-header .layer-two .subtitle {
  pointer-events: none;
  color: var(--font-col);
}