<div class="logo">
	<div class="horn"></div>
	<div class="circle">
		<div class="ear"></div>
		<div class="body"></div>
		<div class="eye"></div>
		<div class="head"></div>
		<div class="head-2"></div>
		<div class="mouth"></div>
		<div class="circle-inner"></div>
	</div>
	<div class="circle-outside"></div>
</div>

// colors
$bg-color: #011c45;
$logo-color: #000;
$unicorn-color: #ffffff;

// mixins
@mixin center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

@mixin pseudo($position: absolute, $content: "") {
    content: $content;
    position: $position;
}

@mixin breakpoint($point) {
    @if $point==tablet {
        @media (max-width: 1024px) and (min-width: 768px) {
            @content ;
        }
    }
    @else if $point==mobile {
        @media (max-width: 480px) and (min-width: 320px) {
            @content ;
        }
    }
}

html, body{
  width: 100%;
  height: 100%;
}

body{
  background: $bg-color;
  overflow: hidden;
}
.logo{
  .horn{
    @include center;
    top: -43.8vmin;
    left: -38vmin;
    z-index: 5;
    width: 0;
    height: 0;
    border-bottom: 31vmin solid $unicorn-color;
    border-left: 2vmin solid transparent;
    border-right: 2vmin solid transparent;
    transform: rotate(-60deg);
  }

  .circle{
    @include center;
    overflow: hidden;
    background: linear-gradient(150deg, #5eb5c1, #6589bd 60%);
    width: 57vmin;
    height: 57vmin;
    border-radius: 50%;

    .ear{
      @include center;
      top: -43.2vmin;
      left: 1.2vmin;
      z-index: 5;
      background: $unicorn-color;
      width: 5.5vmin;
      height: 7.5vmin;
      border-radius: 90% 0;
      transform: rotate(-69deg);

      &:before{
        @include pseudo;
        background: $unicorn-color;
        top: -3.5vmin;
        left: -3.5vmin;
        width: 7.2vmin;
        height: 7.5vmin;
        transform: rotate(5deg);
        border-radius: 90% 0;
      }
    }

    .body{
      position: absolute;
      background: $unicorn-color;
      width: 55vmin;
      height: 55vmin;
      margin-top: 5.3vmin;
      margin-left: 4vmin;
      transform: rotate(-12deg);
      border-top-right-radius: 70%;
    }

    .eye{
      @include center;
      top: -20.7vmin;
      left: -7.8vmin;
      width: 2vmin;
      height: 3.9vmin;
      z-index: 4;
      background: linear-gradient(to bottom, #5eb5c1, #6589bd);
      transform: rotate(30deg);
      border-top-right-radius: 2vmin;
      border-bottom-right-radius: 2vmin;
    }

    .head{
      @include center;
      width: 15vmin;
      height: 29vmin;
      background: $unicorn-color;
      z-index: 3;
      top: -10vmin;
      left: -7.8vmin;
      transform: rotate(32deg);
      border-bottom-right-radius: 67%;

      &:before{
        @include pseudo;
        left: 1.18vmin;
        width: 10vmin;
        height: 10vmin;
        background: $unicorn-color;
        bottom: -0.2vmin;
        transform: rotate(15deg);
        border-bottom-right-radius: 20%;
      }

      &:before{
        @include pseudo;
        left: 1.1vmin;
        width: 10vmin;
        height: 10vmin;
        background: $unicorn-color;
        bottom: 0.1vmin;
        transform: rotate(5deg);
        border-bottom-right-radius: 8%;
      }
    }

    .head-2{
      @include center;
      top: -5vmin;
      left: 7.6vmin;
      width: 10vmin;
      height: 19.5vmin;
      z-index: 3;
      background: $unicorn-color;
      transform: rotate(38deg);
      border-top-right-radius: 10vmin;
      border-bottom-right-radius: 10vmin;

      &:before{
        @include pseudo;
        width: 4vmin;
        height: 4vmin;
        background: $unicorn-color;
        left: 0.08vmin;
        bottom: -0.8vmin;
        transform: rotate(35deg);
      }
    }

    .mouth{
      @include center;
      top: 15.3vmin;
      left: -28.5vmin;
      z-index: 3;
      width: 0;
      height: 0;
      border-left: 5.5vmin solid transparent;
      border-right: 5.5vmin solid transparent;
      border-top: 3.7vmin solid $unicorn-color;
      transform: rotate(31deg);

      &:before{
        @include pseudo;
        left: 1.94vmin;
        width: 4vmin;
        height: 4vmin;
        background: $unicorn-color;
        bottom: 5.8vmin;
        transform: rotate(19deg);
        border-bottom-right-radius: 8%;
      }
    }

    .circle-inner{
      position: absolute;
      background: linear-gradient(to bottom, #94a2cf, transparent 40%);
      width: 55vmin;
      height: 55vmin;
      margin-top: 4vmin;
      margin-left: -16vmin;
      transform: rotate(45deg);
      border-top-right-radius: 35%;
      z-index: 2;

      &:before{
        @include pseudo;
        width: 55vmin;
        height: 55vmin;
        margin-top: 2vmin;
        margin-left: -10vmin;
        background: linear-gradient(150deg, #5eb5c1, #6589bd 75%);
        border-top-right-radius: 50%;
        border-bottom-right-radius: 100%;
      }
    }
  }

  .circle-outside{
    @include center;
    top: -25vmin;
    left: -65vmin;
    z-index: 2;
    width: 55vmin;
    height: 55vmin;
    background: $bg-color;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 100%;
    transform: rotate(45deg);
  }
}

// design inspire from
// https://dribbble.com/shots/5774723-Unicorn-logo