#loginContainer{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}#loginContainer #loginForm{box-shadow:#959da533 0 8px 24px;width:80%;padding:5rem;box-sizing:border-box}#loginButton{margin-top:2rem;margin-left:auto;float:right}@media only screen and (min-width: 768px){#loginForm{width:600px}}.area{z-index:0;position:absolute;top:0;left:0;background:#4e54c8;background:linear-gradient(to left,#121212,#222222);width:100%;height:100vh;overflow:hidden}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:rgba(255,255,255,.2);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(10){left:85%;width:150px;height:150px;animation-delay:0s;animation-duration:11s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.progress-area{height:6px;width:100%;border-radius:50px;background:#f0f0f0;cursor:pointer}.progress-area .progress-bar{height:inherit;width:0%;position:relative;border-radius:inherit;background:green}.progress-bar:before{content:"";position:absolute;height:12px;width:12px;border-radius:50%;top:50%;right:-5px;z-index:2;opacity:0;pointer-events:none;transform:translateY(-50%);background:inherit;transition:opacity .2s ease}.progress-area:hover .progress-bar:before{opacity:1;pointer-events:auto}.progress-area .song-timer{margin-top:2px;display:flex;align-items:center;justify-content:space-between}.song-timer span{font-size:13px;color:#fff}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Futura,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.muted-text{color:#6c757d}