<link href="https://fonts.googleapis.com/css?family=Teko:700&display=swap" rel="stylesheet">

<h1><span class='one'>r</span><span class='two'>i</span><span class='three'>s</span><span class='four'>e</span> <span class='five'>u</span><span class='six'>p</span></h1>

<img src='https://images.unsplash.com/photo-1546707012-c46675f12716?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80' alt='Sebastian Ervi'>

<a href="https://www.youtube.com/watch?v=avKUEjD88YU">'rise up (demo)' by asking alexandria</a>

body {
  background-color: #212121;
  color: #4db1bc;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    grid-column: 1;
    grid-row: 1;
    opacity: .7;
    z-index: 0;
  }
  h1 {
    margin: 0;
    padding-bottom: 6rem;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    font-family: 'Teko', sans-serif;
    font-size: 10rem;
    text-transform: uppercase;
    animation: glow 2s ease-in-out infinite alternate;
    text-align: center;
  }
  a {
    font-family: 'Teko', sans-serif;
    color: #4db1bc;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: center;
    padding-bottom: 1rem;
  }
  
  @keyframes glow {
    from {
      text-shadow: 0 0 20px #2d9da9;
    }
    to {
      text-shadow: 0 0 30px #34b3c1, 0 0 10px #4dbbc7;
    }
  }
}