CSS quests

body {
	align-items: center;
    animation: 120s 25s infinite disco-background;
	background-color: #AEDCFF;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    margin: 0;
}

/* CACTUS AND POT */

#cactus-and-pot {
    animation: 3s 25s ease-in-out infinite jumping-pot;
    width: 13rem;
}

/* Disable all animations on hover */
#cactus-and-pot:hover,
#cactus-and-pot:hover .mini-spine,
#cactus-and-pot:hover .cactus-eye,
#cactus-and-pot:hover #cactus-smile,
#cactus-and-pot:hover .spine,
#cactus-and-pot:hover+#pot-shadow{
    animation: none;
}
#cactus-hair {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 4.2rem;
    z-index: -1;
}
.mini-spine {
    border-bottom: 2rem solid #282828;
    border-left: .2rem solid transparent;
    border-right: .2rem solid transparent;
    display: relative;
    margin-top:-1rem;
    width: 0;
}
#cactus-hair-1 {
	animation: 1s 6s ease-in forwards hairgrow-1;
    transform: translateY(140%) rotate(-10deg);
}
#cactus-hair-2 {
	animation: 2s 3s forwards hairgrow-2;
	border-bottom: 2rem solid #B7418C;
    transform: translateY(100%);
}
#cactus-hair-3 {
	animation: 1s 6s ease-in forwards hairgrow-3;
    transform: translateY(140%) rotate(10deg);
}
#cactus-body {
	align-items: center;
    background-color: #52AE32;
    background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #68E53C 0%, #52AE32 50%, #366C23 95%);
    border: .15rem solid #4D8C36;
    border-radius: 60% 60% 50% 50%/ 65% 65% 40% 40%;
    display: flex;
    flex-direction: column;
    height: 9rem;
    margin-bottom: -2rem;
    width: 8.4rem;
}
#cactus-eyes {
	align-items: center;
    display: flex;
    height: .8rem;
    justify-content: space-around;
    margin-top: 25%;
    width: 65%;
}
.cactus-eye {
    background-color: #2F0B02;
    border-radius: 100%;
    height: 0;
    transition: height .4s;
    opacity: hidden;
    width: .8rem;
}
#left-eye {
    animation: 3s 8s forwards first-eye-opening, 6s 15s forwards the-coast-is-clear, 5s 21s step-end infinite blink;
}
#right-eye {
    animation: 3s 11s forwards first-eye-opening, 6s 15s forwards the-coast-is-clear, 5s 21s step-end infinite blink;
}
#cactus-smile {
	animation: 1s 21.5s forwards smile;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 0 0 transparent;
    height: 1.2rem;
    transition: box-shadow 1s;
    width: .7rem;
}
.spine {
    border-bottom: 3rem solid #FDD835;
    border-left: .4rem solid transparent;
    border-right: .4rem solid transparent;
    width: 0;
}
#cactus-arms {
	display: flex;
    justify-content: space-between;
    margin-top: -3em;
    width: 110%;
}
.cactus-arm {
    z-index: -1;
}
#cactus-left-arm {
	animation: 1s 23s ease-in-out infinite wave-left-arm;
    transform: rotate(-30deg) translateY(2rem);
    transition: transform .4s;
}
#cactus-right-arm {
	animation: 1s 23s ease-in-out infinite wave-right-arm;
    transform: rotate(50deg) translateY(2rem);
    transition: transform .4s;
}
#cactus-legs {
    display: flex;
    justify-content: space-around;
    transform: translateY(.8rem);
    width: 100%;
}
#cactus-left-leg {
    animation: 2.5s 24.5s ease infinite wave-left-leg;
    transform: rotate(-30deg) translateY(3rem);
    transition: transform .4s;
}
#cactus-right-leg {
    animation: 2.5s 24.5s ease infinite wave-right-leg;
    transform: rotate(30deg) translateY(3rem);
    transition: transform .4s;
}

#cactus,
#pot {
    align-items: center;
    display: flex;
    flex-direction: column;
}
#pot-top {
    background-color: #F15E13;
    border-radius: 2px;
    height: 1rem;
    width: 13rem;
    z-index: 4;
}
#pot-top-shadow {
    box-shadow: 0 0.1rem .3rem .1rem #C0531C;
    height: 0;
    width: 11.8rem;
    z-index: 3;
}
#pot-base {
    border-bottom: 9rem solid #F15E13;
    border-left: 1.5rem solid transparent;
    border-right: 1.5rem solid transparent;
    height: 0;
    transform: rotate(180deg);
    width: 9rem;
    z-index: 2;
}

