body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#AA00FF)) fixed;

}
@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #3E1E68;
    overflow: hidden;
}

.background span {
    width: 13vmin;
    height: 13vmin;
    border-radius: 13vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 45;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #FFACAC;
    top: 18%;
    left: 59%;
    animation-duration: 11s;
    animation-delay: -14s;
    transform-origin: -15vw -7vh;
    box-shadow: -26vmin 0 3.802619733113306vmin currentColor;
}
.background span:nth-child(1) {
    color: #E45A84;
    top: 30%;
    left: 17%;
    animation-duration: 35s;
    animation-delay: -33s;
    transform-origin: -11vw 6vh;
    box-shadow: 26vmin 0 3.964229764526762vmin currentColor;
}
.background span:nth-child(2) {
    color: #E45A84;
    top: 7%;
    left: 78%;
    animation-duration: 17s;
    animation-delay: -32s;
    transform-origin: -16vw -6vh;
    box-shadow: 26vmin 0 4.086949088499592vmin currentColor;
}
.background span:nth-child(3) {
    color: #FFACAC;
    top: 38%;
    left: 25%;
    animation-duration: 11s;
    animation-delay: -28s;
    transform-origin: 0vw 14vh;
    box-shadow: 26vmin 0 4.209380571535561vmin currentColor;
}
.background span:nth-child(4) {
    color: #E45A84;
    top: 21%;
    left: 5%;
    animation-duration: 51s;
    animation-delay: -44s;
    transform-origin: 23vw 9vh;
    box-shadow: -26vmin 0 3.841386957227027vmin currentColor;
}
.background span:nth-child(5) {
    color: #FFACAC;
    top: 48%;
    left: 91%;
    animation-duration: 16s;
    animation-delay: -31s;
    transform-origin: -12vw 8vh;
    box-shadow: -26vmin 0 3.970169275158684vmin currentColor;
}
.background span:nth-child(6) {
    color: #FFACAC;
    top: 2%;
    left: 100%;
    animation-duration: 47s;
    animation-delay: -28s;
    transform-origin: -9vw -1vh;
    box-shadow: 26vmin 0 3.987898972054212vmin currentColor;
}
.background span:nth-child(7) {
    color: #E45A84;
    top: 58%;
    left: 27%;
    animation-duration: 23s;
    animation-delay: -34s;
    transform-origin: 24vw 10vh;
    box-shadow: 26vmin 0 3.877042362128295vmin currentColor;
}
.background span:nth-child(8) {
    color: #FFACAC;
    top: 66%;
    left: 48%;
    animation-duration: 47s;
    animation-delay: -7s;
    transform-origin: 9vw 4vh;
    box-shadow: 26vmin 0 3.642321048813592vmin currentColor;
}
.background span:nth-child(9) {
    color: #FFACAC;
    top: 99%;
    left: 91%;
    animation-duration: 21s;
    animation-delay: -9s;
    transform-origin: 18vw 7vh;
    box-shadow: 26vmin 0 3.492346254973575vmin currentColor;
}
.background span:nth-child(10) {
    color: #FFACAC;
    top: 79%;
    left: 90%;
    animation-duration: 18s;
    animation-delay: -39s;
    transform-origin: -22vw -15vh;
    box-shadow: 26vmin 0 3.403856509122874vmin currentColor;
}
.background span:nth-child(11) {
    color: #E45A84;
    top: 91%;
    left: 22%;
    animation-duration: 50s;
    animation-delay: -42s;
    transform-origin: 19vw -5vh;
    box-shadow: 26vmin 0 3.84715340224348vmin currentColor;
}
.background span:nth-child(12) {
    color: #E45A84;
    top: 90%;
    left: 9%;
    animation-duration: 18s;
    animation-delay: -42s;
    transform-origin: -19vw 17vh;
    box-shadow: 26vmin 0 4.089247283179291vmin currentColor;
}
.background span:nth-child(13) {
    color: #E45A84;
    top: 89%;
    left: 71%;
    animation-duration: 43s;
    animation-delay: -6s;
    transform-origin: 20vw 11vh;
    box-shadow: -26vmin 0 3.8338025030682332vmin currentColor;
}
.background span:nth-child(14) {
    color: #FFACAC;
    top: 5%;
    left: 32%;
    animation-duration: 52s;
    animation-delay: -48s;
    transform-origin: 5vw 19vh;
    box-shadow: 26vmin 0 3.9338808339320916vmin currentColor;
}
.background span:nth-child(15) {
    color: #583C87;
    top: 14%;
    left: 24%;
    animation-duration: 33s;
    animation-delay: -13s;
    transform-origin: -10vw -16vh;
    box-shadow: -26vmin 0 3.337194797293534vmin currentColor;
}
.background span:nth-child(16) {
    color: #583C87;
    top: 45%;
    left: 31%;
    animation-duration: 53s;
    animation-delay: -18s;
    transform-origin: -8vw -15vh;
    box-shadow: -26vmin 0 3.359696640307688vmin currentColor;
}
.background span:nth-child(17) {
    color: #E45A84;
    top: 27%;
    left: 66%;
    animation-duration: 7s;
    animation-delay: -48s;
    transform-origin: 24vw 1vh;
    box-shadow: 26vmin 0 3.490922365939131vmin currentColor;
}
.background span:nth-child(18) {
    color: #FFACAC;
    top: 39%;
    left: 29%;
    animation-duration: 7s;
    animation-delay: -21s;
    transform-origin: 19vw 14vh;
    box-shadow: -26vmin 0 3.6745445729423687vmin currentColor;
}
.background span:nth-child(19) {
    color: #FFACAC;
    top: 64%;
    left: 95%;
    animation-duration: 28s;
    animation-delay: -49s;
    transform-origin: -17vw -21vh;
    box-shadow: 26vmin 0 3.344286654501926vmin currentColor;
}
.background span:nth-child(20) {
    color: #FFACAC;
    top: 22%;
    left: 90%;
    animation-duration: 19s;
    animation-delay: -16s;
    transform-origin: -3vw -20vh;
    box-shadow: -26vmin 0 3.323030787057642vmin currentColor;
}
.background span:nth-child(21) {
    color: #E45A84;
    top: 18%;
    left: 82%;
    animation-duration: 22s;
    animation-delay: -43s;
    transform-origin: -23vw -18vh;
    box-shadow: -26vmin 0 3.6175282955679573vmin currentColor;
}
.background span:nth-child(22) {
    color: #E45A84;
    top: 68%;
    left: 99%;
    animation-duration: 35s;
    animation-delay: -31s;
    transform-origin: -6vw 1vh;
    box-shadow: -26vmin 0 3.959797201342181vmin currentColor;
}
.background span:nth-child(23) {
    color: #583C87;
    top: 36%;
    left: 35%;
    animation-duration: 11s;
    animation-delay: -47s;
    transform-origin: -23vw -14vh;
    box-shadow: 26vmin 0 4.144165311667513vmin currentColor;
}
.background span:nth-child(24) {
    color: #FFACAC;
    top: 22%;
    left: 56%;
    animation-duration: 7s;
    animation-delay: -44s;
    transform-origin: -10vw 5vh;
    box-shadow: -26vmin 0 4.241106010270629vmin currentColor;
}
.background span:nth-child(25) {
    color: #583C87;
    top: 85%;
    left: 73%;
    animation-duration: 11s;
    animation-delay: -38s;
    transform-origin: 24vw 22vh;
    box-shadow: -26vmin 0 3.6624943313240808vmin currentColor;
}
.background span:nth-child(26) {
    color: #FFACAC;
    top: 60%;
    left: 18%;
    animation-duration: 15s;
    animation-delay: -47s;
    transform-origin: 13vw 9vh;
    box-shadow: -26vmin 0 3.892167844246371vmin currentColor;
}
.background span:nth-child(27) {
    color: #583C87;
    top: 48%;
    left: 71%;
    animation-duration: 22s;
    animation-delay: -7s;
    transform-origin: 1vw -16vh;
    box-shadow: 26vmin 0 4.051192021420741vmin currentColor;
}
.background span:nth-child(28) {
    color: #583C87;
    top: 73%;
    left: 56%;
    animation-duration: 21s;
    animation-delay: -44s;
    transform-origin: -5vw -17vh;
    box-shadow: 26vmin 0 4.144443322998068vmin currentColor;
}
.background span:nth-child(29) {
    color: #583C87;
    top: 24%;
    left: 90%;
    animation-duration: 22s;
    animation-delay: -3s;
    transform-origin: 1vw -8vh;
    box-shadow: -26vmin 0 4.236623426979082vmin currentColor;
}
.background span:nth-child(30) {
    color: #FFACAC;
    top: 83%;
    left: 14%;
    animation-duration: 32s;
    animation-delay: -27s;
    transform-origin: 10vw 12vh;
    box-shadow: 26vmin 0 3.481964924855329vmin currentColor;
}
.background span:nth-child(31) {
    color: #583C87;
    top: 42%;
    left: 90%;
    animation-duration: 54s;
    animation-delay: -35s;
    transform-origin: -15vw -16vh;
    box-shadow: -26vmin 0 3.5045940324989506vmin currentColor;
}
.background span:nth-child(32) {
    color: #E45A84;
    top: 49%;
    left: 3%;
    animation-duration: 44s;
    animation-delay: -29s;
    transform-origin: -8vw -16vh;
    box-shadow: -26vmin 0 4.082683077740681vmin currentColor;
}
.background span:nth-child(33) {
    color: #E45A84;
    top: 82%;
    left: 56%;
    animation-duration: 16s;
    animation-delay: -37s;
    transform-origin: 3vw 17vh;
    box-shadow: -26vmin 0 3.7189804401660536vmin currentColor;
}
.background span:nth-child(34) {
    color: #583C87;
    top: 27%;
    left: 43%;
    animation-duration: 48s;
    animation-delay: -13s;
    transform-origin: -15vw -7vh;
    box-shadow: -26vmin 0 3.4006657791718773vmin currentColor;
}
.background span:nth-child(35) {
    color: #E45A84;
    top: 70%;
    left: 56%;
    animation-duration: 43s;
    animation-delay: -45s;
    transform-origin: -18vw -16vh;
    box-shadow: 26vmin 0 3.501229788579772vmin currentColor;
}
.background span:nth-child(36) {
    color: #E45A84;
    top: 66%;
    left: 62%;
    animation-duration: 38s;
    animation-delay: -20s;
    transform-origin: -4vw 11vh;
    box-shadow: -26vmin 0 4.122795261041001vmin currentColor;
}
.background span:nth-child(37) {
    color: #FFACAC;
    top: 84%;
    left: 40%;
    animation-duration: 51s;
    animation-delay: -26s;
    transform-origin: -17vw 3vh;
    box-shadow: -26vmin 0 4.028106752114463vmin currentColor;
}
.background span:nth-child(38) {
    color: #FFACAC;
    top: 42%;
    left: 18%;
    animation-duration: 33s;
    animation-delay: -8s;
    transform-origin: -2vw 13vh;
    box-shadow: -26vmin 0 3.8637947181550025vmin currentColor;
}
.background span:nth-child(39) {
    color: #E45A84;
    top: 61%;
    left: 19%;
    animation-duration: 53s;
    animation-delay: -19s;
    transform-origin: -20vw -14vh;
    box-shadow: 26vmin 0 4.019257950904054vmin currentColor;
}
.background span:nth-child(40) {
    color: #E45A84;
    top: 81%;
    left: 48%;
    animation-duration: 15s;
    animation-delay: -44s;
    transform-origin: 9vw -3vh;
    box-shadow: 26vmin 0 3.3358562382155084vmin currentColor;
}
.background span:nth-child(41) {
    color: #583C87;
    top: 29%;
    left: 53%;
    animation-duration: 51s;
    animation-delay: -30s;
    transform-origin: 7vw 8vh;
    box-shadow: -26vmin 0 3.648008263613136vmin currentColor;
}



.fixedbar {
background: #630E8E; 
bottom: 0px; 
color:#fff; 
left:0; 
padding: 0px 0; 
position:fixed; 
width:100%; 
z-index:9999; 
float:left; 
vertical-align:middle; 
text-align:center;
opacity: 0.95; 
border-top:3px solid white;
}
.boxfloat {
width:468px; 
margin-left:auto;
margin-right:auto;
}


#uploader{
    margin-top: 25px;
    padding: 0em;
    position: relative;
    height: 150px;
    background-color:#D4D4FF;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
}

#progresswrap{
max-width:600px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
border:1px solid white;
padding:5px;
height:40px;
}

#youtube{
max-width:600px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
border:1px solid white;
padding:5px 0 5px 5px;
height:40px;
}

#youtube .youtubeid{
color:white;
margin:0 5px 0 5px;
width:150px;
}

#youtube label{
color:white;
font-weight:bold;
}

#btnyoutube{
padding:4px 0 4px 0;


}

#myheader{

    background-color:#630E8E;
    color:#ffffff;
    position:fixed;
    width:100%;
    border-bottom:3px solid white;
    margin:0px 0 5px 0;
    padding:10px 0 1px 0;
    z-index:9999;
    
}

#uploader>.header {
    padding-top: 2em;
    padding-bottom: .5em;
   
}

#uploader #upload {
    z-index: 5;
    font-size: 30px;
    cursor: pointer;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
    }

#stems {
    margin-top: 25px;
}

#checkbox {
    margin-top: 35px;
    margin-left: 20px;
}

#checkbox label{color:white;}
  label:before {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(99, 14, 142, 0.3);
    background-color: #630E8E;
     }


#loader.active {
    margin: 25px auto;
    color:#ffffff;
    font-size:16px;
    font-weight:bold;
}
#done {
    text-align: center;
}

i.icon {
    position: relative;
}

i.icon svg {
    font-size: inherit;
    height: 1.25em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

@media only screen and (max-width: 400px) {
 
.boxfloat {
width:468px; 
margin-left:-75px;
left:0px;
} 

.header{
margin-left:-10px;
left:0px;
}

}