.container
	.popsicle
		.colors
	.stick
	.shadow

body {
	background: #33485F;
}

.container {
	height: 280px;
	width: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.popsicle {
	height: 180px;
	width: 120px;
	border-radius: 55px 55px 10px 10px;
	position: relative;
	display: block;
  margin: 0 auto;
	overflow: hidden;
	animation: float 2s ease-in infinite alternate;
	
	
	&:before {
		content: "";
		height: 120%;
    width: 140%;
    position: absolute;
    left: -20%;
    top: -10%;
		background-image: linear-gradient(0deg, #F63999 25%, #30dcf6 25%, #30dcf6 50%, #f2d200 50%, #f2d200 75%, #70ca5c 75%);
		display: block;
		transform: rotate(-20deg);
		animation: magic 2.5s linear infinite;
		
	}
	
	
	@keyframes magic {
		to {
			background-position: 0 210px;
		}
	}
	
	&:after {
    content: '';
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 13px;
    height: 120px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.35);
  }
}

.stick {
	width: 38px;
  height: 45px;
  background: #E09C5F;
  border-radius: 0 0 12px 12px;
  display: block;
  margin: 0 auto;
	animation: float 2s ease-in infinite alternate;
  
  &:after {
    display: block;
    content: '';
    width: 100%;
    height: 14px;
    background: rgba(0, 0, 0, 0.40);
  } 
}

@keyframes float {
	to {
		transform: translateY(20px);
	}
}

.shadow {
	width: 124px;
	height: 35px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 60px / 22px;
	display: block;
	margin: 0 auto;
	transform: scaleY(0.7) translateY(30px);
	animation: shad 2s ease-in infinite alternate;
}

@keyframes shad {
	to {
		transform: scaleX(0.9) scaleY(0.7) translateY(30px);
	}
}