$prime: #FF6E48
$second: #1b2431

@font-face
    font-family: "Liberty"
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/907368/liberty.otf')

body, html
    margin: 0
    padding: 0
    width: 100%
    height: 100%

*
    box-sizing: border-box

body
    background-color: $second
    font-size: 10px
    display: flex
    flex-flow: column
    justify-content: center
    align-items: center

    .text
        font-family: 'Liberty'
        font-weight: 100
        font-size: 7rem
        letter-spacing: -0.25em
        flex-flow: row

        .letter
            color: #d9fdff
            text-shadow: 0 0 2rem #00f0ff
            display: inline-block

            &.letter-2
                transform: translate(-0.2rem, 1rem) rotate(10deg)
                animation: flicker 2s ease-in-out infinite alternate

@keyframes flicker
    0%
        opacity: 1
        transform: translate(-0.2rem, 1rem) rotate(10deg)
    5%
        opacity: 1
        transform: translate(-0.2rem, 1rem) rotate(10deg)
    5.5%
        opacity: 0
        transform: translate(-0.2rem, 1rem) rotate(10deg)
    6%
        opacity: 1
        transform: translate(-0.2rem, 1rem) rotate(10deg)
    6.5%
        opacity: 1
        transform: translate(-0.2rem, 1rem) rotate(10deg)
    7%
        opacity: 0
        transform: translate(-0.2rem, 1rem) rotate(10deg)
    8%
        opacity: 1
        transform: translate(-0.2rem, 1rem) rotate(10deg)
    50%
        opacity: 1
        transform: translate(-0.2rem, 1rem) rotate(13deg)
    100%
        opacity: 1
        transform: translate(-0.2rem, 1rem) rotate(10deg)