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

.fundo {
    font-family: 'Fredericka the Great', cursive;
    height: 300px;
    background-color: rgb(241, 200, 13);
    color: rgb(73, 66, 66);
    overflow: hidden;
}
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 0 3rem;
}
h1,h2 {
    font-weight: 200;
    margin: 0.4rem;
}
h1 {
    font-size: 3.5rem;
}
h2 {
    font-size: 2rem;
    color:rgb(73, 66, 66);
}
.author {
    color: rgb(180, 0, 75);
    text-decoration: none;
}

a:hover {
    color: rgb(23, 77, 32);
}

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

@media(min-width: 1200px){
    h1 {
        font-size: 5rem;
    }
    .fas {
        font-size: 5rem;
    }
}
@media(max-width: 800px){
    .container {
        padding: 0 1rem;
    }
    h1 {
        font-size: 3rem;
    }
}
@media(max-width: 500px){
    h1 {
        font-size: 2.5 rem;
    }
    h2 {
        font-size: 1.5rem;
    }
}