/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 2 version,>1%
* Based on /style.source.css
*/
.background-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-image: url("./fallback.png");
    background-size: cover;
    background-position: center center;
}
@supports (mix-blend-mode: lighten) and (height: max(10px, 20px)){
    .background-container {
        background: #1E002E;
    }
    .background-container__wrapper--inner{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        will-change: transform;
        -webkit-animation: background-container__wrapper 300s linear;
        animation: background-container__wrapper 300s linear;
        -webkit-animation-iteration-count: 5;
        animation-iteration-count: 5;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .background-container__item {
        position: absolute;
        display: block;
        width: 100%;
        top: 50%;
        right: 50%;
        -webkit-transform-origin: right top;
        transform-origin: right top;
        -webkit-animation: background-container__item 300s cubic-bezier(.3,0,.7,1);
        animation: background-container__item 300s cubic-bezier(.3,0,.7,1);
        -webkit-animation-iteration-count: 2.9;
        animation-iteration-count: 2.9;
        -webkit-animation-delay: -30s;
        animation-delay: -30s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        opacity: 75%;
        height: 5px;
        border-radius: 50vw;
        mix-blend-mode: lighten;
        will-change: height;
    }

    .background-container__item::before {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        border-radius: inherit;
        content: '';
        background: inherit;
        opacity: 50%;
        -webkit-transform: rotate(13deg);
        transform: rotate(13deg);
        -webkit-transform-origin: 25% top;
        transform-origin: 25% top;
        will-change: height;
    }

    .background-container__item--1 {
        background-color: #00C472;
        -webkit-transform: rotate(0deg) translate(75%, -250px);
        transform: rotate(0deg) translate(75%, -250px)
    }

    .background-container__item--2 {
        background-color: #00B9C5;
        -webkit-transform: rotate(30deg) translate(75%, -250px);
        transform: rotate(30deg) translate(75%, -250px)
    }

    .background-container__item--3 {
        background-color: #0099FF;
        -webkit-transform: rotate(60deg) translate(75%, -250px);
        transform: rotate(60deg) translate(75%, -250px)
    }

    .background-container__item--4 {
        background-color: #1C5BFF;
        -webkit-transform: rotate(90deg) translate(75%, -250px);
        transform: rotate(90deg) translate(75%, -250px)
    }

    .background-container__item--5 {
        background-color: #8573FF;
        -webkit-transform: rotate(120deg) translate(75%, -250px);
        transform: rotate(120deg) translate(75%, -250px)
    }

    .background-container__item--6 {
        background-color: #9C4EFF;
        -webkit-transform: rotate(150deg) translate(75%, -250px);
        transform: rotate(150deg) translate(75%, -250px)
    }

    .background-container__item--7 {
        background-color: #C92FA7;
        -webkit-transform: rotate(180deg) translate(75%, -250px);
        transform: rotate(180deg) translate(75%, -250px)
    }

    .background-container__item--8 {
        background-color: #CE0000;
        -webkit-transform: rotate(210deg) translate(75%, -250px);
        transform: rotate(210deg) translate(75%, -250px)
    }

    .background-container__item--9 {
        background-color: #F4A11E;
        -webkit-transform: rotate(240deg) translate(75%, -250px);
        transform: rotate(240deg) translate(75%, -250px)
    }

    .background-container__item--10 {
        background-color: #FFC700;
        -webkit-transform: rotate(270deg) translate(75%, -250px);
        transform: rotate(270deg) translate(75%, -250px)
    }

    .background-container__item--11 {
        background-color: #C6CD37;
        -webkit-transform: rotate(300deg) translate(75%, -250px);
        transform: rotate(300deg) translate(75%, -250px)
    }

    .background-container__item--12 {
        background-color: #57D8A2;
        -webkit-transform: rotate(330deg) translate(75%, -250px);
        transform: rotate(330deg) translate(75%, -250px)
    }

    @-webkit-keyframes background-container__wrapper {
        from {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
        }
    }

    @keyframes background-container__wrapper {
        from {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
        }
    }

    @-webkit-keyframes background-container__item {

        0% {
            height: 5px;
        }
        50% {
            height: 300px;
        }
    }

    @keyframes background-container__item {

        0% {
            height: 5px;
        }
        50% {
            height: 300px;
        }
    }
}