@charset "UTF-8";
@font-face 
{ font-family: 'Cursive_standard';
  src: url('../font/Cursive_standard.ttf');
}
@font-face 
{ font-family: 'Delfino';
  src: url('../font/Delfino.ttf');
}
@font-face 
{ font-family: 'Montserrat';
  src: url('../font/Montserrat-Light.ttf');
}
@font-face 
{ font-family: 'PlaywriteITTrad-VariableFont_wght';
  src: url('../font/PlaywriteITTrad-VariableFont_wght.ttf');
}
image
{ cursor:pointer;	
}
text
{ font-size:90px;
  stroke:navy;
  stroke-width:1px;
  fill:navy;		
}
path
{	filter:url(#box-shadow);	
}
circle
{ stroke: #2844ef;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill: #2844ef;
  animation:fade 7s forwards;
  opacity:0;
}
.letters
{ font-family:'Cursive_standard';
  font-size:80px;
  stroke:navy;
  stroke-width:1px;
  fill:navy;	
  cursor:pointer;
  filter:url(#box-shadow);
}
.letters2
{ font-family:'Cursive_standard';
  font-size:60px;
  stroke:navy;
  stroke-width:1px;
  fill:navy;	
  cursor:pointer;
  
}

.write 
{   fill:  transparent;
    stroke: #2844ef;
    stroke-width: 20px;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray: 2000;
  	stroke-dashoffset: 2000;
    animation:line 12s linear forwards;
    animation-delay:2s;
    filter:url(#box-shadow);
 }
 .write2 
{   fill:  transparent;
    stroke: #2844ef;
    stroke-width: 7px;
    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: 0;
  	}
}