main.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Quantico);

html, body {
    background: #111;
}

#container {
    background: #111;
    position: absolute;
    left: 50%;
    top: 50%;
}

#stats {
    position: absolute;
    right: 10px;
    top: 10px;
}

/* Info */
@keyframes show-info {
    0% {
        transform: rotateY(120deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

.info {
    transition: all 180ms ease-out;
    transform-style: preserve-3d;
    transform: perspective(800px);
    font-family: "Quantico", sans-serif;
    position: absolute;
    font-size: 12px;
    opacity: 0.8;
    color: #fff;
    width: 220px;
    left: 0px;
    top: 20px;
}

    .info:hover {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
        opacity: 1;
    }

    .info h1, .info h2, .info h3 {
        line-height: 1;
        margin: 5px 0;
    }

    .info a {
        transition: all 200ms ease-out;
        border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
        text-decoration: none;
        opacity: 0.6;
        color: #fff;
    }

        .info a:hover {
            opacity: 0.99;
        }

    .info .about,
    .info .more {
        transform-origin: 0% 50%;
        transform: rotateY(120deg);
        margin-bottom: 1px;
        background: rgba(0, 0, 0, 0.8);
        padding: 12px 15px 12px 20px;
    }

    .info .about {
        animation: show-info 500ms cubic-bezier(0.23, 1, 0.32, 1) 600ms 1 normal forwards;
        padding-bottom: 15px;
    }

        .info .about a {
            opacity: 0.9;
        }

        .info .about h1 {
            letter-spacing: -1px;
            font-weight: 300;
            font-size: 19px;
            opacity: 0.95;
        }

        .info .about h2 {
            font-weight: 300;
            font-size: 13px;
            opacity: 0.8;
        }

        .info .about h3 {
            text-transform: uppercase;
            margin-top: 10px;
            font-size: 11px;
        }

            .info .about h3:before {
                margin-right: 2px;
                font-size: 14px;
                content: "›";
            }

    .info .more {
        animation: show-info 500ms cubic-bezier(0.23, 1, 0.32, 1) 500ms 1 normal forwards;
        padding: 5px 15px 10px 20px;
    }

        .info .more a {
            text-transform: uppercase;
            margin-right: 10px;
            font-size: 10px;
        }