@media (orientation: portrait) {
    svg {
        position: absolute;
        transform: rotate(30deg);
        top: 0;
        right: 0;
        width: 50%;
    }
}

@media (orientation: landscape) {
    svg {
        top: 2%;
        left: 1%;
        position: absolute;
        width: 25%;
        height: 10%;
        transform: rotate(-10deg);
    }
}

#svgGroup {
    animation: fill 10s forwards infinite;
}

#svgGroup path:nth-child(1) {
    stroke-dasharray: 743;
    stroke-dashoffset: 743;
    animation: line-anm 2s forwards 300ms;
}

#svgGroup path:nth-child(2) {
    stroke-dasharray: 743;
    stroke-dashoffset: 743;
    animation: line-anm 2s forwards 600ms;
}

#svgGroup path:nth-child(3) {
    stroke-dasharray: 743;
    stroke-dashoffset: 743;
    animation: line-anm 2s forwards 700ms;
}

#svgGroup path:nth-child(4) {
    stroke-dasharray: 518;
    stroke-dashoffset: 518;
    animation: line-anm 2s forwards 900ms;
}

#svgGroup path:nth-child(5) {
    stroke-dasharray: 514;
    stroke-dashoffset: 514;
    animation: line-anm 2s forwards 1s;
}

#svgGroup path:nth-child(6) {
    stroke-dasharray: 614;
    stroke-dashoffset: 614;
    animation: line-anm 2s forwards 1s;
}

@keyframes line-anm {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fill {
    0% {
        fill: transparent;
    }

    25% {
        fill: rgba(149, 209, 108, 0.87);
    }

    75% {
        fill: rgb(72, 189, 225);
    }

    100% {
        fill: transparent;
    }
}