* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.container {
    background-image: linear-gradient(45deg, rgb(248, 176, 68), rgb(160, 242, 255));
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: space-evenly;
    align-items: center;
}

.film {
    background-color:rgb(241, 173, 101);
    display: flex;
    width: 100vw;
    height: 100vh;
    opacity: 0.3;

    z-index: 4;
}

.text {
    color: white;
    font-size: 100px;
    position: fixed;
    left: 650px;
    bottom: 250px;
    z-index: 6;
}

.guide {
    background-color: rgb(255, 252, 249);
    width: 4vw;
    height: 4vw;
    border-radius: 100%;
    position: fixed;

    bottom: 20px;
    left: 20px;

    z-index: 5;
}

.orb {
    background-image: linear-gradient(45deg, rgb(226, 136, 52), rgb(171, 231, 137));
    width: 15vw;
    height: 15vw;
    border-radius: 100%;
    position: fixed;
    filter: blur(7px);

    animation: orb1 30s infinite alternate linear;
    z-index: 2;
}

@keyframes orb1 {
    0% {
        background-image: linear-gradient(45deg, rgb(255, 151, 53), rgb(178, 255, 133));
        transform: scale(1) translatex(1vw);
    }

    50% {
        background-image: linear-gradient(45deg, rgb(226, 185, 52), rgb(178, 231, 137));
        transform: scale(2) translatex(17.5vw);
    }

    100% {
        background-image: linear-gradient(45deg, rgb(255, 151, 53), rgb(178, 255, 133));
        transform: scale(3) translatex(-10vw);
    }
}

.orb2 {
    background-image: linear-gradient(45deg, rgb(255, 141, 75), rgb(255, 167, 180));
    width: 10vw;
    height: 10vw;
    border-radius: 100%;
    position: fixed;
    filter: blur(7px);

    animation: orb2 35s infinite alternate both linear;
    z-index: 3;
}


@keyframes orb2 {
    0% {
        background-color: rgb(255, 150, 37);
        transform: scale(1) translatey(10vw) translatex(1vw);
    }

    50% {
        background-color: rgb(255, 139, 179);
        transform: scale(3) translatey(-7vw) translatex(-20vw);
    }

    100% {
        background-color: rgb(250, 141, 62);
        transform: scale(1) translatey(5vw) translatex(13vw);
    }
}

.orb3 {
    background-image: linear-gradient(45deg, rgb(255, 127, 170), rgb(171, 231, 137));
    width: 20vw;
    height: 20vw;
    border-radius: 100%;
    position: fixed;
    filter: blur(7px);

    animation: orb3 55s infinite alternate linear;

    z-index: 1;
}

@keyframes orb3 {
    0% {
        background-image: linear-gradient(45deg, rgb(255, 127, 170), rgb(168, 249, 121));
        transform: scale(1) translatey(1vw) translatex(8vw);
    }

    50% {
        background-image: linear-gradient(45deg, rgb(129, 255, 117), rgb(255, 160, 190));
        transform: scale(3) translatey(8vw) translatex(-10vw);
    }

    100% {
        background-image: linear-gradient(45deg, rgb(255, 127, 170), rgb(171, 231, 137));
        transform: scale(2) translatey(-4vw) translatex(16vw);
    }
}