<div class="moon moonsize"></div>
<div id="catholder">

<h1 class="cherrysoda">Happy Halloween!</h1>

<svg id="catkin" x="0px" y="0px" width="282.609px" height="415.052px" viewBox="0 0 282.609 415.052">
<g class="catanimate">
	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="34.3564" y1="239.0508" x2="74.4392" y2="279.1335">
		<stop  offset="0" style="stop-color:#808080"/>
		<stop  offset="0.1329" style="stop-color:#5F5F5F"/>
		<stop  offset="0.2977" style="stop-color:#3D3D3D"/>
		<stop  offset="0.4661" style="stop-color:#222222"/>
		<stop  offset="0.6372" style="stop-color:#0F0F0F"/>
		<stop  offset="0.8129" style="stop-color:#040404"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</linearGradient>
	<line fill="url(#SVGID_1_)" stroke="#000000" stroke-miterlimit="10" x1="85.897" y1="267.675" x2="22.897" y2="250.508"/>

	<line fill="url(#SVGID_2_)" stroke="#000000" stroke-miterlimit="10" x1="85.272" y1="272.508" x2="27.522" y2="271.592"/>

	<line fill="url(#SVGID_3_)" stroke="#000000" stroke-miterlimit="10" x1="85.897" y1="278.258" x2="30.397" y2="295.758"/>
	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="73.0518" y1="179.6504" x2="198.8201" y2="305.4187">
		<stop  offset="0" style="stop-color:#000000"/>
		<stop  offset="0.1329" style="stop-color:#000000"/>
		<stop  offset="0.2977" style="stop-color:#000000"/>
		<stop  offset="0.4661" style="stop-color:#000000"/>
		<stop  offset="0.6372" style="stop-color:#000000"/>
		<stop  offset="0.8129" style="stop-color:#000000"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</linearGradient>
	<path fill="url(#SVGID_4_)" stroke="#000000" stroke-miterlimit="10" d="M210.852,268.438c0,36.42-33.43,65.931-74.66,65.931
		c-41.24,0-74.67-29.511-74.67-65.931c0-17.189,7.45-32.84,19.66-44.58l0.01-52.35l32,34.19c7.25-2.07,14.97-3.19,23-3.19
		c8.29,0,16.271,1.19,23.72,3.4l31.261-33.4l0.02,51.35C203.402,235.598,210.852,251.249,210.852,268.438z"/>
	
		<ellipse transform="matrix(0.9959 0.0909 -0.0909 0.9959 22.8529 -9.2721)" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="113.188" cy="246.175" rx="18.333" ry="9.667"/>
	
		<ellipse transform="matrix(0.9944 -0.1057 0.1057 0.9944 -25.0896 18.3103)" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="160.188" cy="245.842" rx="18.334" ry="9.666"/>
	<ellipse stroke="#000000" stroke-miterlimit="10" cx="120.644" cy="248.913" rx="4.122" ry="3.737"/>
	<ellipse stroke="#000000" stroke-miterlimit="10" cx="152.644" cy="248.913" rx="4.122" ry="3.737"/>
	<line stroke="#000000" stroke-miterlimit="10" x1="159.912" y1="205.908" x2="159.172" y2="206.698"/>
	<ellipse fill="#FFFFFF" cx="137.751" cy="267.675" rx="6.646" ry="3.917"/>
	<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M165.047,279.069
		c-7.86,5.695-19.647,2.439-26.354-6.561h-1.646c-6.707,9-18.494,12.196-26.354,6.502"/>
	<line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="132.759" y1="299.267" x2="132.759" y2="299.266"/>
	<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="208.3291" y1="246.2012" x2="234.5487" y2="272.4207">
		<stop  offset="0" style="stop-color:#808080"/>
		<stop  offset="0.1329" style="stop-color:#5F5F5F"/>
		<stop  offset="0.2977" style="stop-color:#3D3D3D"/>
		<stop  offset="0.4661" style="stop-color:#222222"/>
		<stop  offset="0.6372" style="stop-color:#0F0F0F"/>
		<stop  offset="0.8129" style="stop-color:#040404"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</linearGradient>
	<line fill="url(#SVGID_5_)" stroke="#000000" stroke-miterlimit="10" x1="191.855" y1="262.674" x2="251.022" y2="255.946"/>
	<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="207.5225" y1="264.0088" x2="233.5224" y2="290.0088">
		<stop  offset="0" style="stop-color:#808080"/>
		<stop  offset="0.1329" style="stop-color:#5F5F5F"/>
		<stop  offset="0.2977" style="stop-color:#3D3D3D"/>
		<stop  offset="0.4661" style="stop-color:#222222"/>
		<stop  offset="0.6372" style="stop-color:#0F0F0F"/>
		<stop  offset="0.8129" style="stop-color:#040404"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</linearGradient>
	<line fill="url(#SVGID_6_)" stroke="#000000" stroke-miterlimit="10" x1="194.522" y1="277.008" x2="246.522" y2="277.008"/>
	<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="201.3975" y1="277.6343" x2="233.6468" y2="309.8836">
		<stop  offset="0" style="stop-color:#808080"/>
		<stop  offset="0.1329" style="stop-color:#5F5F5F"/>
		<stop  offset="0.2977" style="stop-color:#3D3D3D"/>
		<stop  offset="0.4661" style="stop-color:#222222"/>
		<stop  offset="0.6372" style="stop-color:#0F0F0F"/>
		<stop  offset="0.8129" style="stop-color:#040404"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</linearGradient>
	<line fill="url(#SVGID_7_)" stroke="#000000" stroke-miterlimit="10" x1="195.689" y1="283.342" x2="239.355" y2="304.174"/>
