@import compass/css3

@import rainbow

.logo
    display: block
    text-decoration: none
    font-size: .75rem
    height: 10.875em
    width: 18.4375em
    margin: 0 auto
    max-width: 100%
    text-align: center

    .the-magic-of
        font-weight: 300
        text-transform: uppercase
        letter-spacing: .4em
        font-size: 1.375em
        height: 1em
        line-height: 1
        margin: 0 0 1em
        overflow: hidden
        position: relative
        left: .2em
        margin-bottom: 1.27272727em
        color: #aaa

    .css-rainbow
        max-width: 100%
        white-space: nowrap

        .css-letter
            +inline-block

        .css-rainbow-c
            position: relative
            overflow: hidden
            width: 3.825em
            height: 7.75em
            margin-right: 3.175em

            .rainbow
                +rainbow(7.75em, .5625em)
                transform: rotateZ(-90deg)
                position: absolute

        .css-rainbow-s
            transform: translate3d(0, 0, 0) rotateZ(22.5deg)
            width: 5em
            height: 7.75em

            // Damn rounding
            position: relative
            top: .15em

            .rainbow
                position: absolute

            .top-half
                position: absolute
                overflow: hidden
                width: 2.5em
                height: 5em

                .rainbow
                    +rainbow(5em, .375em)
                    transform: rotateZ(-90deg)

            .bottom-half
                position: absolute
                overflow: hidden
                width: 2.5em
                height: 5em
                top: 2.75em
                left: 2.5em

                // Damn rounding
                left: 2.45em

                .rainbow
                    +rainbow(5em, .375em, true)
                    transform: rotateZ(90deg)
                    left: -2.5em

            &.css-rainbow-s-1
                margin-right: 1.875em

            &.css-rainbow-s-2
                margin-right: -.4375em

    @media (min-width: 48em)
        font-size: 1rem