.animateHeart {
    animation-name: move-part-1;
    animation-duration: 6s;
    animation-fill-mode: forwards;
}

.display {
    /* Not display due to animation rules */
    visibility: visible !important;
}

#diamondBearCard, #evilQueenCard, #jesterBearCard, #clubKingCard{
    visibility: hidden;
    -webkit-animation-duration: 1s;
        animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    position: relative;
    /* will-change: transform; */
}

#diamondBearCard {
    width: 275px;
}

.animateDiamondBearCard {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
    -webkit-animation-name: swivel-left-diamond-bear-card;
            animation-name: swivel-left-diamond-bear-card;
}

#evilQueenCard {
    width: 250px;
}

.animateEvilQueenCard {
	-webkit-animation-name: swivel-left-evil-queen-card;
	        animation-name: swivel-left-evil-queen-card;
}

#jesterBearCard {
	width: 200px;
}

.animateJesterBearCard {
    -webkit-animation-name: swivel-left-jester-bear-card;
            animation-name: swivel-left-jester-bear-card;
}

#clubKingCard {
    width: 300px;
}

.animateClubKingCard {
    -webkit-animation-name: swivel-left-club-king-card;
            animation-name: swivel-left-club-king-card;
}

@-webkit-keyframes swivel-left-diamond-bear-card {
    from {
        -webkit-transform: translate(500px, -500px) rotate(-90deg);
    }
    to {
        -webkit-transform: translate(-100px, 0px) rotate(-30deg);
    }
}

@keyframes swivel-left-diamond-bear-card {
    from {
        transform: translate(500px, -500px) rotate(-90deg);
    }
    to {
        transform: translate(-100px, 0) rotate(-30deg);
    }
}

@-webkit-keyframes swivel-left-evil-queen-card {
    from {
        -webkit-transform: translate(500px, 100px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(150px, 20px) rotate(20deg);
    }
}

@keyframes swivel-left-evil-queen-card {
    from {
        transform: translate(500px, 100px) rotate(0deg);
    }
    to {
        transform: translate(150px, 20px) rotate(20deg);
    }
}

@-webkit-keyframes swivel-left-jester-bear-card {
    from {
        -webkit-transform: translate(500px, -200px) rotate(-70deg);
    }
    to {
        -webkit-transform: translate(-100px, 0) rotate(-10deg);
    }
}

@keyframes swivel-left-jester-bear-card {
    from {
        transform: translate(500px, -200px) rotate(-70deg);
    }
    to {
        transform: translate(-100px, 0) rotate(-10deg);
    }
}

@-webkit-keyframes swivel-left-club-king-card {
    from {
        -webkit-transform: translate(500px, 500px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(100px, 0) rotate(35deg);
    }
}

@keyframes swivel-left-club-king-card {
    from {
        transform: translate(500px, 500px) rotate(0deg);
    }
    to {
        transform: translate(100px, 0) rotate(35deg);
    }
}

@keyframes move-part-1 {
    0% {
        height: 0px;
    }

    100% {
        height: 2000px;
    }
}


/* merged.css */
#sun {
    -webkit-animation-name: enter-from-right;
            animation-name: enter-from-right;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@-webkit-keyframes enter-from-right {
    from {
        -webkit-transform: translate(200px, 4px);
    }
    to {
        -webkit-transform: translate(0, 10px);
    }
}
@keyframes enter-from-right {
    from {
            transform: translate(200px, 4px);
    }
    to {
            transform: translate(0, 10px);
    }
}

#cloud-1 {
    animation-name: moverightCloud1;
    animation-duration: 300s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#cloud-2 {
    animation-name: moverightCloud2;
    animation-duration: 150s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#cloud-3 {
    animation-name: moverightCloud3;
    animation-duration: 300s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#cloud-4 {
    animation-name: moverightCloud4;
    animation-duration: 150s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes moverightCloud1 {
    0% {
        transform: translate(0,0);
    }

    60% {
        transform: translate(600px, 0);
    }

    61% {
        transform: translate(600px, -500px);
    }

    62% {
        transform: translate(-85px, -500px);
    }

    80% {
        transform: translate(-85px, 0px);
    }

    100% {
        transform: translate(0,0);
    }
}

@keyframes moverightCloud2 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(200px, 0);
    }
    51% {
        transform: translate(200px, -500px);
    }
    52% {
        transform: translate(-500px, -500px);
    }
    60% {
        transform: translate(-500px, 0);
    }
    100% {
        transform: translate(0,0);
    }
}

@keyframes moverightCloud3 {
    0% {
        transform: translate(0, 0);
}
50% {
        transform: translate(350px, 0);
}
51% {
        transform: translate(350px, -500px);
}
52% {
        transform: translate(-500px, -500px);
}
60% {
        transform: translate(-500px, 0);
}
100% {
        transform: translate(0,0);
}
}

@keyframes moverightCloud4 {
    0% {
        transform: translate(0, 0);
    }
    40% {
        transform: translate(300px, 0);
    }
    41% {
        transform: translate(300px, -500px);
    }
    42% {
        transform: translate(-500px, -500px);
    }
    43% {
        transform: translate(-400px, 0);
    }
    100% {
        transform: translate(0,0);
    }
}

#background {
    transform: translate(0, -17vh);
    /* use vw due to resize */
}

@media only screen and (max-width: 768px) {
    #background {
        transform: translate(0, calc(90vh - 75vw));
        /* use vw due to resize */
    }
    #clouds {
        transform: translate(0, calc(5vh));
    }
}