#info{
    font-family: 'Parisienne', cursive!important;   
}

/********** all figure title **********/
h5{
    font-weight: bold;     
}

figure :hover h5{
    display: none;
}

/************* all figcaption *********/
figcaption{ 
    left: -0.1rem; 
    top: 5.8rem;
    font-style: italic;     
}

/*********** all figure **************/
figure p{
    display: none;
}
figure :hover p{
    top: 2rem;
    display: block;
}
/************* yellow post_it  **********/
#yellow{
    transform: rotate(-5deg);    
}

#yellow figcaption{
    left: -0.9rem;
}

/************ green post_it ***********/
#green figcaption{
    transform: rotate(2deg);   
}

/********* second green post_it ********/
#green2 figcaption{
    transform: rotate(-2deg);
}

/********** second pink post_it *******/
#pink2{
    transform: rotate(5deg);   
}

/******** second green post_it *********/
#green2{
    left: -0.8rem;
}

/************media queries ***********/
@media (max-width: 1180px) {  
    figcaption{
        top:3.7rem;
    }
 }

 @media (max-width: 990px) { 
    figcaption{
        top:6rem;
        font-size: 1.2rem;
    }
 }

@media (max-width: 575px) { 
    figcaption{
        top:8rem;
      
    }
 }