* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 12px;
  }

  body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100vw;
    height: 100vh;
  }

  main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1rem;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  svg {
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    pointer-events: none;

    width: 556px;
    height: 177px;
    max-width: 100%;

    overflow: visible;
  }

  .letter {
    opacity: 0;
  }

  .letter--visible {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease 0.5s,
      -webkit-transform 1.5s ease 0s;
    transition: opacity 0.5s ease 0.5s, -webkit-transform 1.5s ease 0s;
    -o-transition: transform 1.5s ease 0s, opacity 0.5s ease 0.5s;
    transition: transform 1.5s ease 0s, opacity 0.5s ease 0.5s;
    transition: transform 1.5s ease 0s, opacity 0.5s ease 0.5s,
      -webkit-transform 1.5s ease 0s;
  }

  .letter__v {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  .letter__v.letter--visible {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  .letter__a {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  }

  .letter__a.letter--visible {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }