rDrama/files/assets/CHRISTMAS/css/mistletoe.css

/* Colors */

.text-twitter {
	color: #00acee;
}
.text-success {
	color: #16a34a;
}
.text-warning {
	color: #facc15;
}
.text-danger {
	color: #dc2626;
}
.text-blue {
	color: #0369a1;
}
.text-lightblue {
	color: #0ea5e9;
}
.text-gold {
	color: #facc15;
}
.text-silver {
	color: #94a3b8;
}
.text-lightgreen {
	color: #84cc16;
}
.text-black-50 {
	color: #57534e;
}

/* Hats */

.cap::before {
	content: '';
	pointer-events: none;
	background: url("/assets/CHRISTMAS/hat2.png");
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 16px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.santa::before {
	content: '';
	pointer-events: none;
	background: url("/assets/CHRISTMAS/hat1.png");
	position: absolute;
	top: -10px;
	left: -5px;
	right: 0;
	height: 16px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}


/* Mistletoe */

.fa-mistletoe::before {
	color: #dc2626!important;
}
.fa-mistletoe::after {
	color: #3f6212!important;
}
.fad.fa-mistletoe:after {
	opacity: 1;
}

.mistletoe::before {
	content: '';
	pointer-events: none;
	background: url("https://i.ibb.co/LN79rp9/Image.png");
	position: absolute;
	bottom: -15px;
	right: 0;
	height: 23px;
	background-size: contain;
}

.mistletoe::after {
	content: '';
	pointer-events: none;
	background: url("https://i.ibb.co/LN79rp9/Image.png");
	position: absolute;
	bottom: -15px;
	left: 0;
	height: 23px;
	background-size: contain;
}

/* Fireplace */

.fa-fireplace::before {
	color: #7c2d12!important;
}
.fa-fireplace::after {
	color: #f59e0b!important;
}
.fad.fa-fireplace:after {
	opacity: 1;
}

/* Snow caps */

.snowcaps::after {
	content: '';
	pointer-events: none;
	background: url("/assets/CHRISTMAS/snowcap.png");
	position: absolute;
	bottom: -15px;
	left: 0;
	right: 0;
	height: 23px;
	border-radius: 9999px;
	background-size: contain;
}

/* Frost */

.frost {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 200px 10px rgba(255, 255, 255, 0.5) inset;
	pointer-events: none;
	z-index: 1050;
}

/* Lights */

.fa-lights-holiday::before {
	color: #3f6212!important;
}
.fa-lights-holiday::after {
	color: #dc2626!important;
}
.fad.fa-lights-holiday:after {
	opacity: 1;
}

@keyframes lights {
    0% {
       /*Two zeros, not one !!*/
       /*[0] is equivalent to [0 50%] and will create a different animation */
        background-position:0 0; 
    } 
    100% {
        background-position:0 -138px;
    }
}

.lights::after {
	content: '';
	pointer-events: none;
    background: url(/assets/CHRISTMAS/lights-string.png);
    animation: lights 1s infinite steps(2);
    position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 69px;
}

/* Candy Cane */

.fa-candy-cane::before {
	color: #ffffff!important;
}
.fa-candy-cane::after {
	color: #dc2626!important;
}
.fad.fa-candy-cane:after {
	opacity: 1;
}

.candycane p {
  --color1: #DC2626;
  --color2: #059669;
  background: repeating-linear-gradient(
    45deg,
    var(--color1),
    var(--color1) 30px,
    var(--color2) 30px,
    var(--color2) 60px
  );
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  /*animation: 30s linear 0s infinite move;*/
}

.candycane p:hover {
	animation: 30s linear 0s infinite move;
}

@keyframes move {
  from {
    background-position: 0px;
  }
  to {
    background-position: 1000px;
  }
}

/* Falling Gingermarsey */

.fa-gingerbread-man::before {
	color: #ef4444!important;
}
.fa-gingerbread-man::after {
	color: #a16207!important;
}
.fad.fa-gingerbread-man:after {
	opacity: 1;
}

.snowflake {
	color: #fff;
	font-size: 1em;
	font-family: Serif;
	text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall {
	0% {
		top: -10%
	}
	100% {
		top: 100%
	}
}

@-webkit-keyframes snowflakes-shake {
	0% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px)
	}
	50% {
		-webkit-transform: translateX(80px);
		transform: translateX(80px)
	}
	100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px)
	}
}

