@keyframes SlideUp {
    0% {
        transform: translateY(10rem);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes atomic {
    0% {
        transform-origin: center;
        transform: translateX(30%) rotate(0);
    }
    
    100% {
        transform-origin: center;
        transform: translateX(30%) rotate(-360deg);
    }
}

@media screen and (min-width: 240px) and (max-width: 1024px) and (orientation: portrait) {
    @keyframes atomic {
        0% {
            transform-origin: center;
            transform: translateY(-50%) scale(1.5) rotate(0);
        }
        
        100% {
            transform-origin: center;
            transform: translateY(-50%) scale(1.5) rotate(-360deg);
        }
    }
}