/* Pulse animation */

@keyframes MxPulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15);
        transform: scale3d(1.15, 1.15, 1.15);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.MxPulse {
    -webkit-animation-name: MxPulse;
    animation-name: MxPulse;
}

/* Text Animation */

.text-animation {
    overflow: hidden;
}

.text-animation div:first-child {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-name: text-animation-keyframes;
    animation-name: text-animation-keyframes;
    animation-duration: 8s;
    -webkit-animation-duration: 8s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes text-animation-keyframes {
    0% {margin-top: 0;}
    10% {margin-top: 0;}
    20% {margin-top: -4.5rem;}
    30% {margin-top: -4.5rem;}
    40% {margin-top: -10rem;}
    60% {margin-top: -10rem;}
    70% {margin-top: -4.5rem;}
    80% {margin-top: -4.5rem;}
    90% {margin-top: 0;}
    100% {margin-top: 0;}
}

@media (max-width: 768px) {
    @keyframes text-animation-keyframes {
        0% {margin-top: 0;}
        10% {margin-top: 0;}
        20% {margin-top: -4rem;}
        30% {margin-top: -4rem;}
        40% {margin-top: -8rem;}
        60% {margin-top: -8rem;}
        70% {margin-top: -4rem;}
        80% {margin-top: -4rem;}
        90% {margin-top: 0;}
        100% {margin-top: 0;}
    }
}

/* Background Animation */

.home_card_animation::before, .home_card_animation::after {
    font: 5vmin/1.3 Serif;
    color: transparent;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 3em;
    height: 3em;
    content: ".";
    mix-blend-mode: screen;
    animation: 44s -27s move infinite ease-in-out alternate;
    z-index: -1;
}

.home_card_animation::before {
    text-shadow: 2.4532713304em 0.4199525582em 7px rgba(0, 255, 82, 0.9),
        0.2917460549em 0.8241534164em 7px rgba(255, 230, 0, 0.9),
        1.3073174231em 0.8838828057em 7px rgba(255, 232, 0, 0.9),
        -0.255615616em 1.0181931384em 7px rgba(0, 163, 255, 0.9),
        2.2513813584em 1.981928365em 7px rgba(255, 124, 0, 0.9),
        0.7684626588em 1.0085594545em 7px rgba(255, 212, 0, 0.9),
        2.4081716629em -0.2105986719em 7px rgba(131, 255, 0, 0.9),
        1.5308297424em 1.0906318727em 7px rgba(255, 20, 0, 0.9),
        1.8816368503em -0.3659872667em 7px rgba(93, 255, 0, 0.9),
        0.6623489301em 1.2979926163em 7px rgba(255, 179, 0, 0.9),
        0.1063271936em 0.8538186669em 7px rgba(0, 196, 255, 0.9),
        -0.4384050381em -0.1167929153em 7px rgba(224, 255, 0, 0.9),
        0.3036914933em 0.4781598638em 7px rgba(255, 38, 0, 0.9),
        1.7161615755em 1.8592819377em 7px rgba(254, 0, 255, 0.9),
        1.6957269858em 1.0162448647em 7px rgba(211, 0, 255, 0.9),
        1.3407892544em 1.4218706874em 7px rgba(184, 0, 255, 0.9),
        1.4992695165em 1.5583249806em 7px rgba(255, 95, 0, 0.9),
        0.2335525587em 0.5237968202em 7px rgba(152, 255, 0, 0.9),
        1.2407911907em -0.1930030435em 7px rgba(255, 5, 0, 0.9),
        -0.2006787013em 0.3673145742em 7px rgba(0, 255, 11, 0.9),
        0.0673155225em 0.7515584675em 7px rgba(0, 201, 255, 0.9),
        0.5351022718em -0.1877734197em 7px rgba(170, 255, 0, 0.9),
        -0.2203470913em -0.3889364661em 7px rgba(0, 255, 26, 0.9),
        0.4730496461em 0.1838932722em 7px rgba(1, 0, 255, 0.9),
        0.5861433021em 1.5767708821em 7px rgba(255, 102, 0, 0.9),
        1.4811571965em 0.7327253165em 7px rgba(0, 220, 255, 0.9),
        0.3251367805em 1.2601225379em 7px rgba(210, 0, 255, 0.9),
        1.3044410084em 1.3488998844em 7px rgba(183, 0, 255, 0.9),
        0.1185386334em 0.81422611em 7px rgba(255, 0, 50, 0.9),
        1.9097710691em -0.022519205em 7px rgba(255, 94, 0, 0.9),
        0.1348971371em 0.4970802399em 7px rgba(0, 188, 255, 0.9),
        2.4743778016em 1.0568635271em 7px rgba(0, 134, 255, 0.9),
        0.5930206671em 1.8905180734em 7px rgba(0, 255, 57, 0.9),
        1.6282062987em 0.1195523286em 7px rgba(0, 255, 176, 0.9),
        -0.1421399072em 0.8099683573em 7px rgba(89, 0, 255, 0.9),
        1.5728323703em 0.0932031515em 7px rgba(255, 43, 0, 0.9),
        1.3638951781em 1.6571548437em 7px rgba(255, 0, 207, 0.9),
        -0.2437898731em -0.1324658955em 7px rgba(136, 0, 255, 0.9),
        0.3820582332em 1.3043130913em 7px rgba(69, 255, 0, 0.9),
        0.0579817293em 2.3438305546em 7px rgba(0, 255, 164, 0.9),
        2.3429657607em 1.421028542em 7px rgba(177, 0, 255, 0.9);
    animation-duration: 44s;
    animation-delay: -27s;
}

.home_card_animation::after {
    text-shadow: 0.1011801498em 0.7907169523em 7px rgba(255, 130, 0, 0.9),
    -0.4532614456em 0.9965858748em 7px rgba(255, 0, 74, 0.9),
    1.5990053106em 1.1221977923em 7px rgba(255, 177, 0, 0.9),
    -0.1020968991em -0.1085948536em 7px rgba(6, 255, 0, 0.9),
    0.3047722078em 0.4425308413em 7px rgba(209, 0, 255, 0.9),
    1.8871232284em 0.2386346662em 7px rgba(255, 0, 200, 0.9),
    0.929926255em 1.1273230966em 7px rgba(255, 228, 0, 0.9),
    1.9973091398em 2.1981728371em 7px rgba(255, 0, 221, 0.9),
    0.4902942465em 2.4881472981em 7px rgba(137, 0, 255, 0.9),
    1.8267923508em 1.2432111184em 7px rgba(255, 0, 246, 0.9),
    -0.4379761415em 0.1454749915em 7px rgba(0, 255, 213, 0.9),
    -0.2172771657em 2.3917276571em 7px rgba(140, 0, 255, 0.9),
    2.203850444em 0.8233426795em 7px rgba(255, 0, 71, 0.9),
    0.7743124632em 0.3966101988em 7px rgba(255, 0, 103, 0.9),
    0.7619935706em 1.2362851144em 7px rgba(0, 255, 193, 0.9),
    1.8859583728em 1.3961483684em 7px rgba(148, 0, 255, 0.9),
    1.0485615375em 2.1079367164em 7px rgba(56, 255, 0, 0.9),
    2.0875317887em 0.3043264721em 7px rgba(255, 0, 82, 0.9),
    -0.3823755724em 0.8346595304em 7px rgba(255, 9, 0, 0.9),
    0.274511527em 0.619628111em 7px rgba(255, 0, 144, 0.9),
    1.1742163469em 1.8620210747em 7px rgba(244, 255, 0, 0.9),
    0.5498208058em 1.0758375526em 7px rgba(0, 87, 255, 0.9),
    2.3373132615em 1.0378055309em 7px rgba(196, 255, 0, 0.9),
    -0.229426398em 1.388598267em 7px rgba(255, 0, 120, 0.9),
    1.7471071329em -0.4266936819em 7px rgba(0, 236, 255, 0.9),
    0.8946721358em 1.0109174689em 7px rgba(0, 255, 73, 0.9),
    1.8866925838em 2.1149672714em 7px rgba(255, 190, 0, 0.9),
    -0.178668907em 1.1065246655em 7px rgba(85, 0, 255, 0.9),
    0.7985426326em -0.4022185079em 7px rgba(0, 225, 255, 0.9),
    0.2649569979em 1.8745392769em 7px rgba(255, 64, 0, 0.9),
    0.4350025279em 0.1998732669em 7px rgba(12, 255, 0, 0.9),
    0.7941089959em 1.1311806599em 7px rgba(255, 0, 223, 0.9),
    -0.1154011096em -0.2579871656em 7px rgba(0, 57, 255, 0.9),
    1.1545375185em 1.6376331817em 7px rgba(255, 0, 254, 0.9),
    1.8082538793em 0.1863998788em 7px rgba(0, 139, 255, 0.9),
    1.7073650664em 1.8534745834em 7px rgba(0, 255, 83, 0.9),
    1.5033658758em -0.4038457545em 7px rgba(56, 255, 0, 0.9),
    0.4587191596em 1.6247714825em 7px rgba(255, 42, 0, 0.9),
    1.952203293em 0.315858809em 7px rgba(179, 0, 255, 0.9),
    -0.0671781311em 1.2324504252em 7px rgba(255, 0, 27, 0.9),
    -0.4016021329em 0.0497952223em 7px rgba(255, 0, 94, 0.9);
    animation-duration: 43s;
    animation-delay: -32s;
}

@keyframes move {
    from {
        transform: rotate(0deg) scale(14) translateX(-20px);
    }
    to {
        transform: rotate(360deg) scale(25) translateX(20px);
    }
}