@import url('https://fonts.googleapis.com/css2?family=Mystery+Quest&display=swap');
.mystery-quest-regular {
  font-family: "Mystery Quest", system-ui;
  font-weight: 600;
  font-style: normal;
}

 body {
    box-sizing: border-box;
 } 

 #Animation{
            margin: 0 auto;
            padding: 0;
            width: 1024px;
            height: 768px;
            background: url(./images/halloween-bg.jpg) no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
            position: relative;
            border: 20px double rgb(170, 128, 20);
            box-shadow: inset 0px 0px 20px #555; 
            z-index: 1;           
        }

        .shadow {
            content: "";
            position: relative;
            margin: 0 auto;
            background-color: rgb(75, 75, 75);
            width: 1024px;
            height: 768px;
            z-index: 0;
            left: 40px;
            top: -750px;
            filter: blur(30px);
            opacity: 0.5;
        }

        .b-container {
            width: 300px; 
            height: 325px;
            position: absolute;
            top: calc(50% - 300px);
            left: calc(50% - 325px);
            animation: fly 6s ease-in-out forwards;
            transform-origin: center center;
        }

        .candy {
            scale: 50%;
            width: 300px; 
            height: 325px;
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
            animation: candies 1s infinite alternate ease-in-out;
            z-index: 2;
        }

        .text {
            font-size: 8em;
            color: purple;
            position: absolute;
            width: 100%;
            opacity: 0;
            text-align: center;
            text-shadow: 3px 3px 5px #999;
            animation: fadein 1s ease-in forwards;
            animation-delay: 2s;
        }
        
        .text > span {
            display: inline-block;
            position: relative;
            font-size: 2em;
            top: 18px;
            /* left: 10%; */
            margin-left: -12%;
        }

        @keyframes candies {
            0%  { 
                 background-image: url(./images/candy1.png);
                 }
            50% {
                 background-image: url(./images/candy2.png);
                } 
            100% { 
                background-image: url(./images/candy4.png);
                }
        }

        @keyframes fly {
            0% {
                top: calc(50% - 300px);
                left: calc(50% - 225px);
                z-index: 10;
            }
            30% {
                top: calc(40% - 150px);
                left: calc(68% - 125px);
                transform: rotate(20deg) scale(.8);
                z-index: 10;
            }
            50% {
                top: calc(78% - 150px);
                left: calc(90% - 125px);
                transform: rotate(-30deg) scale(1.5);
                z-index: 10;
            }
            80% {
                top: calc(19% - 150px);
                left: calc(15% - 125px);
                transform: rotate(60deg);
                z-index: 10;
            }
            100% {
                top: calc(50% - 300px);
                left: calc(50% - 225px);
                transform: rotate(0deg);
                z-index: 10;
            }
        }

        @keyframes fadein {
            from {
                opacity: 0;
                top: 0%;
            }
            to {
                opacity: 1;
                top: 20%;
            }
        }