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

body {
  align-items: center;
  display: flex;
  justify-content: center;
  font-family: 'Work Sans', sans-serif;
  height: 100vh;
  overflow: hidden;
}

.awesome {
  color: #7F00FF;
  font-size: 10vw;
}

.eso {
  animation: rotate 1s forwards ease-in-out 2s;
  display: inline-block;
  transform: rotateY(0);
}

@supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
  .eso {
    background: linear-gradient(to left, #E100FF, #7F00FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.me {
  color: #E100FF;
}

@keyframes rotate {
  to { transform: rotateY(900deg); }
}

@media (min-width: 40em) {
  .awesome {
    color: #7F00FF;
    font-size: 4em;
  }
}