<div class="logo">
  <a href="https://nautdrafter.bitbucket.org">Naut<br>Drafter</a>
</div>

@import "bourbon";

$col-secondary: #edc405;

body {
	background-color: #02111b;
}

.logo {
	margin: 50px auto;
	text-align: center;

	a {
    text-decoration: none;
    @include transform(perspective(2.5em) rotateX(15deg) scaleY(0.8));
    @include transition(all 0.5s);

    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    font-size: 75px;
    font-weight: 700;
    font-family: 'Exo 2';
    line-height: 0.8;

    color: lighten($col-secondary, 10%);

    text-shadow: 0 -1px 15px rgba(0,0,0,0.9),
			      0 1px 0 adjust-hue(darken($col-secondary, 22%), -3deg),
				   0 3px 0 adjust-hue(darken($col-secondary, 21%), -3deg),
				   0 5px 0 adjust-hue(darken($col-secondary, 20%), -3deg),
				   0 7px 0 adjust-hue(darken($col-secondary, 19%), -3deg),
				   0 9px 0 adjust-hue(darken($col-secondary, 18%), -3deg),
					0 6px 50px transparentize(lighten($col-secondary, 20%), 0.2);

    &:first-line {
      font-size: 0.8em;
    }

    &:hover {
      @include transform(perspective(8em) rotateX(11deg) scale(1.2));

      text-shadow: 0 -1px 15px black,
			        0 1px 0 adjust-hue(darken($col-secondary, 22%), -3deg),
				     0 2px 0 adjust-hue(darken($col-secondary, 21%), -3deg),
				     0 0px 0 adjust-hue(darken($col-secondary, 20%), -3deg),
				     0 1px 0 adjust-hue(darken($col-secondary, 19%), -3deg),
				     0 2px 0 adjust-hue(darken($col-secondary, 18%), -3deg),
					  0 2px 30px transparentize(lighten($col-secondary, 20%), 0.4);
		}
	}
}