//==========================
//         Variables
//==========================
$Body-BG:            #303354;
$C-White:            #ffffff;
$C-Black:            #000000;

//character one
$C-Character-1:         #f7941d;
$C-Character-Face-1:    #dedbcc;
//character two
$C-Character-2:         #a23b2a;
$C-Character-Face-2:    #95c7a4;
//character three
$C-Character-3:         #e2704b;
$C-Character-Face-3:    #69b392;
//character four
$C-Character-4:         #4b394f;
$C-Character-Face-4:    #ffc154;
//character five
$C-Character-5:         #7d9fa9;
$C-Character-Face-5:    #f6f5f1;
//character six
$C-Character-6:         #b0606d;
$C-Character-Face-6:    #72665a;


//Character colour array 
$list-Character-Colours: $C-Character-1, $C-Character-2, $C-Character-3, $C-Character-4, $C-Character-5, $C-Character-6;

//Character face colour array 
$list-Character-Face-Colours: $C-Character-Face-1, $C-Character-Face-2, $C-Character-Face-3, $C-Character-Face-4, $C-Character-Face-5, $C-Character-Face-6;

//Box shadow effect mixin
@mixin shadow-effect($width, $height, $position-top, $position-left, $angle) {
    background-color: #000000;
    content: ' ';
    height: $height;
    position: absolute;
    opacity: .2;
    -webkit-transform: rotate($angle);
    -ms-transform: rotate($angle);
    transform: rotate($angle);
    width: $width;
    display: block;
    z-index: 0;
    top: $position-top;
    left: $position-left;
}

@mixin circle($width, $height) {
  width: $width;
  height: $height;
  border-radius: 100%;
}

@mixin centerPosition($margin){
  left: 50%;
  margin-left: $margin;
}

@mixin triangle-down($border-left, $border-right, $border-top, $border-color) {
   width: 0; 
	height: 0; 
	border-left: $border-left solid transparent;
	border-right: $border-right solid transparent;
	
	border-top: $border-top solid $border-color;
}

@mixin triangle-top($border-left, $border-right, $border-bottom, $border-color) {
   width: 0; 
	height: 0; 
	border-left: $border-left solid transparent;
	border-right: $border-right solid transparent;
	
	border-bottom: $border-bottom solid $border-color;
}

@mixin triangle-right($border-bottom, $border-top, $border-right, $border-color) {
   width: 0; 
	height: 0; 
	border-bottom: $border-bottom solid transparent;
	border-top: $border-top solid transparent;
	
	border-right: $border-right solid $border-color;
}

@mixin triangle-left($border-bottom, $border-top, $border-left, $border-color) {
   width: 0; 
	height: 0; 
	border-bottom: $border-bottom solid transparent;
	border-top: $border-top solid transparent;
	
	border-left: $border-left solid $border-color;
}

@mixin semi-circle($height, $width, $borderWidth, $Color){
  height: $height;
     width: $width;
     border-radius: $borderWidth $borderWidth 0 0;
     -moz-border-radius: $borderWidth $borderWidth 0 0;
     -webkit-border-radius: $borderWidth $borderWidth 0 0;
     background-color: $Color;
}


@keyframes fade-in {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}
//==========================
//         Generic
//==========================

