@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: #1b2431;
    font-size: 10px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
body .text {
    font-family: "Liberty";
    font-weight: 100;
    font-size: 5.5rem;
    letter-spacing: -0.25em;
    flex-flow: row;
    align-items: center;
    justify-content: center;
}
body .text .letter {
    color: #d9fdff;
    text-shadow: 0 0 2rem #00f0ff;
    display: inline-block;
}
body .text .letter.letter-1 {
    -webkit-animation: flicker 2s ease-in-out infinite alternate;
    animation: flicker 2s ease-in-out infinite alternate;
}

body .text .letter.letter-2 {
    -webkit-animation: flicker2 2s ease-in-out infinite alternate;
    animation: flicker2 2s ease-in-out infinite alternate;
}

@-webkit-keyframes flicker {
    0% {
        opacity: 1;

    }
    6% {
        opacity: 0;

    }
    7% {
        opacity: 1;

    }
    9% {
        opacity: 0;

    }
    11% {
        opacity: 1;

    }
    19% {
        opacity: 0;

    }
    20% {
        opacity: 1;

    }
    31% {
        opacity: 1;
    }
    50% {
        opacity: 1;

    }
    75% {
        opacity: 1;

    }

}

@keyframes flicker2 {
    0% {
        opacity: 1;

    }
    5% {
        opacity: 0;

    }
    5.5% {
        opacity: 0;

    }
    6% {
        opacity: 1;

    }
    6.5% {
        opacity: 1;

    }
    7% {
        opacity: 0;

    }
    8% {
        opacity: 1;

    }
    50% {
        opacity: 1;

    }

    94% {
        opacity: 1;

    }
    95% {
        opacity: 0;

    }
    96% {
        opacity: 1;

    }
    97% {
        opacity: 0;

    }
    98% {
        opacity: 1;

    }
    99% {
        opacity: 0;

    }
    100% {
        opacity: 1;

    }
}