@keyframes snowflakes-fall {
	0% {
		top: -10%
	}
	100% {
		top: 100%
	}
}

@keyframes snowflakes-shake {
	0% {
		transform: translateX(0px)
	}
	50% {
		transform: translateX(80px)
	}
	100% {
		transform: translateX(0px)
	}
}

.snowflake {
	position: fixed;
	top: -10%;
	z-index: 9999;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
	-webkit-animation-name: snowflakes-fall, snowflakes-shake;
	-webkit-animation-duration: 10s, 3s;
	-webkit-animation-timing-function: linear, ease-in-out;
	-webkit-animation-iteration-count: infinite, infinite;
	-webkit-animation-play-state: running, running;
	animation-name: snowflakes-fall, snowflakes-shake;
	animation-duration: 10s, 3s;
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite, infinite;
	animation-play-state: running, running
}

.snowflake:nth-of-type(0) {
	left: 1%;
	-webkit-animation-delay: 0s, 0s;
	animation-delay: 0s, 0s
}
.snowflake:nth-of-type(1) {
	left: 10%;
	-webkit-animation-delay: 1s, 1s;
	animation-delay: 1s, 1s
}
.snowflake:nth-of-type(2) {
	left: 20%;
	-webkit-animation-delay: 6s, .5s;
	animation-delay: 6s, .5s
}
.snowflake:nth-of-type(3) {
	left: 30%;
	-webkit-animation-delay: 4s, 2s;
	animation-delay: 4s, 2s
}
.snowflake:nth-of-type(4) {
	left: 40%;
	-webkit-animation-delay: 2s, 2s;
	animation-delay: 2s, 2s
}
.snowflake:nth-of-type(5) {
	left: 50%;
	-webkit-animation-delay: 8s, 3s;
	animation-delay: 8s, 3s
}
.snowflake:nth-of-type(6) {
	left: 60%;
	-webkit-animation-delay: 6s, 2s;
	animation-delay: 6s, 2s
}
.snowflake:nth-of-type(7) {
	left: 70%;
	-webkit-animation-delay: 2.5s, 1s;
	animation-delay: 2.5s, 1s
}
.snowflake:nth-of-type(8) {
	left: 80%;
	-webkit-animation-delay: 1s, 0s;
	animation-delay: 1s, 0s
}
.snowflake:nth-of-type(9) {
	left: 90%;
	-webkit-animation-delay: 3s, 1.5s;
	animation delay: 3s, 1.5s
}
.snowflake:nth-of-type(10) {
	left: 100%;
	-webkit-animation-delay: 3s, 2s;
	animation-delay: 3s, 2s
}
.snowflake:nth-of-type(11) {
	left: 5%;
	-webkit-animation-delay: 1s, 4s;
	animation-delay: 1s, 4s
}
.snowflake:nth-of-type(12) {
	left: 15%;
	-webkit-animation-delay: 1s, 1.5s;
	animation-delay: 1s, 1.5s
}
.snowflake:nth-of-type(13) {
	left: 25%;
	-webkit-animation-delay: 6s, 2.5s;
	animation-delay: 6s, 2.5s
}
.snowflake:nth-of-type(14) {
	left: 35%;
	-webkit-animation-delay: 4s, 1s;
	animation-delay: 4s, 1s
}
.snowflake:nth-of-type(15) {
	left: 45%;
	-webkit-animation-delay: 2s, 4s;
	animation-delay: 2s, 4s
}
.snowflake:nth-of-type(16) {
	left: 55%;
	-webkit-animation-delay: 8s, 3s;
	animation-delay: 8s, 3s
}
.snowflake:nth-of-type(17) {
	left: 65%;
	-webkit-animation-delay: 6s, 3s;
	animation-delay: 6s, 3s
}
.snowflake:nth-of-type(18) {
	left: 75%;
	-webkit-animation-delay: 2.5s, 4s;
	animation-delay: 2.5s, 4s
}
.snowflake:nth-of-type(19) {
	left: 85%;
	-webkit-animation-delay: 2s, 0s;
	animation-delay: 2s, 0s
}
.snowflake:nth-of-type(20) {
	left: 95%;
	-webkit-animation-delay: 3s, 1.5s;
	animation delay: 3s, 1.5s
}