.site {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.theimage {
    width: 50%;
}

#leftLine{
	fill: none;
	stroke: #C5258F;
	stroke-width: 8;
	stroke-miterlimit: 10;
	stroke-dasharray: 224;
    stroke-dashoffset: 224;
    animation: dash 0.25s linear forwards;
    animation-delay: 1.3s;
}

#rightLine{
	fill: none;
	stroke: #C5258F;
	stroke-width: 8;
	stroke-miterlimit: 10;
	stroke-dasharray: 224;
    stroke-dashoffset: 224;
    animation: dash 0.25s linear forwards;
    animation-delay: 1.8s;

}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

#topRight_curve{
	fill:"none" ;
	stroke:"#C5258F";
	stroke-width:"8" ;
	stroke-miterlimit:"10" ;
	stroke-dasharray: 354;
    stroke-dashoffset: 354;
    animation: dash 0.5s linear forwards;
    animation-delay: 0.5s;
}

#topLeft_curve{
	stroke-dasharray: 354;
    stroke-dashoffset: 354;
    animation: dash 0.5s linear forwards;
    animation-delay: 0s;
}

.topCurve{
	fill:"none" ;
	stroke:"#C5258F";
	stroke-width:"8";
	stroke-miterlimit:"10";
}

#right_eye{
	fill:"#FFFFFF" ;
	stroke:"#000000" ;
	stroke-width:"2" ;
	stroke-miterlimit:"10";
}

#left_eye{
	fill:"#FFFFFF" ;
	stroke:"#000000" ;
	stroke-width:"2" ;
	stroke-miterlimit:"10";
}

#head{
    fill:"#999999" ;
    stroke:"#000000" ;
    stroke-width:"2" ;
    stroke-miterlimit:"10" ;
}

.earFill{
	fill:"#999999" ;
	stroke:"#000000" ;
	stroke-width:"2" ;
	stroke-miterlimit:"10";
}
.earStroke{
	fill:"none" ;
	stroke:"#000000" ;
	stroke-miterlimit:"10";
}

/*
g#ear_left, g#ear_right, g#head, g#left_eye, g#right_eye {
	opacity: 0;
	animation: showIt 2.55s linear forwards;
    animation-delay: 0.45s;
}
*/
@keyframes showIt {
  to {
    opacity: 1.0;
  }
}

figcaption{
	opacity: 0;
	color: #C5258F;
	text-align: center;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-weight: bold;
	font-size: 20px;
	animation: showIt 0.55s linear forwards;
    animation-delay: 1.5s;
}

#instructions{
	opacity: 0;
	color: #000;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 14px;
	text-align: center;
	animation: showIt 0.55s linear forwards;
    animation-delay: 1.5s;
}

g#ear_left{
	opacity: 1;
	transform-origin: 43%  21%;
	-webkit-animation: rotation 4s infinite ease-in-out;
}

@keyframes showIt {
  to {
    opacity: 1.0;
  }
}



@-webkit-keyframes rotation {
		
		0%   { -webkit-transform: rotate(0deg); }
       50% { -webkit-transform: rotate(3deg); }
       100% { -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes rotationEarRight {
		
		0%   { -webkit-transform: rotate(0deg); }
       40% { -webkit-transform: rotate(-2deg); }
       100% { -webkit-transform: rotate(0deg); }
}
/*
g#ear_left:hover{
	transform-origin: 43%  21%;
	transform: rotate(4deg) ;
}
*/

g#ear_right{
	opacity: 1;
	transform-origin: 57%  21%;
	-webkit-animation: rotationEarRight 5s infinite ease-in-out;


}

g#head{
	opacity: 1;
	transform-origin: 48%  22%;
	-webkit-animation: rotateHead 6s infinite ease-in-out;
}
@-webkit-keyframes rotateHead {
		
		0%   { -webkit-transform: rotate(0deg); }
       40% { -webkit-transform: rotate(-3deg); }
       100% { -webkit-transform: rotate(0deg); }
}
/*

g#head:hover{
	transform-origin: 48%  22%;
	transform: rotate(-2deg) ;
}
*/