#pot-shadow {
	animation: 3s 25s ease-in-out infinite shadow-changing;
    background-color: rgba(0, 0, 0, .4);
    border-radius: 4rem / 2rem;
    height: 4rem;
    transform: translateY(-3.55rem) scale(1.1) rotateX(45deg);
    width: 8rem;
    z-index: -1;
}


/* Animations */

/* spine hairs */
@keyframes hairgrow-1 {
    0% { transform: translateY(140%) rotate(-10deg); }
    100% { transform: translateY(70%) rotate(-10deg); }
}
@keyframes hairgrow-2 {
    0% { transform: translateY(100%); }
    100% { transform: translateY(20%); }
}
@keyframes hairgrow-3 {
    0% { transform: translateY(140%) rotate(10deg); }
    100% { transform: translateY(70%) rotate(10deg); }
}

/* Eye game */
@keyframes first-eye-opening {
    0% { height: 0rem; }
    50% { height: .8rem; }
    100% { height: 0rem; }
}

@keyframes the-coast-is-clear {
    0% { height: 0; }
    10% { height: .8rem; }
    30% { height: .8rem; transform: translateX(-1rem); }
    50% { height: .8rem; transform: translateX(1rem); }
    70% { height: .8rem; transform: translateX(0); }
    80% { height: 0; transform: translateX(0); }
    90% { height: 0; transform: translateX(0); }
    100% { height: .8rem; transform: translateX(0); }
}

@keyframes blink {
    0% { height: .8rem; width: .8rem;}
    96% { height: .1rem; width: .7rem;}
    100% { height: .8rem; width: .8rem;}
}

/* A great cute smile */

@keyframes smile {
    0% { box-shadow: 0 0 #2F0B02; }
    100% { box-shadow: 0 .25rem #2F0B02; }
}

/* Move those spines! */

@keyframes wave-left-arm {
    0% { transform: rotate(-30deg); }
    25% { transform: rotate(-90deg); }
    50% { transform: rotate(-30deg);}
    75% { transform: rotate(-90deg); }
    100% { transform: rotate(-30deg); }
}

@keyframes wave-right-arm {
    0% { transform: rotate(120deg); }
    25% { transform: rotate(50deg); }
    50% { transform: rotate(120deg);}
    75% { transform: rotate(50deg); }
    100% { transform: rotate(120deg); }
}

@keyframes wave-left-leg {
    0% { transform: rotate(-30deg) translateY(.3rem); }
    25% { transform: rotate(30deg) translateY(.3rem);}
    50% { transform: rotate(-30deg) translateY(.3rem); }
    75% { transform: rotate(30deg) translateY(.3rem); }
    100% { transform: rotate(-30deg) translateY(.3rem); }
}

@keyframes wave-right-leg {
    0% { transform: rotate(30deg) translateY(.3rem); }
    25% { transform: rotate(-30deg) translateY(.3rem);}
    50% { transform: rotate(30deg) translateY(.3rem); }
    75% { transform: rotate(-30deg) translateY(.3rem); }
    100% { transform: rotate(30deg) translateY(.3rem); }
}

/* Cactus jumping with the pot and dropping a shadow */

@keyframes jumping-pot {
    0% { transform: translateY(0); }
    25% { transform: translateY(-6rem) rotate(-10deg);}
    50% { transform: translateY(0rem);}
    75% { transform: translateY(-6rem) rotate(10deg);}
    100% { transform: translateY(0rem);}
}

@keyframes shadow-changing {
    0% {
    	background-color: rgba(0, 0, 0, .4);
        transform: translateY(-2.6rem) scale(1.1) rotateX(75deg);
    }
    25% {
    	background-color: rgba(0, 0, 0, .3);
        transform: translateY(-2.6rem) scale(.8) rotateX(75deg);
    }
    50% {
    	background-color: rgba(0, 0, 0, .4);
        transform: translateY(-2.6rem) scale(1.1) rotateX(75deg);
    }
    75% {
    	background-color: rgba(0, 0, 0, .3);
        transform: translateY(-2.6rem) scale(.8) rotateX(75deg);
    }
    100% {
    	background-color: rgba(0, 0, 0, .4);
        transform: translateY(-2.6rem) scale(1.1) rotateX(75deg);
    }
}

/* Disco fever... well, no... whatever */
@keyframes disco-background {
    0% { background-color: #AEDCFF; }
    25% { background-color: #EFB2F9; }
    50% { background-color: #EA9C94; }
    75% { background-color: #A3F3A5; }
    100% { background-color: #AEDCFF; }
}