rDrama/files/assets/css/awards.css

#awards-container {
	position: absolute;
	overflow: hidden;
	pointer-events: none;
	z-index: 1029;
}

.stackable-container > div {
	position: absolute;
}

.stackable-container div,
.stackable-container img, .ricardo {
	animation-iteration-count: infinite !important;
	animation-timing-function: linear !important;
}

.scooter img {
	width: min(7vw, 50px) !important;
}

.wholesome img {
	width: min(8vw, 60px) !important;
}

.train img {
	width: min(10vw, 80px) !important;
}




.wholesome:nth-child(even),
.wholesome:nth-child(n+2):nth-child(n+3) img
{animation-direction: alternate-reverse}

@keyframes sealX {
	100% {transform: translateX(98vw)}
}
@keyframes sealY {
	100% {transform: translateY(80vh)}
}

.train:nth-child(1), .scooter:nth-child(1) {top:2%}
.train:nth-child(2), .scooter:nth-child(2) {top:27%}
.train:nth-child(3), .scooter:nth-child(3) {top:52%}
.train:nth-child(4), .scooter:nth-child(4) {top:77%}

.train:nth-child(odd) {animation-direction: reverse;}
.train:nth-child(odd) img {transform: scaleX(-1);}

@keyframes train {
	from {transform: translateX(-10vw)}
	to {transform: translateX(110vw)}
}

.scooter:nth-child(even) {animation-direction: reverse;}
.scooter:nth-child(even) img {transform: scaleX(-1);}

.wholesome {animation: sealX 8s alternate}
.wholesome img {animation: sealY 9s alternate}
.train, .scooter {animation: train 12s;}

@media (max-width: 768px) {
	.wholesome {animation: sealX 6s alternate}
	.wholesome img {animation: sealY 7s alternate}
	.train, .scooter {animation: train 6s;}	
}

/*confetti*/
.confetti {
	background-image: url(/i/confetti2.webp);
	background-repeat: repeat;
}

/*fireworks*/
.firework img {
	max-width: min(15vw,15rem);
}

/*ricardo*/
.ricardo {
	position: absolute !important;
	overflow: hidden !important;
	bottom: 0;
}
.ricardo img {
	max-height: min(15vw,100px);
}

.ricardo1 {animation: ricardo1Xa 5.8s, ricardo1Xb 11.6s, ricardo1Y 23.2s;}
.ricardo2 {animation: ricardo2 8.5s;}
.ricardo3 {animation: ricardo3 10s;}

@keyframes ricardo1Xa {
	0% {right: -200px}
	50% {right: 200px}
	100% {right: -200px}
}

@keyframes ricardo1Xb {
	0%{left:unset}
	49% {left: unset}
	50% {left: -200px}
	75% {left:200px}
	100% {left: -200px}
}

@keyframes ricardo1Y {
	0% {bottom:20vh}
	24% {bottom: 20vh}
	25% {bottom: 60vh}
	49% {bottom: 60vh}
	50% {bottom: 10vh}
	74% {bottom: 10vh}
	75% {bottom: 50vh}
	99% {bottom: 50vh}
	100% {bottom: 20vh}
}


@keyframes ricardo2 {
	0% { opacity: 1; left: 0; right: unset;}
	18% {opacity: 0; left: 0; right: unset;}
	19% {opacity: 0; left: unset; right: 20vw;}
	20% {opacity: 1; left: unset; right: 20vw;}
	38% {opacity: 0; left: unset; right: 20vw;}
	39% {opacity: 0; left: 20vw; right: unset;}
	40% {opacity: 1; left: 20vw; right: unset;}
	58% {opacity: 0; left: 20vw; right: unset;}
	59% {opacity: 0; left: unset;right: 60vw;}
	60% {opacity: 1; left: unset; right: 60vw;}
	78% {opacity: 0; left: unset; right: 60vw;}
	79% {opacity: 0; left: 80vw; right: unset;}
	80% {opacity: 1; left: 80vw; right: unset;}
	98% {opacity: 0; left: 80vw; right: unset;}
	99% {opacity: 0; left: 0; right: unset;}
	100% {opacity: 1; left: 0; right: unset;}
}

@keyframes ricardo3 {
	50% {transform: translateX(100vw); top: unset; bottom: 0;}
	51% {transform: translateX(100vw) rotate(180deg); top: 0; bottom: unset;}
	100% {transform: translateX(-15vw) rotate(180deg); top: 0; bottom: unset;}
}




.tilt-post {
	animation-duration: 100s !important;
	animation-iteration-count: infinite !important;
	animation-direction: alternate !important;
	animation-timing-function: linear !important;
	animation-name: tilt-post;
}
@media (max-width: 768px) {
	@keyframes tilt-post {
		0% {transform: rotate(0deg);}
		25% {transform: rotate(0.3deg);}
		75% {transform: rotate(-0.3deg);}
		100% {transform: rotate(0deg);}
	}

}

@media (min-width: 768px) {
	.tilt-post {
		animation-duration: 200s !important;
	}
	@keyframes tilt-post {
		0% {transform: rotate(0deg);}
		25% {transform: rotate(0.8deg);}
		75% {transform: rotate(-0.8deg);}
		100% {transform: rotate(0deg);}
	}
}

.tilt-post > * {
	padding-left: 3rem !important;
	padding-right: 3rem !important;
}




@keyframes tilt-comment {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

.tilt-comment {
	animation-duration: 3000s !important;
	animation-iteration-count: infinite !important;
	animation-timing-function: linear !important;
	animation-name: tilt-comment;
}

@media (max-width: 768px) {
	.tilt-comment {
		animation-duration: 6000s !important;
	}
}