* {margin: 0; padding: 0;}
body {
	background-color: #dcfcd9;
}
div.crowntop {
	position: relative;
}
/* This is being used to create a circle jewel on top of the crown. */
div.leftcircle {
	height: 50px;
	width: 50px;
	border: 2px solid purple;
	background-color: purple;
	border-radius: 50%;
	position: absolute;
	left: 121px;
	top: 25px;
}
/* This is being used to create a square jewel on top of the crown. */
div.leftmiddlesquare {
	height: 50px;
	width: 50px;
	border: 2px solid pink;
	background-color: pink;
	position: absolute;
	left: 232px;
	top: 25px;
}
/* This is being used to create a oval jewel on top of the crown. */
div.rightmiddleoval {
	width: 30px;
	height: 60px;
	border-radius: 50%;
	background: green;
	position: absolute;
	left: 475px;
	top: 25px;
}
/* This is being used to create a circle jewel on right side of the crown. */
div.rightcircle {
	height: 50px;
	width: 50px;
	border: 2px solid skyblue;
	background-color: skyblue;
	border-radius: 50%;
	position: absolute;
	left: 577px;
	top: 27px;
}
/* This is being used to create the triangle and spurs of the crown. */
div.middletower {
	position: relative;
}
/* Left most triangle spur for the crown. */
div.lefttriangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 80px 200px 0;
	border-color: transparent transparent #f5cc51 transparent;
	margin-left: 15px;
	position: absolute;
	left: 134px;
	top: 78px;
}
/* Second left most triangle spur for the crown. */
div.leftmiddletriangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 80px 200px 0;
	border-color: transparent transparent #f5cc51 transparent;
	margin-left: 45px;
	position: absolute;
	left: 215px;
	top: 78px;
}
/* Second from the right triangle spur for the crown. */
div.rightmiddletriangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 200px 80px;
	border-color: transparent transparent #f5cc51 transparent;
	margin-left: 83px;
	position: absolute;
	left: 328px;
	top: 78px;
}
/* Right most triangle spur for the crown. */
div.righttriangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 200px 80px;
	border-color: transparent transparent #f5cc51 transparent;
	margin-left: 23px;
	position: absolute;
	left: 500px;
	top: 78px;
}
div.base {
	position: relative;
}
/* This created a rounded rectangle for the top part of the base */
div.topbase {
	background-color: #ebb102;
	border: 2px solid black;
	border-radius: 10px;
	height: 20px;
	width: 475px;
	position: absolute;
	left: 136px;
	top: 277px;
}
/* This is being used to create a rectangle for the middle of the crown base. */
div.middlebase {
	background-image: linear-gradient(to bottom, #f5cc51, #a1801d);
    border: 2px solid black;
	height: 75px;
	width: 450px;
	position: absolute;
	left: 150px;
	top: 300px;
}
/* This created a rounded rectangle for the bottom part of the base */
div.bottombase {
	background-color: #ebb102;
	border: 2px solid black;
	border-radius: 10px;
	height: 20px;
	width: 475px;
	position: absolute;
	left: 136px;
	top: 378px;
}
div.jewels {
	position: relative;
}
/* This selector is creating a teardrop shape in the right portion of the crown. */
div.leftjewel {
	position: absolute;
	left: 205px;
	top: 320px;
	width: 50px;
	height: 50px;
	border-radius: 0 50% 50% 50%;
	transform: rotate(45deg);
	background: dodgerblue;
}
/* This selector is creating a square shape in the band of the crown. */
div.middlejewel {
	background-color: white;
	border: 2px solid black;
	border-radius: 5px;
	height: 50px;
	width: 50px;
	position: absolute;
	left: 345px;
	top: 317px;
}
/* These two selectors are creating a diamond shape in the band of the crown. */
div.rightjeweltop {
	position: absolute;
	left: 494px;
	top: 310px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 25px 30px 25px;
	border-color: transparent transparent red transparent;
}
div.rightjewelbottom {
	position: absolute;
	left: 494px;
	top: 340px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 25px 0 25px;
	border-color: red transparent transparent transparent;
}