.titi {   
    font-size: 20px;
    color: #323232;   
    font-weight: 600;
  }
  .linguagens{ font-size: 12px; font-style: italic;}

  
  .ml2 .letter {display: inline-block;}
  .ml1 .letter {display: inline-block;}
  .ml3 .letter {display: inline-block;}
  .ml4 .letter {display: inline-block;}
  .ml5 .letter {display: inline-block;}

  .verde{ color: #355099!important}



@import url('https://fonts.googleapis.com/css?family=Fredericka+the+Great');


.fas {
    /* color: rgb(0, 0, 0); */
    font-size: 3rem;
   /*  background-color: green; conditional */
    margin: 0px;
    padding: 0px;
    /*****
    animation-name: erasing;    
    animation-duration: 3s;
    ***/
}
/**** this is the Pencil Erasing animation****/
.erasing-animation {
    animation-name: erasing;
    animation-duration: 1.8s;
}

@keyframes erasing {
    0% {transform: rotate(0deg);}
    10% {transform: rotate(180deg);}
    60% {transform: rotate(180deg);}
    70% {transform: rotate(0deg);}
    100% {transform: rotate(0deg);}
} 
    
/***this is the pencil writing animation*****/
.writing-animation {
    animation-name: writting;    
    animation-duration: 4s; 
}

@keyframes writting {
    0%  {transform: translate(0px,0px);}
    2%  {transform: translate(8px,-5px);}
    4%  {transform: translate(0px,0px);}
    6%  {transform: translate(8px,-5px);}
    8% {transform: translate(0px,0px);}
    10% {transform: translate(8px,-5px);}
    12% {transform: translate(0px,0px);}
    14% {transform: translate(8px,-5px);}
    16% {transform: translate(0px,0px);}
    18% {transform: translate(8px,-5px);}
    20% {transform: translate(0px,0px);}
    22% {transform: translate(8px,-5px);}
    24% {transform: translate(0px,0px);}
    26% {transform: translate(8px,-5px);}
    28% {transform: translate(0px,0px);}
    30% {transform: translate(8px,-5px);}
    32% {transform: translate(0px,0px);}
    34% {transform: translate(8px,-5px);}
    36% {transform: translate(0px,0px);}
    38% {transform: translate(8px,-5px);}
    40% {transform: translate(0px,0px);}
    42% {transform: translate(8px,-5px);}
    44% {transform: translate(0px,0px);}
    46% {transform: translate(8px,-5px);}
    48% {transform: translate(0px,0px);}
    50% {transform: translate(8px,-5px);}
    52% {transform: translate(0px,0px);}
    54% {transform: translate(8px,-5px);}
    56% {transform: translate(0px,0px);}
    58% {transform: translate(8px,-5px);}
    60% {transform: translate(0px,0px);}
    62% {transform: translate(8px,-5px);}
    64% {transform: translate(0px,0px);}
    66% {transform: translate(8px,-5px);}
    68%{transform: translate(0px,0px);}
  
    70% {transform: translate(8px,-5px);}
    72% {transform: translate(0px,0px);}
    74% {transform: translate(8px,-5px);}
    76% {transform: translate(0px,0px);}
    78% {transform: translate(8px,-5px);}
    80% {transform: translate(0px,0px);}
    82% {transform: translate(8px,-5px);}
    84% {transform: translate(0px,0px);}
    86% {transform: translate(8px,-5px);}
    88% {transform: translate(0px,0px);}
    90% {transform: translate(8px,-5px);}
    92% {transform: translate(0px,0px);}
    94% {transform: translate(8px,-5px);}
    96% {transform: translate(0px,0px);}
    98% {transform: translate(8px,-5px);}
    100% {transform: translate(0px,0px);}
    
    
}