<div class="container">
		<div class="diya">
		</div>
		<div class="message">
			<h2 style="font-size:4rem;color:#f1c40f;">
				Happy Diwali
			</h2>
		</div>
	</div>
	@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
	@import url('https://fonts.googleapis.com/css?family=Satisfy&display=swap');
	*{
		margin:0;
		padding:0;
		font-family: 'Satisfy', cursive;

	}
	body{
		background:#006266
	}
	.container{
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
	}
	.diya{
		width:200px;
		height:100px;
		background:#ff3838;
		border-bottom-left-radius:100px;
		border-bottom-right-radius:100px;
		position:relative;
		left:50%;
		transform:translateX(-50%)
	}
	.diya:before{
		position:absolute;
		content:"";
		width:200px;
		height:60px;
		background:#f1c40f;
		border-radius:50%;
		border:10px solid #222;
		box-sizing:border-box;
		top:-30px
	}
	.diya:after{
		position:absolute;
		content:"";
		width:50px;
		height:150px;
		background:#f1c40f;
		border-radius:50%;
		bottom:90%;
		box-shadow:0px 0px 30px #f1c40f, 0px 0px 50px #f1c40f;
		animation:animate 2s ease infinite;
		transform-origin:bottom
	}
	@keyframes animate{
		0%{ transform:scaleY(1) }
		50%{ transform: scaleY(1.07) scaleX(1.05) }
		100%{ transform:scaleY(1) }
	}
	.message{
		text-align:center;
		color:#fff;
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.