<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Monoton|Permanent+Marker|Righteous|Shadows+Into+Light" rel="stylesheet">


<div class="container">
  <div class="text1">Esten Grove</div>
  <div class="text2">Esten Grove</div>
  <div class="text3">Esten Grove</div>
</div>

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
  margin: 2rem 2rem;
  padding: 0;
  background: #111;
}
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
/* Remove the 'x' value for stagger fx */
.text1 {
  font-family: 'Monoton', cursive;
  font-size: 6rem;
  color: #fff;
  text-shadow: 
    0  .5rem #fff, 
    0  1rem #fff, 
    0  2rem #ff0080, 
    0  3rem #ff0080, 
    0  4rem #ff0080, 
    0  5.5rem #ff0080, 
    0  7.5rem #ff0080;
}
.text2 {
  font-family: 'Righteous', cursive;
  font-size: 6rem;
  color: #fff;
  text-shadow: 
    0 .5rem .5rem #fff,
    0 .5rem 1rem #fff,
    0 .5rem 2rem #8938E6,
    0 .5rem 3rem #8938E6,
    0 .5rem 4rem #8938E6,
    0 .5rem 5rem #8938E6,
    0 .5rem 6rem #8938E6,
    0 .5rem 7rem #8938E6,
    0 .5rem 8rem #8938E6;
}
/* with a slight 3d effect */
.text3 {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 6rem;
  color: #eee;
  text-shadow: 
    0 .5rem .5rem #fff,
    0 .5rem 1rem #fff,
    0 .5rem 2rem #29F294,
    0 .5rem 3rem #29F294,
    0 .5rem 4rem #29F294,
    0 .5rem 5rem #29F294,
    0 .5rem 6rem #29F294,
    0 .5rem 7rem #29F294,
    0 .5rem 8rem #29F294;
}

/*
font-family: 'Shadows Into Light', cursive;
font-family: 'Gloria Hallelujah', cursive;
font-family: 'Permanent Marker', cursive;
font-family: 'Righteous', cursive;
font-family: 'Monoton', cursive;
#8938E6 - purple
#29F294 - green



*/