</g>
<radialGradient id="SVGID_8_" cx="165.145" cy="293.2017" r="81.2153" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#FFC654"/>
	<stop  offset="0.0424" style="stop-color:#FFC351"/>
	<stop  offset="0.6686" style="stop-color:#FFA02C"/>
	<stop  offset="1" style="stop-color:#FF931E"/>
</radialGradient>
<path fill="url(#SVGID_8_)" stroke="#000000" stroke-miterlimit="10" d="M99.886,269.372c0,65.36,29.218,118.345,65.26,118.345
	c36.042,0,65.259-52.984,65.259-118.345c0-24.479-4.099-47.221-11.119-66.094c-35.61-2.202-71.035-3.879-106.485-4.59
	C104.689,218.411,99.886,242.874,99.886,269.372z"/>
<radialGradient id="SVGID_9_" cx="112.145" cy="293.019" r="81.3216" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#FFC654"/>
	<stop  offset="0.0424" style="stop-color:#FFC351"/>
	<stop  offset="0.6686" style="stop-color:#FFA02C"/>
	<stop  offset="1" style="stop-color:#FF931E"/>
</radialGradient>
<path fill="url(#SVGID_9_)" stroke="#000000" stroke-miterlimit="10" d="M59.919,198.402c-8.184,19.773-13.034,44.343-13.034,70.969
	c0,65.36,29.218,118.345,65.26,118.345c36.042,0,65.259-52.984,65.259-118.345c0-25.741-4.534-49.56-12.23-68.981
	C130.083,198.855,95.066,198.056,59.919,198.402z"/>
<path fill="#FF931E" stroke="#000000" stroke-miterlimit="10" d="M18.12,199.382c-9.506,20.56-15.234,47.06-15.234,75.99
	c0,65.36,29.218,118.345,65.26,118.345c36.042,0,65.259-52.984,65.259-118.345c0-29.201-5.835-55.926-15.502-76.565
	C84.717,198.056,51.513,198.131,18.12,199.382z"/>
<path fill="#FF931E" stroke="#000000" stroke-miterlimit="10" d="M238.522,204.508c-24.242-1.616-48.379-3.018-72.479-4.081
	c-10.058,20.821-16.157,48.089-16.157,77.944c0,65.36,29.219,118.345,65.26,118.345c36.043,0,65.26-52.984,65.26-118.345
	c0-27.698-5.249-53.171-14.039-73.334C257.079,206.052,247.446,205.103,238.522,204.508z"/>
<path fill="#FF931E" stroke="#000000" stroke-miterlimit="10" d="M45.174,198.615c-12.498,21.559-20.289,52.007-20.289,85.757
	c0,65.36,29.218,118.345,65.26,118.345s65.26-52.984,65.26-118.345c0-33.406-7.636-63.575-19.911-85.093
	C105.419,198.344,75.355,198.035,45.174,198.615z"/>
<path fill="#FF931E" stroke="#000000" stroke-miterlimit="10" d="M121.886,285.372c0,65.36,29.218,118.345,65.26,118.345
	c36.042,0,65.259-52.984,65.259-118.345c0-31.395-6.744-59.931-17.745-81.114c-30.921-2.033-61.681-3.715-92.414-4.764
	C129.707,221.059,121.886,251.558,121.886,285.372z"/>
<path fill="#FF931E" stroke="#000000" stroke-miterlimit="10" d="M67.794,285.418c0,68.346,32.198,123.752,71.916,123.752
	c39.718,0,71.915-55.406,71.915-123.752c0-32.271-7.18-61.651-18.938-83.682c-34.756-1.87-69.386-3.124-104.086-3.37
	C75.739,220.725,67.794,251.474,67.794,285.418z"/>