body {
  background: #303354; 
  background: -moz-radial-gradient(center, ellipse cover, #303354 15%, #000000 100%); 
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(15%,#303354), color-stop(100%,#000000)); 
  background: -webkit-radial-gradient(center, ellipse cover, #303354 15%,#000000 100%); 
  background: radial-gradient(ellipse at center, #303354 15%,#000000 100%);
  margin: 0;
  padding: 0;
  height:100vh;
}

.container {
  margin: 0 auto;
  margin-top: 100px;
  width: 70%;
  position:relative;
  text-align: center;
  
  animation: fade-in 2s forwards;
  
  @media (min-width: 640px) {
    width: 640px;
  }
  
  @media (min-width: 1024px) {
    width: 900px;
  }
  
 
}


    
//==========================
//        Characters
//==========================

@mixin character-bg($bg){
  background-color: $bg;
}


.face {
  position: relative;
  width: 80%; 
  height: 150px;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 30px;
  z-index: 20;
  
  &:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-radius: 10px; 
    top: 97%;
    width: 0;
    left:0;
  }
}

.character {
  box-sizing: border-box;
  display: inline-block;
  height: 250px;
  width: 250px;
  position:relative;
  z-index: 10;
  overflow: hidden;
  
  @each $C-Character-Color in $list-Character-Colours {
      $i: index($list-Character-Colours, $C-Character-Color);  
    
      &__#{$i} { 
        @include character-bg($C-Character-Color);
        
        transition: transform linear .2s;
        
        &:hover {
          transform: scale(1.1); 
          z-index: 20;
        }
        
        .face {
          background-color: nth($list-Character-Face-Colours, $i);
          
          &:after {
              border-top: 50px solid nth($list-Character-Face-Colours, $i);
          }
        }
      }
  }
}

.shadow-effect {
  @include shadow-effect(180px, 195px, 60px, 115px, 27deg);
}

//==========================
//  Characters Generics
//==========================

.hair {
  height: 40px;
  width: 100%;  
}

.eyes {
  height: 40px;
  width: 100%;  
  
  &__ball {
    @include circle(30px, 30px);
    position: absolute;
    top: 30px;
   
    
    &:first-child {
      left: 27%;
    }
    
     &:last-child {
       right: 27%;
    }
  }
}

.nose {
  height: 20px;
  width: 100%;
}

.mouth {
  height: 40px;
  width: 100%;
}

.hair,
.eyes,
.mouth,
.nose {
  position: relative;
}

//==========================
//  Characters Features
//==========================

$C-Character-One-Hair: #414143; 
$C-Character-One-Eye-Ball: #de5430;
$C-Character-One-Eye-Pupil: $C-Character-One-Hair;
$C-Character-One-Mouth-BG: #a21f01;
$C-Character-One-Tongue-BG: #ec3a00;


.hair__character-1 {
  background-color: $C-Character-One-Hair;
  
  &:after {
    @include triangle-down(20px, 20px, 20px, $C-Character-One-Hair);
    width: 0; 
    height: 0; 
    content: ' ';
    position: absolute;
    top: 35px;
    left: 50%;
    margin-left: -20px;
  }
    
  .hair__feature {
    
  }
  
  .hair__sideburns {
    background-color: $C-Character-One-Hair;
    height: 75px;
    width: 15px;
    position: absolute;
    top: 30px;
    
    &:first-child {
      left: 0;
    }
    
    &:last-child {
      right: 0;
      
      &:after {
        transform: rotate(180deg);
        left: 0;
      }
    }
    
    &:after {
      @include triangle-right(15px, 15px, 15px, $C-Character-One-Hair);
      content: ' ';
      position: relative;
      top: 80%;
      display: block;
      width: 100%;
      left: -14px;
    }
  }
}

.eyes__character-1 {
  .eyes__ball {
    background-color: $C-Character-One-Eye-Ball;
    border: 4px solid $C-Character-One-Eye-Pupil;
  }
  
  .eyes__pupil {
    @include circle(15px, 15px);
    @include centerPosition(-7px);
    
    position: absolute;
    background-color: $C-Character-One-Eye-Pupil;
    top: 7px;
    
    &:after {
      @include circle(5px, 5px); 
      @include centerPosition(0);
    
      background-color: $C-White;
      content: ' ';
      display: block;
      position: relative;
      top: 3px;
    }
  }
}

.nose__character-1 {
  .nose__nostrill {
      @include circle(5px, 5px); 
      left: 0;
      background-color: lighten($C-Character-One-Hair, 45%);
      display: inline-block;
      position: relative;
      top: 25px;
  }
}

.mouth__character-1 { 
    @include centerPosition(-25px);
    background-color: $C-Character-One-Mouth-BG;
    border-radius: 7px;
    height: 25px;
    position: relative;
    overflow: hidden;
    top: 30px;
    width: 50px; 
    z-index: 20;
  
  &:after,
  &:before {
    @include triangle-down(5px,5px, 20px, $C-White);
    content: ' ';
    position: absolute;
    top: 0;
  }
  
  &:before {
    left: 0;
  }
  
  &:after {
    right: 0;
  }
  
  .mouth__tongne {
      @include centerPosition(-15px);
      @include circle(30px, 30px);
      background-color: $C-Character-One-Tongue-BG;
      position: relative;
      top: 15px;
  }
}


$C-Character-Two-Hair: #413f42; 
$C-Character-Two-Eye-Ball: #f46374;
$C-Character-Two-Eye-Pupil: $C-Character-One-Hair;
$C-Character-Two-Mouth-BG: $C-Character-Two-Hair;

.hair__character-2 {
  background-color: $C-Character-Two-Hair;
  height: 25px;
  
  .hair__sideburns {
    background-color: $C-Character-One-Hair;
    height: 75px;
    width: 15px;
    position: absolute;
    top: 0;
    right: 0;
    
    &:first-child {
      left: 0;
    }
  }
  
  .hair__spike {
    @include triangle-down(20px, 20px, 30px, $C-Character-Two-Hair);
    position: absolute;
    top: 20px;
    
    &--1 {
      left: 5px;
    }
    
    &--2 {
      left: 35px;
    }
    
    &--3 {
      left: 65px;
    }
    
    &--4 {
      left: 93px;
    }
    
    &--5 {
      left: 120px;
    }
    
    &--6 {
      left: 150px;
    }
  }
}

.eyes__character-2 {
  position: relative;
  
  .eyes__ball {
    background-color: $C-Character-Two-Eye-Ball;
    border: 4px solid $C-Character-Two-Eye-Pupil;
    margin-top: 15px;
  }
  
  .eyes__pupil {
    @include circle(15px, 15px);
    @include centerPosition(-7px);
    
    position: absolute;
    background-color: $C-Character-Two-Eye-Pupil;
    top: 7px;
    
    &:after {
      @include circle(5px, 5px); 
      @include centerPosition(0);
    
      background-color: $C-White;
      content: ' ';
      display: block;
      position: relative;
      top: 3px;
    }
  }
  
  .eyes__brows {
    @include centerPosition(-24px);
    border: 4px solid $C-Character-Face-2;
    position: absolute;
    z-index: 10;
    top: -5px;
    width: 40px;
    height: 10px;
    background-color: $C-Character-Two-Hair;
  }
}

.mouth__character-2 {
   @include centerPosition(-35px);
    background-color: $C-Character-Two-Mouth-BG;
    border-radius: 7px;
    height: 25px;
    position: relative;
    overflow: hidden;
    top: 40px;
    width: 70px; 
    z-index: 20;
  
  .mouth__teeth {
    background-color: $C-White;
    width: 95%;
    margin-left: 2.5%;
    height: 12px;
    display: block;
    position: relative;
    
    &--top {
      top: -1px; 
    }
    
    &--bottom {
      bottom: -1px;
    }
  }
}


$C-Character-Three-Hair: #414143; 
$C-Character-Three-Eye-Ball: #fcd762;
$C-Character-Three-Eye-Pupil: $C-Character-Three-Hair;
$C-Character-Three-Mouth-BG: $C-Character-Three-Hair;
$C-Character-Three-Tongue-BG: #e25331;


.hair__character-3 {
  background-color: $C-Character-Three-Hair;
  
  &:after {
    @include triangle-down(20px, 20px, 20px, $C-Character-Three-Hair);
    width: 0; 
    height: 0; 
    content: ' ';
    position: absolute;
    top: 35px;
    left: 50%;
    margin-left: -20px;
  }
  
  .hair__sideburns {
    background-color: $C-Character-Three-Hair;
    height: 75px;
    width: 15px;
    position: absolute;
    top: 30px;
    
    &:first-child {
      left: 0;
    }
    
    &:last-child {
      right: 0;
      
      &:after {
        transform: rotate(180deg);
        left: 0;
      }
    }
    
    &:after {
      @include triangle-right(15px, 15px, 15px, $C-Character-Three-Hair);
      content: ' ';
      position: relative;
      top: 80%;
      display: block;
      width: 100%;
      left: -14px;
    }
  }
}

.eyes__character-3 {
  .eyes__ball {
    background-color: $C-Character-Three-Eye-Pupil;
    border: 4px solid $C-Character-Three-Eye-Pupil;
    overflow: hidden;
    top: 20px;
  }
  
  .eyes__pupil {
    @include circle(25px, 25px);
    @include centerPosition(-12.5px);
    
    position: absolute;
    background-color: $C-Character-Three-Eye-Ball;
    top: -5px;
    
  }
}

.nose__character-3 {
  .nose__nostrill {
      @include circle(7px, 20px); 
      left: 0;
      background-color: $C-Character-Three-Hair;
      display: inline-block;
      position: relative;
      top: 15px;
      transform: rotate(-10deg);
    
    &:first-child {
      transform: rotate(10deg);
    }
  }
}

.mouth__character-3 { 
    @include centerPosition(-45px);
    @include semi-circle(40px, 90px, 90px, $C-Character-Three-Mouth-BG);
    position: relative;
    overflow: hidden;
    top: 20px;
    z-index: 20;
   
  .mouth__tongne {
      @include centerPosition(-25px);
      @include circle(50px, 50px);
      background-color: $C-Character-Three-Tongue-BG;
      position: relative;
      top: 30px;
  }
  
  .mouth__teeth {
    background-color: $C-White;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid $C-Character-Three-Mouth-BG;
    height: 40px;
    position: relative;
    width: 25%;
    float: left;
    
    &:nth-child(-n+4) {
      top: -15px;
    }
  }
}

$C-Character-Four-Overlay-Face: #e8b04f; 
$C-Character-Four-Holes: #211f20;
$C-Character-Four-Stork: #5cb960;
$C-Character-Four-BG: $C-Character-4;

.hair__character-4 {
  .hair__stork {
    @include centerPosition(-15px);
    @include triangle-top(15px, 15px, 30px, $C-Character-Four-Stork);
    position: absolute;
    top: -30px;
    
    &:before {
      @include circle(30px, 30px);
      background-color: $C-Character-Four-BG;
      content: ' ';
      display: inline-block;
      position: absolute;
    }
  }
  
  .hair__sideburns {
    background-color: $C-Character-Four-Overlay-Face;
    height: 150px;
    width: 20px;
    position: absolute;
    
    &--one {
      left: 0;
      border-bottom-left-radius: 10px;
    }
    
    &--two {
      right: 0;
      border-bottom-right-radius: 10px;
    }
    
    &--center {
      @include centerPosition(-7.5px);
      width: 15px;
    }
  }
}

.eyes__character-4 {
  .eyes__ball {
    width: 0;
    height: 0;
    border-radius: 0;
    position: absolute;
    top: 10px;
    z-index: 10;
    
    &--one {
      @include triangle-left(17px, 17px, 50px, $C-Character-Four-Holes);
      left: 20%;
      transform: rotate(30deg);
    }
    
    &--two {
      @include triangle-right(17px, 17px, 50px, $C-Character-Four-Holes);
      right: 20%;
      transform: rotate(-30deg);
    }
  }
}

.mouth__character-4 {
  @include semi-circle(30px, 80px, 80px, $C-Character-Four-Holes);
  @include centerPosition(-40px);
  transform: rotate(180deg);
  position: relative;
  top: 35px;
  z-index: 10;
  
  .mouth__teeth {
    width: 15px; 
    height: 10px;
    position: absolute;
    
    &--one, 
    &--two {
      background-color: $C-Character-Face-4;
    }
    
    &--one {
      bottom: 0;
      left: 10%;
    }
    
    &--two {
      bottom: 0;
      right: 10%;
    }
    
    &--three {
      @include centerPosition(-7.5px);
      background-color: $C-Character-Four-Overlay-Face;
      top: 0;
    }
  }
}


$C-Character-Five-Features: #414143;
$C-Character-Five-BG: $C-Character-Face-5;

.eyes__character-5 {
  .eyes__ball {
    @include circle(50px, 50px);
    background-color: $C-Character-Five-Features;
    top: 0;
    
    &:first-child {
      left: 23%;
    }
    
    &:last-child {
      right: 23%;
    }
  } 
  
  .eyes__pupil {
    @include centerPosition(-3.5px);
    @include circle(7px, 7px);
    background-color: $C-Character-Five-BG;
    position: absolute;
    top: 20px;
  }
   
}

.nose__character-5 {
  @include triangle-top(20px, 20px, 30px, $C-Character-Five-Features);
  @include centerPosition(-19px);
  
  &:after {
    @include triangle-top(20px, 20px, 10px, $C-Character-Five-BG);
    @include centerPosition(-19px);
    content: ' ';
    color: $C-Character-Five-BG;
    display: block;
    position: relative;
    top: 20px;
  }
}

.mouth__character-5 {
  @include centerPosition(-35px);
  background-color: $C-Character-Five-Features;
  border-radius: 7px;
  height: 35px;
  position: relative;
  overflow: hidden;
  top: 10px;
  width: 70px; 
  z-index: 20;
  
  .mouth__teeth {
    background-color: $C-Character-Five-BG;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid $C-Character-Five-Features;
    height: 40px;
    position: relative;
    width: 25%;
    float: left;
    top: -20px;
    
    &:nth-child(-n+4) {
      top: -22px;
    }
  }
}

$C-Character-Six-Hair: #e8e7ec;
$C-Character-Six-Bandage-One: $C-Character-Six-Hair;
$C-Character-Six-Bandage-Two: #ccdfcc;
$C-Character-Six-Eye-Color: #fec254;
$C-Character-Six-Pupil: #414143;

$C-Character-Six-Features: #414143;
$C-Character-Six-BG: $C-Character-Face-6;

.character__6 .face:after {
  border-top: 50px solid $C-Character-Six-Bandage-One;
}

.hair__character-6 {
  background-color: $C-Character-Six-Hair;
}

.eyes__character-6 {
  position: relative;
  
  .eyes__ball {
    background-color: $C-Character-Six-Eye-Color;
    border: 4px solid $C-Character-Six-Pupil;
    margin-top: -20px;
  }
  
  .eyes__pupil {
    @include circle(15px, 15px);
    @include centerPosition(-7px);
    
    position: absolute;
    background-color: $C-Character-Six-Pupil;
    top: 7px;
    
    &:after {
      @include circle(5px, 5px); 
      @include centerPosition(0);
    
      background-color: $C-White;
      content: ' ';
      display: block;
      position: relative;
      top: 3px;
    }
  }
}

.mouth__character-6 {
  @include centerPosition(-35px);
  background-color: $C-Character-Six-Features;
  border-radius: 7px;
  height: 35px;
  position: relative;
  overflow: hidden;
  top: 20px;
  width: 70px; 
  z-index: 90;
  
  .mouth__teeth {
    background-color: $C-White;
    box-sizing: border-box;
    border: 1px solid $C-Character-Six-Features;
    height: 40px;
    position: relative;
    width: 33%;
    float: left;
    top: -20px;
    
    &:nth-child(-n+3) {
      top: -22px;
    }
    
    &:nth-child(1) {
      &:after {
        width:3px;
        height: 9px;
        background-color: $C-Character-Six-Features;
        content: ' ';
        position: absolute;
        top: 29px;
        left: 15px;
        transform: rotate(8deg);
      }
    }
    
    &:nth-child(6) {
      &:after {
        width:2px;
        height: 9px;
        background-color: $C-Character-Six-Features;
        content: ' ';
        position: absolute;
        top: 0;
        left: 5px;
        transform: rotate(-8deg);
      }
    }
  }
}

.bandage {
    width: 100%;
    position: absolute;
    height: 25px;
    z-index: 90;
  
  &__one {
    top: 40px;
    background-color: $C-Character-Six-Bandage-Two;
  }
  
  &__two {
    top: 85px;
    background-color: $C-Character-Six-Bandage-One;
  }
  
  &__three {
    top: 115px;
    background-color: $C-Character-Six-Bandage-Two;
  }
}