@charset "UTF-8";
@font-face 
{ font-family: 'EasyReadingPRO';
  src: url('../font/EasyReadingPRO.ttf');
}
@font-face 
{ font-family: 'Delfino';
  src: url('../font/Delfino.ttf');
}
path
{	stroke-linejoin:butt;	
}
image
{ cursor:pointer;	
}
text
{ font-family:'EasyReadingPRO';
  font-size:60px;
  stroke:navy;
  stroke-width:0.1px;
  fill:navy;		
}
circle
{ stroke:#2844ef;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill: #2844ef;
  animation:fade 6s forwards;
  opacity:0;
  stroke-width:4; 
  filter:url(#box-shadow); 
}
.letters
{ font-family:'EasyReadingPRO';
  font-size:30px;
  stroke:navy;
  stroke-width:1px;
  fill:navy;	
  cursor:pointer;  
}
.letters3
{ font-family:'EasyReadingPRO';
  font-size:60px;
  stroke:navy;
  stroke-width:1px;
  fill:navy;	
  cursor:pointer;  
}
.letters2
{ font-family:'EasyReadingPRO';
  font-size:200px;
  stroke:navy;
  stroke-width:1px;
  fill:navy;	
  cursor:pointer; 
   
}

.write 
{   fill:  none;
	stroke-width:17px;
    stroke: #2844ef;    
    stroke-linecap:butt;
    stroke-linejoin:butt;
    stroke-dasharray: 2000;
  	stroke-dashoffset: 2000;
    animation:line 12s linear forwards;
    animation-delay:2s;
    filter:url(#box-shadow);    
 }
 .write2 
{   fill:none; 
	stroke-width:6px;
    stroke: #2844ef;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray: 2000;
  	stroke-dashoffset: 2000;
    animation:line 15s linear forwards;
    filter:url(#box-shadow);
}
 .lines
 {	stroke:navy;
 	stroke-width:5px;
 	stroke-linecap:round;
    stroke-linejoin:round;
 }
@keyframes fade 
{ to 
	{	opacity: 1;
  	}
}
@keyframes line 
{ to 
	{	stroke-dashoffset: 1;
  	}
}