// GENERAL
* {
  box-sizing: border-box;
}

body {
  font-family: 'Shadows Into Light Two', cursive;
  line-height: 1;
  text-align: center;
}

h1 {
  font-size: 2.1em;
  letter-spacing: 1px;
  text-transform: uppercase;
}

// VARIABLES, PLACEHOLDERS, MIXINS
$primary-color: #fff;
$secondary-color: #000;

%border {
  border: 7px solid $secondary-color;
}

%curve {
  @extend %border;
  border-radius: 0 0 50% 50%;
  border-color: transparent transparent $secondary-color transparent;
}

%circle {
  border-radius: 50%;
  position: absolute; 
}

%tap-highlight {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@mixin make-shape($width, $height: null) {
  width: $width;
  height: $height;
  
  @if $height == null {
    height: $width;
  }
}

@mixin make-circle($size, $color, $position, $content: null) {
  @extend %circle;
  @include make-shape($size);
  background-color: $color;
  content: $content;
  top: $position;
}

// LAYOUT
.scenario {
  @extend %tap-highlight;
  @include make-shape(100%);
  min-height: 530px;
  background-color: #b2e2f6;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: background-color 0.8s ease-in-out;
  z-index: -10;
}

.keroppi {
  @extend %border;
  @extend %tap-highlight;
  @include make-shape(300px, 200px);
  border-radius: 50% / 75%;
  background-color: #d3df40;
  margin: 160px auto 40px;
  position: relative;
  
  &:hover + .scenario {
    background-color: #fccba0;
  }
  
  &:before,
  &:after {
    @include make-circle(50px, #f4aab9, 45%, '');
  }
  
  &:before {
    left: 5%;
  }
  
  &:after {
    right: 5%;
  }
  
  &__eye--left,
  &__eye--right {
    @extend %border;
    @include make-circle(145px, $primary-color, -70px);  
    
    &:before {
      @include make-circle(40px, $secondary-color, 35%, '');
      transition: top 0.05s linear;

      .keroppi:hover & {
        @extend %curve;
        @include make-shape(30%, 70px);
        background-color: transparent;
        top: 0;
      }
    }
  }
  
  &__eye--left {
    left: 0;
    
    &:before {
      right: 10%;
    }
  }
  
  &__eye--right {
    right: 0;
    
    &:before {
      left: 10%;
    }
  }
  
  &__smile {
    @extend %curve;
    @include make-shape(60%, 168px);
    margin-left: 20%;
    
    .keroppi:hover & {
      @include make-shape(55px, 65px);
      background-color: $primary-color;
      border-color: $secondary-color;
      border-radius: 50%;
      margin-top: 110px;   
      margin-left: 40%;
    }
  }
}