body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","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}*,body{box-sizing:border-box}body{display:flex;justify-content:center;align-items:center;flex-direction:row;height:100vh;padding:100px 50px 50px;margin:0;background-image:linear-gradient(332deg,#0a062b,#3e0f42)}.display-container{width:1000px;height:500px;position:relative;padding:25px}.display-container .header-container{display:flex;flex-direction:row;width:100%;position:absolute;top:0;left:0}.display-container .header-container:after{display:block;content:"";position:absolute;right:0;width:58%;height:7px;background-color:#fff;box-shadow:0 0 15px #dc29ec,0 0 5px 2px #e25dee}.display-container .header-container #tunatunr-logo{height:100px;min-width:40%;width:20px;margin-top:-100px}.display-container .header-container #tunatunr-logo svg{z-index:10;width:425px;height:107px;-webkit-filter:drop-shadow(0 0 10px #dc29ec) drop-shadow(0 0 2px #e054ec);filter:drop-shadow(0 0 10px #dc29ec) drop-shadow(0 0 2px #e054ec)}.display-container .header-container #tunatunr-logo svg g path{fill:#fff;stroke:#fff}.display-container .header-container #tunatunr-logo #logo-dash{fill:none}.display-container .tagline-container{position:absolute;top:0;right:0;color:#33dbdb;font-family:sans-serif;font-size:20px;font-style:italic;letter-spacing:1px;margin-top:-30px}.display-container .tagline-container span{font-weight:700;font-style:oblique;text-shadow:5px 0 rgba(204,255,18,.4)}.display-container .content-container{display:flex;flex-flow:column nowrap;height:100%;padding:15px;outline:2px solid rgba(204,255,18,.6)}.display-container .content-container:before{bottom:0;left:0;height:94%}.display-container .content-container:after,.display-container .content-container:before{display:block;content:"";position:absolute;width:7px;background-color:#fff;box-shadow:0 0 15px #dc29ec,0 0 5px 2px #e25dee}.display-container .content-container:after{top:0;right:0;height:100%}.display-container .content-container .content-container-title{border-bottom:1px solid rgba(204,255,18,.6)}.display-container .content-container .content-container-title ul{display:flex;justify-content:space-around;margin:0 0 10px}.display-container .content-container .content-container-title ul li{list-style-type:none;font-style:oblique;text-transform:lowercase;color:#ccff12}.display-container .content-container .content-container-container{overflow:hidden;overflow-y:visible;padding:1px;margin-top:10px}.display-container .content-container .content-container-container .song-container{display:-ms-grid;display:grid;-ms-grid-columns:5fr 4fr 5fr 1fr 25px 25px;grid-template-columns:5fr 4fr 5fr 1fr 25px 25px;grid-gap:10px;gap:10px;padding:10px;width:100%;outline:1px solid #33dbdb;color:#f7c5fc;margin-bottom:10px}.display-container .content-container .content-container-container .song-container .song-album,.display-container .content-container .content-container-container .song-container .song-artist,.display-container .content-container .content-container-container .song-container .song-time,.display-container .content-container .content-container-container .song-container .song-title{display:flex;align-items:center}.display-container .content-container .content-container-container .song-container .song-title{font-weight:500;color:#fff}.display-container .content-container .content-container-container .song-container .heart{cursor:pointer;height:100%;width:20px}.display-container .content-container .content-container-container .song-container .heart path{fill:#aaa1a1}.display-container .content-container .content-container-container .song-container .heart.active{-webkit-filter:drop-shadow(0 0 10px #dc29ec) drop-shadow(0 0 2px #e054ec);filter:drop-shadow(0 0 10px #dc29ec) drop-shadow(0 0 2px #e054ec)}.display-container .content-container .content-container-container .song-container .heart.active path{fill:#fff}.display-container .content-container .content-container-container .song-container .song-delete{color:#33dbdb}.display-container .display-container-bottom{position:absolute;bottom:0;left:0;width:100%;height:7px;background-color:#fff;box-shadow:0 0 15px #dc29ec,0 0 5px 2px #e25dee}.bottom-container{max-width:1000px;max-height:300px;display:-ms-grid;display:grid;-ms-grid-columns:2fr 1fr;grid-template-columns:2fr 1fr;grid-gap:30px;gap:30px;margin-top:30px}.bottom-container .favorite-container{width:100%;border:1px solid #33dbdb}.bottom-container .favorite-container .inner-container{margin:10px;border:2px solid #e25dee;height:225px;overflow:hidden;overflow-y:visible}.bottom-container .favorite-container .inner-container .song-container{display:-ms-grid;display:grid;-ms-grid-columns:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;border:1px solid #33dbdb;color:#33dbdb;font-size:14px;padding:5px;margin:10px}.bottom-container .favorite-container .inner-container .song-container .song-title{color:#f7c5fc}.bottom-container .form-container{display:flex;flex-flow:column nowrap;align-items:flex-end}.bottom-container .form-container .form-title{color:#40e0d0;text-transform:lowercase;font-family:sans-serif;font-style:oblique;font-size:20px;letter-spacing:1px;margin-bottom:10px}.bottom-container .form-container .form-title span{font-weight:700;font-style:oblique;text-shadow:5px 0 rgba(204,255,18,.4)}.bottom-container .form-container .form-body{display:flex;flex-flow:column nowrap}.bottom-container .form-container .form-body input{width:350px;padding:7px 7px 7px 10px;margin-bottom:10px;font-size:16px;color:#fff;background-color:rgba(62,15,66,0);border:1px solid #33dbdb}.bottom-container .form-container .form-body input:focus{border:1px solid #fff;box-shadow:0 0 10px violet}.bottom-container .form-container .form-body ::-webkit-input-placeholder{color:rgba(204,255,18,.6);font-family:sans-serif;font-size:16px;font-style:oblique;letter-spacing:1px}.bottom-container .form-container .form-body :-ms-input-placeholder{color:rgba(204,255,18,.6);font-family:sans-serif;font-size:16px;font-style:oblique;letter-spacing:1px}.bottom-container .form-container .form-body ::placeholder{color:rgba(204,255,18,.6);font-family:sans-serif;font-size:16px;font-style:oblique;letter-spacing:1px}.bottom-container .form-container .form-body .form-submit{cursor:pointer;color:#fff;font-size:18px;background-color:rgba(216,18,255,.2);border:1px solid #fb8eff;margin:0}.bottom-container .form-container .form-body .form-submit:hover{border:1px solid #fff;box-shadow:0 0 10px violet}#loading-icon{position:relative;width:100%;height:100%}#loading-icon .loading-message{position:absolute;top:65%;left:0;right:0;display:flex;flex-flow:column wrap;justify-content:center;align-items:center;text-align:center;color:olive;font-family:sans-serif;font-style:oblique}#loading-icon .loading-message div{width:60%;margin-bottom:5px}#loading-icon .cssload-dots{width:0;height:0;position:absolute;top:45%;left:0;right:0;margin:auto;outline:1px solid red;filter:url(#goo);-o-filter:url(#goo);-ms-filter:url(#goo);-webkit-filter:url(#goo);-moz-filter:url(#goo)}#loading-icon .cssload-dot{width:0;height:0;position:absolute;left:0;top:0}#loading-icon .cssload-dot:before{content:"";width:27px;height:27px;border-radius:39px;background:#ff813d;position:absolute;left:50%;transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);margin-left:-13.5px;margin-top:-13.5px}#loading-icon .cssload-dot:nth-child(5):before{z-index:100;width:30px;height:30px;margin-left:-17.75px;margin-top:-17.75px;animation:cssload-dot-colors 2.8s ease infinite;-o-animation:cssload-dot-colors 2.8s ease infinite;-ms-animation:cssload-dot-colors 2.8s ease infinite;-webkit-animation:cssload-dot-colors 2.8s ease infinite;-moz-animation:cssload-dot-colors 2.8s ease infinite}#loading-icon .cssload-dot:first-child{animation:cssload-dot-rotate-1 2.8s linear 0s infinite;-o-animation:cssload-dot-rotate-1 2.8s 0s linear infinite;-ms-animation:cssload-dot-rotate-1 2.8s 0s linear infinite;-webkit-animation:cssload-dot-rotate-1 2.8s linear 0s infinite;-moz-animation:cssload-dot-rotate-1 2.8s 0s linear infinite}#loading-icon .cssload-dot:first-child:before{background-color:#f3f;animation:cssload-dot-move 2.8s ease 0s infinite;-o-animation:cssload-dot-move 2.8s 0s ease infinite;-ms-animation:cssload-dot-move 2.8s 0s ease infinite;-webkit-animation:cssload-dot-move 2.8s ease 0s infinite;-moz-animation:cssload-dot-move 2.8s 0s ease infinite}#loading-icon .cssload-dot:nth-child(2){animation:cssload-dot-rotate-2 2.8s linear .7s infinite;-o-animation:cssload-dot-rotate-2 2.8s .7s linear infinite;-ms-animation:cssload-dot-rotate-2 2.8s .7s linear infinite;-webkit-animation:cssload-dot-rotate-2 2.8s linear .7s infinite;-moz-animation:cssload-dot-rotate-2 2.8s .7s linear infinite}#loading-icon .cssload-dot:nth-child(2):before{background-color:#6bffff;animation:cssload-dot-move 2.8s ease .7s infinite;-o-animation:cssload-dot-move 2.8s .7s ease infinite;-ms-animation:cssload-dot-move 2.8s .7s ease infinite;-webkit-animation:cssload-dot-move 2.8s ease .7s infinite;-moz-animation:cssload-dot-move 2.8s .7s ease infinite}#loading-icon .cssload-dot:nth-child(3){animation:cssload-dot-rotate-3 2.8s linear 1.4s infinite;-o-animation:cssload-dot-rotate-3 2.8s 1.4s linear infinite;-ms-animation:cssload-dot-rotate-3 2.8s 1.4s linear infinite;-webkit-animation:cssload-dot-rotate-3 2.8s linear 1.4s infinite;-moz-animation:cssload-dot-rotate-3 2.8s 1.4s linear infinite}#loading-icon .cssload-dot:nth-child(3):before{background-color:#b4d950;animation:cssload-dot-move 2.8s ease 1.4s infinite;-o-animation:cssload-dot-move 2.8s 1.4s ease infinite;-ms-animation:cssload-dot-move 2.8s 1.4s ease infinite;-webkit-animation:cssload-dot-move 2.8s ease 1.4s infinite;-moz-animation:cssload-dot-move 2.8s 1.4s ease infinite}#loading-icon .cssload-dot:nth-child(4){animation:cssload-dot-rotate-4 2.8s linear 2.1s infinite;-o-animation:cssload-dot-rotate-4 2.8s 2.1s linear infinite;-ms-animation:cssload-dot-rotate-4 2.8s 2.1s linear infinite;-webkit-animation:cssload-dot-rotate-4 2.8s linear 2.1s infinite;-moz-animation:cssload-dot-rotate-4 2.8s 2.1s linear infinite}#loading-icon .cssload-dot:nth-child(4):before{background-color:#ffd042;animation:cssload-dot-move 2.8s ease 2.1s infinite;-o-animation:cssload-dot-move 2.8s 2.1s ease infinite;-ms-animation:cssload-dot-move 2.8s 2.1s ease infinite;-webkit-animation:cssload-dot-move 2.8s ease 2.1s infinite;-moz-animation:cssload-dot-move 2.8s 2.1s ease infinite}@keyframes cssload-dot-move{0%{transform:translateY(0)}18%,22%{transform:translateY(-54px)}40%,to{transform:translateY(0)}}@keyframes cssload-dot-colors{0%{background-color:#ff9442}25%{background-color:#ff38ff}50%{background-color:#61faff}75%{background-color:#c8e043}to{background-color:#ffd83d}}@keyframes cssload-dot-rotate-1{0%{transform:rotate(-105deg)}to{transform:rotate(270deg)}}@keyframes cssload-dot-rotate-2{0%{transform:rotate(165deg)}to{transform:rotate(540deg)}}@keyframes cssload-dot-rotate-3{0%{transform:rotate(435deg)}to{transform:rotate(810deg)}}@keyframes cssload-dot-rotate-4{0%{transform:rotate(705deg)}to{transform:rotate(3turn)}}
/*# sourceMappingURL=main.3b18aa3f.chunk.css.map */