article.capybara
    div.capybara-head
      div.capybara-head-ears
        div.capybara-head-ear.left
        div.capybara-head-ear.right
      div.capybara-head-eyes.is-closed
        div.capybara-head-eye.left
        div.capybara-head-eye.right
      div.capybara-head-nose
        div.capybara-head-nose-top
        div.capybara-head-nose-center
      div.capybara-head-cheeks
        div.capybara-head-mouth-mustache.left   
        div.capybara-head-mouth-mustache.right
      div.capybara-head-teeths
        
// reference http://conexaoplaneta.com.br/wp-content/uploads/2017/10/capivara-pode-virar-emoji-gracas-persistencia-duas-professoras-brasileiras-4-conexao-planeta.jpg
          

$body-color-center: #9d7349;
$body-color-extremity: #7c5534;

$eye-color-center: #222;
$eye-color-extremity: #121318;
$eye-ball-color-top: #fff;
$eye-ball-color-bottom: #777;

$ear-color-center: #bc8c66;
$ear-color-extremity: #855e3d;

$nose-color-center: #424242;
$nose-color-extremity: #333;
$nose-color-hole: #201b1f;

$cheek-color-center: #d6b498;
$cheek-color-extremity: #ac805d;

$teeth-color-center: #f8f6f9;
$teeth-color-extremity: #e6e4e5;

article.capybara {
  width: 100vw;
  height: 100vh;
  
  display: flex;
  justify-content: center;
  align-items: center;

  div.capybara-head {
    height: 480px;
    width: 485px;
    
    display: flex;
    justify-content: center;   
    flex-wrap: wrap;

    &::before {
      content: '';
      width: 170px;
      height: 125px;
      
      position: absolute;
      z-index: 2;
      
      background-color: $body-color-center;
    
      border-radius: 40% 40% 0% 0%;
    }

    &::after {
      content: '';
      width: 305px;
      height: 350px;
      
      position: absolute;
      margin-top: 95px;
      
      background-color: $body-color-center;
      
      border-radius: 100% 100% 100% 100%;
    }

    div.capybara-head-ears {
      width: 200px;
      height: 70px;
      
      display: flex;
      justify-content: space-between;
      position: absolute;
      
      margin-top: -40px;

      div.capybara-head-ear {   
        width: 55px;
        height: 100%;
        
        background-color: $ear-color-extremity;
        
        border-radius: 15% 70% 50% 70%;
        
        display: flex;
        justify-content: center;
        align-items: flex-end;       
        
        &::before {
          content: '';

          width: 65%;
          height: 90%;
          
          background-color: $ear-color-center;
          box-shadow: inset 5px 0px 15px rgba(0, 0, 0, 0.5);
          
          border-radius: 15% 70% 10% 90%;          
        }
        
        &.left {
          transform: scaleX(-1) rotate(40deg);
        }        
        &.right {
          transform: rotate(40deg);          
        }        
      }      
    }
    
    div.capybara-head-eyes {          
      width: 180px;
      height: 70px;
      
      position: absolute;
      display: flex;
      justify-content: space-between;
      
      margin-top: 125px;  
      z-index: 3;
          
      div.capybara-head-eye {
        width: 40px;
        height: 70px;
        
        background-image: radial-gradient(closest-corner at center 45%, $eye-color-center 60%, $eye-color-extremity 10%);
        
        border-radius: 60%;
        
        display: flex;
        justify-content: center;
        
        &::before {
          content: '';          
          width: 15px;
          height: 25px;
          
          position: absolute;
          margin-top: 10px;
        
          background-image: linear-gradient($eye-ball-color-top, $eye-ball-color-bottom);
          
          border-radius: 60%;
        }

        &.left {
          
        }        
        &.right {
          
        } 
      }      
    }
    
    div.capybara-head-nose {     
      width: 160px;
      height: 85px;
      
      background-color: transparent;
        
      position: absolute;
      margin-top: 280px;
      z-index: 5;       
      
      display: flex;
      justify-center: center;
      flex-wrap: wrap;
      
      &::before,
      &::after {
        content: '';
        width: 20px;
        height: 20px;
        
        position: absolute;
        margin-top: 30px;
                
        background-color: $nose-color-hole;
        box-shadow: inset 3px 1px 5px #000;
        
        z-index: 4;
        
        border-radius: 100%;
      }
      
      &::before {       
        left: 18px;
      }
      
      &::after {
        right: 18px;
      }
      
      div.capybara-head-nose-top {
        width: 100%;
        height: 25px;
         
        position: absolute;
        left: 0%;
        top: -3%;
       
        border-radius: 50%;
        
        background-color: $nose-color-extremity;
      }
      
      div.capybara-head-nose-center {
        width: 70%;
        height: 100%;
        
        position: relative;
        margin: 0px auto;
        display: block;
        
        background-image: radial-gradient(closest-corner at center 20%, $nose-color-center 55%, $nose-color-extremity 20%);
        
        border-radius: 100%;  
        
        &::before,
        &::after {
          content: '';
          width: 40px;
          height: 115%;
          border-radius: 50%;
          
          position: absolute;
          margin-top: -5px;
        }
        
        &::before{
          margin-left: -10px;       
          background-color: $nose-color-extremity;          
          transform: rotate(-45deg);
        }
        &::after {
          right: -10px;          
          background-color: $nose-color-extremity;          
          transform: rotate(45deg);
        }
      }    
    }
    
    div.capybara-head-cheeks { 
      width: 170px;
      height: 145px;
      
      position: absolute;
      
      margin-top: 300px;
      
      background-color: transparent;
      
      z-index: 4;

      &::before,
      &::after {
        content: '';
        width: calc(50% - 1px);
        height: 100%;
        
        position: absolute;
        background-color: $cheek-color-center;
        background-image: radial-gradient(closest-corner at center, $cheek-color-center 45%, $cheek-color-extremity 90%);
        
        border-radius: 25% 30% 25% 60%;
      }
      
      &::before {
        left: 0px;        
        border-right: 1px #7b583a solid;
      }
      &::after {
        right: 0px;
        border-left: 1px #7b583a solid;
        border-radius: 30% 25% 60% 25%;
      }    
    }
    

    div.capybara-head-teeths {
      width: 50px;
      height: 40px;

      position: absolute;
      margin-top: 415px;
      
      background-color: #000;
      
      z-index: 3;
      
      &::before,
      &::after {
        content: '';
        width: 50%;
        height: 100%;
        box-sizing: border-box;
        
        position: absolute;
        
        background-color: $teeth-color-center;
        border: 4px $teeth-color-extremity solid;
      }
      
      &::before {
        left: 0px;
      }
      &::after {
        right: 0px;
      }
    }
  }  
}