*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 100%;
}

body {
    background-color: #222;
    width: 100%;
    height: 100%;
}
.text {
	position: absolute;
	width: 200px;
	height: 20px;
	bottom: 35%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: snow;
	border: 5px ridge rgba(200, 200, 200, .6);
	background-color: rgba(255, 255, 255, .3);
	text-align: center;

	overflow: hidden;

}

.text div {
	display: block;
	width: 200%;
	height: 20px;

	position: absolute;
	overflow: hidden;

	animation: marquee 5s linear infinite;
}

.text span {
	float: left;
	width: 50%;

	color: yellow;
	text-shadow: 2px 2px 2px yellow;
	font-weight: normal;
	font-size: 1vw;

}

@media screen and (max-width: 768px) {
  .text span {
    font-size:2vw;
  }
}


@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

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

/*원기둥*/
.layer-top {
	margin: 0 auto;
	position: absolute;
	top: 50px;
    width: 200px;
    height: 100px;
    background: rgba(255, 255, 255, 0.9);
	border-radius:100px/25px;
}

/*원기둥 윗면*/
.layer-top:before {
	position:absolute;
	top:0;
	left:0;
	width:200px; 
	height:50px;
	background:rgba(255,255,255,0.6);
	border-radius:100px/25px;
	content:"";

}

/*원기둥 아래면*/
.layer-top:after {
	position:absolute;
	bottom:0;
	left:0;
	width:200px;
	height:50px;
	background:rgba(255,255,255,0);
	border-radius:100px/25px;
	content:"";
}

/*원기둥*/
.layer-bottom {
	position: absolute;
	top: 10px;
	left: 25px;
    width: 150px;
    height: 75px;
    background: rgba(242,242,242,1);
	border-radius:75px/18.75px;
	z-index: 999;
}

/*원기둥 윗면*/
.layer-bottom:before {
	position:absolute;
	top:0;
	left:0;
	width:150px; 
	height:37.5px;
	background:rgba(255,255,255,1);
	border-radius:75px/18.75px;
	content:"";

}

/*원기둥 아래면*/
.layer-bottom:after {
	position:absolute;
	bottom:0;
	left:0;
	width:150px;
	height:37.5px;
	background:rgba(242,242,242,1);
	border-radius:75px/18.75px;
	content:"";
}

.drip {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: rgba(255,255,255,1);
	border-radius: 50%;
	border-top-right-radius: 0;
	transform: rotate(-45deg);
}

.drip11{
	top: 55px;
	left: 15px;
	z-index: 777;
}

.drip1 {
	top: 60px;
	left: 5px;
	z-index: 888;
}

.drip2 {
	top: 70px;
	left: 20px;
	z-index: 999;
}

.drip3 {
	top: 75px;
	left: 40px;
	z-index: 999;
}

.drip4 {
	top: 77.5px;
	left: 62.5px;
	z-index: 999;
}

.drip5 {
	top: 78px;
	left: 85px;
	z-index: 999;
}

.drip6 {
	top: 78px;
	left: 107px;
	z-index: 999;
}

.drip7 {
	top: 76px;
	left: 130px;
	z-index: 999;
}

.drip8 {
	top: 73px;
	left: 152.5px;
	z-index: 999;
}

.drip9 {
	top: 67px;
	left: 170px;
	z-index: 999;
}

.drip10 {
	top: 60px;
	left: 177.5px;
	z-index: 888;
}

.drip12 {
	top: 55px;
	left: 165px;
	z-index: 777;
}

.candle {
	position: absolute;
	left: 10%;
	bottom: 10%;
	width: 10px;
	height: 80px;
	border-radius: 2px/4px;
	z-index: 999;
}

.candle1 {
	background: rgba(255,0,0,0.99);
}

.candle2 {
	background: rgba(0,255,0,0.99);
}

.candle3 {
	background: rgba(0,0,255,0.99);
}

.candle4 {
	background: rgba(102,0,204,0.99);
}

.candle5 {
	background: rgba(255,102,153,0.99);

}


.candle:before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 10px;
	height: 4px;
	border-radius: 2px/4px;
}

.candle1:before {
	background: rgba(255,0,0,1);
}

.candle2:before {
	background: rgba(0,255,0,1);
}

.candle3:before {
	background: rgba(0,0,255,1);
}

.candle4:before {
	background: rgba(102,0,204,1);
}

.candle5:before {
	background: rgba(255, 102, 15,1);
}

.light {
	 position: absolute;
    background-color: orange;
    width: 10px;
    height: 25px;
    border-radius: 10px 10px 10px 10px / 25px 25px 10px 10px;
    top: -24px;
    left: 7.5px;
    margin-left: -7.5px;
    z-index: 999;
    filter: blur(0.5px);
    box-shadow:
        0 0 10px rgba(orange, 0.5),
        0 0 20px rgba(orange, 0.5),
        0 0 60px rgba(orange, 0.5),
        0 0 80px rgba(orange, 0.5);
    transform-origin: 50% 90%;
    animation: flicker 1s ease-in-out alternate infinite;
}

@keyframes flicker {
    0% {
        transform: skewX(5deg);
        box-shadow: 
            0 0 10px rgba(orange, 0.2),
            0 0 20px rgba(orange, 0.2),
            0 0 60px rgba(orange, 0.2),
            0 0 80px rgba(orange, 0.2) }
    25% {
        transform: skewX(-5deg);
        box-shadow:
            0 0 10px rgba(orange, 0.5),
            0 0 20px rgba(orange, 0.5),
            0 0 60px rgba(orange, 0.5),
            0 0 80px rgba(orange, 0.5) }
    50% {
        transform: skewX(10deg);
        box-shadow:
            0 0 10px rgba(orange, 0.3),
            0 0 20px rgba(orange, 0.3),
            0 0 60px rgba(orange, 0.3),
            0 0 80px rgba(orange, 0.3) }
    75% {
        transform: skewX(-10deg);
        box-shadow:
            0 0 10px rgba(orange, 0.4),
            0 0 20px rgba(orange, 0.4),
            0 0 60px rgba(orange, 0.4),
            0 0 80px rgba(orange, 0.4) }
    100% {
        transform: skewX(5deg);
        box-shadow:
            0 0 10px rgba(orange, 0.5),
            0 0 20px rgba(orange, 0.5),
            0 0 60px rgba(orange, 0.5),
            0 0 80px rgba(orange, 0.5) }
}




/*
.water {
	position:absolute;
	bottom:0;
	left:0;
	width:200px;
	height:100px;
	border-radius:50px/25px;
	background-color:rgba(255,255,255,0.7);
	content:"";
	transition-duration:1s;
}
.water:before {
	position:absolute;
	top:0;
	left:0;
	width:100px;
	height:50px;
	border-radius:50px/25px;
	background-color:rgba(255,255,255,0.7);
	content:"";
}
.water:after {
	position:absolute;
	bottom:0;
	left:0;
	width:100px;
	height:50px;
	border-radius:50px/25px;
	background-color:rgba(255,255,255,0.7);
	content:"";
}

label {color:#fff;}

.water30:checked ~ .square .water {
	height:30%;
}
.water60:checked ~ .square .water {
	height:60%;
}
.water90:checked ~ .square .water {
	height:90%;
}*/