body {

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100vw;
	height: 100vh;
	
	background: no-repeat center/cover url("https://cdn.pixabay.com/photo/2020/04/28/04/25/torn-paper-5102661_960_720.jpg");
}

.wish {
	
	text-align: center;
	height: 100%;
	margin: 0;
	font-size: 1.2rem;
	padding: 4rem;
	border: 3px dashed #d9376e;
	background: #fec7d7;
	color: #004643;
	clip-path: polygon(100% 0, 0 0, 50% 100%);
}

.container {
	margin: 0 auto 50px;
	width: 400px;
	height: 100%;
}


.wheel {
	width: 400px;
	height: 400px;
	border-radius: 50%;
	position: relative;
	overflow: hidden;
}

.inner-wheel {
	border-radius: 50%;
	width: 400px;
	display: block;
	height: 400px;
	position: relative;
	overflow: hidden;
	transition: transform 1.2s ease-out;
	transform: rotate(0deg);
}

.spin-button {
	position: absolute;
	width: 60px;
	height: 60px;
	background-color: #475d5b;
	border-radius: 50%;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	
	cursor: pointer;
}
.spin-button:after {
	content: "SPIN";
	position: absolute;
	top: 22px;
	left: 10px;
	color: #faae2b;
}

.section {
	position: absolute;
	text-align: center;
	
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 200px 116px 0;
	left: 84px;
	top: 0px;
	opacity: 1;
	transform-origin: 116px 200px;
	border-color: #00473e transparent;
}
.section:nth-child(2) {
	transform: rotate(60deg);
	border-color: #8bd3dd transparent;
}
.section:nth-child(3) {
	transform: rotate(120deg);
	border-color: #ffd803 transparent;
}
.section:nth-child(4) {
	transform: rotate(180deg);
	border-color: #f582ae transparent;
}
.section:nth-child(5) {
	transform: rotate(240deg);
	border-color: #a7a9be transparent;
}
.section:nth-child(6) {
	transform: rotate(300deg);
	border-color: #f9bc60 transparent;
}

span {
	position: relative;
	display: inline-block;
	text-align: center;
	margin-left: -67px;
	top: -185px;
}

.b-day {
	
    text-align: center;
	color: #ffa8ba;
	text-shadow: 3px 1px rgba(0, 0, 0, 0.4);
	font-size: 2.2rem;
}

.vertical {
	
	top: -150px;
	text-transform: uppercase;
	text-shadow: 3px 1px rgba(0, 0, 0, 0.4);
	font-size: 3.5rem;
	margin-left: -18px;
	transform: rotate(-1.5deg);
	font-weight: bold;
	color: #004643;
}
.vertical:before {
	position: absolute;
	top: -40px;
	left: 0;
}
.vertical:after {
	position: absolute;
	top: 40px;
	left: 0;
}

.joy:before {
	content: "J";
}

.joy:after {
	content: "Y";
}

.fun:before {
	content: "F";
}

.fun:after {
	content: "N";
}

.fa {
	font-size: 80px;
	margin-left: -35px;
	top: -155px;
}

.fa-heart {
	color: #e53170;

}

.fa-birthday-cake {
	color: #fa5246;
}

.fa-smile-beam{
	color: #9656a1;
}

.icons {
	font-family: "League Script";
	font-size: 12px;
	position: absolute;
	margin-top: 10px;
	padding-left: 25px;
}

.pulse {
	animation-name: pulse;
	-webkit-animation-name: pulse;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.9);
	}
	50% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.9);
	}
}