@keyframes fromTopToBottom {
    0% {
        transform: translateY(-1rem);
    }
    25% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(1rem);
    }
    75% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-1rem);
    }
}

@keyframes fromLeftToRight {
    0% {
        transform: translateX(-1rem);
    }
    25% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(1rem);
    }
    75% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-1rem);
    }
}

@keyframes fromTopRightToBottomLeft {
    0% {
        transform: translateX(1rem) translateY(-1rem);
    }
    25% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-1rem) translateY(1rem);
    }
    75% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(1rem) translateY(-1rem);
    }
}

@keyframes fromTopLeftToBottomRight {
    0% {
        transform: translateX(-1rem) translateY(-1rem);
    }
    25% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(1rem) translateY(1rem);
    }
    75% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-1rem) translateY(-1rem);
    }
}

@keyframes beat {
    0% {
        transform: scale(1);
    }
    5% {
        transform: scale(0.95);
    }
    10% {
        transform: scale(1.15);
    }
    15% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes mushroomFlash {
    0% {
        transform: none;
    }
    5% {
        transform: rotateX(-180deg) rotateZ(45deg);
    }
    15% {
        transform: rotateX(-180deg) rotateZ(45deg);
    }
    20% {
        transform: translateY(-0.5rem) rotateZ(90deg);
    }
    30% {
        transform: translateY(-0.5rem) rotateZ(90deg);
    }
    35% {
        transform: translateY(-0.5rem) rotateZ(180deg);
    }
    45% {
        transform: translateY(-0.5rem) rotateZ(180deg);
    }
    50% {
        transform: translateY(-0.5rem) rotateZ(225deg);
    }
    60% {
        transform: translateY(-0.5rem) rotateZ(225deg);
    }
    65% {
        transform: translateY(-0.5rem) rotateZ(270deg);
    }
    75% {
        transform: translateY(-0.5rem) rotateZ(270deg);
    }
    80% {
        transform: translateY(-0.5rem) rotateZ(360deg);
    }
    90% {
        transform: translateY(-0.5rem) rotateZ(360deg);
    }
    95% {
        transform: translateY(0) rotateZ(360deg);
    }
    100% {
        transform: translateY(0) rotateZ(360deg);
    }
}

#guideline {
    position: absolute;
    top: calc(100% - 3.75rem);
    left: 0;
    right: 0;
}

#guideline #style-guideline {
    top: 0;
    left: 0;
}

#guideline .guide-letter {
    position: absolute;
    display: block;
    width: 6rem;
    height: 6rem;
    text-align: center;
    font-size: 6rem;
    line-height: 6rem;
    font-weight: 600;
    color: #C9E3B9;
}

#guideline .guide-letter.c {
    left: calc(50% + 1rem);
    top: 12rem;
    animation: fromTopToBottom 4s linear infinite;
}

#guideline .guide-letter.a {
    right: calc(50% + 6rem);
    top: 47.25rem;
    animation: fromLeftToRight 4s linear infinite;
}

#guideline .guide-letter.m {
    right: 20rem;
    top: 90rem;
    animation: fromTopRightToBottomLeft 4s linear infinite;
}

#guideline .guide-letter.p {
    right: 6rem;
    top: 146rem;
    animation: fromTopLeftToBottomRight 4s linear infinite;
}

#guideline .guide-letter.u {
    right: calc(50% + 4rem);
    top: 179rem;
    animation: beat 2s linear infinite;
}

#guideline .guide-letter.s {
    right: 26rem;
    top: 225.5rem;
    animation: mushroomFlash 8s linear infinite;
}