.logo {
  display: block;
  text-decoration: none;
  font-size: 0.75rem;
  height: 10.875em;
  width: 18.4375em;
  margin: 0 auto;
  max-width: 100%;
  text-align: center; }
  .logo .the-magic-of {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-size: 1.375em;
    height: 1em;
    line-height: 1;
    margin: 0 0 1em;
    overflow: hidden;
    position: relative;
    left: 0.2em;
    margin-bottom: 1.27273em;
    color: #aaa; }
  .logo .css-rainbow {
    max-width: 100%;
    white-space: nowrap; }
    .logo .css-rainbow .css-letter {
      display: inline-block;
      vertical-align: middle; }
    .logo .css-rainbow .css-rainbow-c {
      position: relative;
      overflow: hidden;
      width: 3.825em;
      height: 7.75em;
      margin-right: 3.175em; }
      .logo .css-rainbow .css-rainbow-c .rainbow {
        transform: rotateZ(90deg);
        transform-origin: 50% 100%;
        height: 3.875em;
        width: 7.75em;
        overflow: hidden;
        position: relative;
        transform: rotateZ(-90deg);
        position: absolute; }
        .logo .css-rainbow .css-rainbow-c .rainbow .bands {
          position: absolute;
          top: 0;
          left: 0;
          height: 3.875em;
          width: 7.75em;
          overflow: hidden; }
          .logo .css-rainbow .css-rainbow-c .rainbow .bands::before {
            box-shadow: inset 0 0 0 3.375em #6335e6, inset 0 0 0 2.8125em #0085ae, inset 0 0 0 2.25em #8ebd14, inset 0 0 0 1.6875em #ffc359, inset 0 0 0 1.125em #ff716a, inset 0 0 0 0.5625em #ff3283;
            box-shadow: inset 0 0 0 0.5625em #ff3283, inset 0 0 0 1.125em #ff716a, inset 0 0 0 1.6875em #ffc359, inset 0 0 0 2.25em #8ebd14, inset 0 0 0 2.8125em #0085ae, inset 0 0 0 3.375em #6335e6;
            border-radius: 50%;
            content: "";
            display: block;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: -3.875em;
            height: 7.75em;
            width: 7.75em; }
    .logo .css-rainbow .css-rainbow-s {
      transform: translate3d(0, 0, 0) rotateZ(22.5deg);
      width: 5em;
      height: 7.75em;
      position: relative;
      top: 0.15em; }
      .logo .css-rainbow .css-rainbow-s .rainbow {
        position: absolute; }
      .logo .css-rainbow .css-rainbow-s .top-half {
        position: absolute;
        overflow: hidden;
        width: 2.5em;
        height: 5em; }
        .logo .css-rainbow .css-rainbow-s .top-half .rainbow {
          transform: rotateZ(90deg);
          transform-origin: 50% 100%;
          height: 2.5em;
          width: 5em;
          overflow: hidden;
          position: relative;
          transform: rotateZ(-90deg); }
          .logo .css-rainbow .css-rainbow-s .top-half .rainbow .bands {
            position: absolute;
            top: 0;
            left: 0;
            height: 2.5em;
            width: 5em;
            overflow: hidden; }
            .logo .css-rainbow .css-rainbow-s .top-half .rainbow .bands::before {
              box-shadow: inset 0 0 0 2.25em #6335e6, inset 0 0 0 1.875em #0085ae, inset 0 0 0 1.5em #8ebd14, inset 0 0 0 1.125em #ffc359, inset 0 0 0 0.75em #ff716a, inset 0 0 0 0.375em #ff3283;
              box-shadow: inset 0 0 0 0.375em #ff3283, inset 0 0 0 0.75em #ff716a, inset 0 0 0 1.125em #ffc359, inset 0 0 0 1.5em #8ebd14, inset 0 0 0 1.875em #0085ae, inset 0 0 0 2.25em #6335e6;
              border-radius: 50%;
              content: "";
              display: block;
              position: absolute;
              margin: auto;
              left: 0;
              right: 0;
              bottom: -2.5em;
              height: 5em;
              width: 5em; }
      .logo .css-rainbow .css-rainbow-s .bottom-half {
        position: absolute;
        overflow: hidden;
        width: 2.5em;
        height: 5em;
        top: 2.75em;
        left: 2.5em;
        left: 2.45em; }
        .logo .css-rainbow .css-rainbow-s .bottom-half .rainbow {
          transform: rotateZ(90deg);
          transform-origin: 50% 100%;
          height: 2.5em;
          width: 5em;
          overflow: hidden;
          position: relative;
          transform: rotateZ(90deg);
          left: -2.5em; }
          .logo .css-rainbow .css-rainbow-s .bottom-half .rainbow .bands {
            position: absolute;
            top: 0;
            left: 0;
            height: 2.5em;
            width: 5em;
            overflow: hidden; }
            .logo .css-rainbow .css-rainbow-s .bottom-half .rainbow .bands::before {
              box-shadow: inset 0 0 0 2.25em #6335e6, inset 0 0 0 1.875em #0085ae, inset 0 0 0 1.5em #8ebd14, inset 0 0 0 1.125em #ffc359, inset 0 0 0 0.75em #ff716a, inset 0 0 0 0.375em #ff3283;
              box-shadow: inset 0 0 0 2.25em #ff3283, inset 0 0 0 1.875em #ff716a, inset 0 0 0 1.5em #ffc359, inset 0 0 0 1.125em #8ebd14, inset 0 0 0 0.75em #0085ae, inset 0 0 0 0.375em #6335e6;
              box-shadow: inset 0 0 0 0.375em #ff3283, inset 0 0 0 0.75em #ff716a, inset 0 0 0 1.125em #ffc359, inset 0 0 0 1.5em #8ebd14, inset 0 0 0 1.875em #0085ae, inset 0 0 0 2.25em #6335e6;
              box-shadow: inset 0 0 0 0.375em #6335e6, inset 0 0 0 0.75em #0085ae, inset 0 0 0 1.125em #8ebd14, inset 0 0 0 1.5em #ffc359, inset 0 0 0 1.875em #ff716a, inset 0 0 0 2.25em #ff3283;
              border-radius: 50%;
              content: "";
              display: block;
              position: absolute;
              margin: auto;
              left: 0;
              right: 0;
              bottom: -2.5em;
              height: 5em;
              width: 5em; }
      .logo .css-rainbow .css-rainbow-s.css-rainbow-s-1 {
        margin-right: 1.875em; }
      .logo .css-rainbow .css-rainbow-s.css-rainbow-s-2 {
        margin-right: -0.4375em; }
  @media (min-width: 48em) {
    .logo {
      font-size: 1rem; } }