<g class="catanimate">

	<path fill="#FF931E" stroke="#000000" stroke-miterlimit="10" d="M165.146,151.028c-21.43,0-40.446,18.732-52.344,47.659
		c35.45,0.711,70.875,2.388,106.485,4.59C207.562,171.757,187.689,151.028,165.146,151.028z"/>
	<path fill="#FF931E" stroke="#000000" stroke-miterlimit="10" d="M112.146,151.028c-21.359,0-40.321,18.61-52.226,47.375
		c35.146-0.347,70.164,0.453,105.255,1.988C153.33,170.5,133.993,151.028,112.146,151.028z"/>
	<path fill="#FF931E" stroke="#000000" stroke-miterlimit="10" d="M68.146,157.028c-20.089,0-38.054,16.465-50.026,42.354
		c33.394-1.251,66.597-1.326,99.783-0.575C105.932,173.25,88.085,157.028,68.146,157.028z"/>
	<path fill="#FF931E" stroke="#000000" stroke-miterlimit="10" d="M266.366,205.038c-11.952-27.415-30.453-45.01-51.221-45.01
		c-19.578,0-37.141,15.639-49.103,40.399c24.101,1.063,48.237,2.465,72.479,4.081C247.446,205.103,257.079,206.052,266.366,205.038z
		"/>
	<path fill="#FF931E" stroke="#000000" stroke-miterlimit="10" d="M90.146,166.028c-17.431,0-33.266,12.395-44.971,32.587
		c30.181-0.58,60.245-0.271,90.32,0.664C123.752,178.696,107.766,166.028,90.146,166.028z"/>
	<path fill="#FF931E" stroke="#000000" stroke-miterlimit="10" d="M187.146,167.028c-17.396,0-33.201,12.345-44.899,32.465
		c30.733,1.049,61.492,2.731,92.414,4.764C222.759,181.34,205.875,167.028,187.146,167.028z"/>
	<g>
		<radialGradient id="SVGID_10_" cx="153.5415" cy="150.8418" r="33.6783" gradientUnits="userSpaceOnUse">
			<stop  offset="0" style="stop-color:#FFFFFF"/>
			<stop  offset="0.0851" style="stop-color:#FFEDD8"/>
			<stop  offset="0.2082" style="stop-color:#FFD5A7"/>
			<stop  offset="0.3345" style="stop-color:#FFC17D"/>
			<stop  offset="0.462" style="stop-color:#FFB05B"/>
			<stop  offset="0.591" style="stop-color:#FFA340"/>
			<stop  offset="0.7222" style="stop-color:#FF9A2D"/>
			<stop  offset="0.8568" style="stop-color:#FF9522"/>
			<stop  offset="1" style="stop-color:#FF931E"/>
		</radialGradient>
		<path fill="url(#SVGID_10_)" d="M155.239,183.192c-1.662-27.026,10.709-50.969,32.322-58.225l-16.039-7.458
			c-28.742,0-52,29.818-52,66.667L155.239,183.192z"/>
		<path fill="#754C24" d="M155.239,183.192c-1.662-27.026,10.709-50.969,32.322-58.225l-16.039-7.458c-28.742,0-52,29.818-52,66.667
			L155.239,183.192z"/>
		<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M155.239,183.192c-1.662-27.026,10.709-50.969,32.322-58.225
			l-16.039-7.458c-28.742,0-52,29.818-52,66.667L155.239,183.192z"/>
	</g>
	<path fill="#FF931E" stroke="#000000" stroke-miterlimit="10" d="M139.71,161.666c-19.992,0-38.076,14.042-51.11,36.701
		c34.701,0.246,69.331,1.5,104.086,3.37C179.542,177.107,160.675,161.666,139.71,161.666z"/>
</g>
</svg>

</div>
<div class="ground"></div>
html,body{
		width: 100%;
		height: 100%;
		background: #674172;
		overflow: hidden;
	}
	
	#catholder{
		margin: 0 auto;
		max-width: 1200px;
		width: 100%;
		position: relative;
		z-index: 5;
	}

	#catkin{
		height: 600px;
		width: 100%;
		margin-top: 50px;
		margin-left: -8px;
	}

	.cherrysoda{
		font-family: 'Cherry Cream Soda', cursive;
		color: #FF931E;
	}

	h1{
		text-align: center;
		font-size: 70px;
		margin-top: 15px;
		margin-bottom: 0;
		color: #FF931E;
	}

	.moon{
		background-color: #F5D76E;
		width: 600px;
		height: 600px;
		position: absolute;
		border-radius: 100%;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		z-index: 1;
		top: 10%;
	}

	.ground{
		width: 100%;
		background-color: #452D4C;
		bottom: 0;
		position: absolute;
		left: 0;
		height: 25%;
		z-index: 2;
	}


.catanimate{
  animation: peekaboo 5s ease alternate infinite;
}

@keyframes peekaboo {
  0% {
    transform: translate(0,0);
  }
  100% {
    transform: translate(0, -100px);
  }
}

.moonsize{
  animation: moongrow 5s ease alternate infinite;
}

@keyframes moongrow {
  0% {
   transform: scale(0.8);
  }
  100% {
    transform: scale(1.0);
  }
}




@media screen and (min-width: 320px) and (max-width: 640px){
		h1{
			font-size: 60px;
		}
		.moon{
			width: 350px;
			height: 350px;

		}

	}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.