body,html{margin:0}#root{height:100vh;width:100%;text-align:center;margin:0;color:#ebf5ee}img.background{background-color:#a8f9ff;height:100%;width:100%;position:fixed;left:0;z-index:-1;opacity:.5}.header{display:flex;justify-content:space-between;position:relative;width:100%;padding-top:1.5rem;padding-bottom:1.5rem;background-color:#03191e;border-bottom:1rem solid #a8f9ff}h1{font-size:3.2em;line-height:1.1;margin:0 0 0 25%;width:fit-content}.header button{width:fit-content;background-color:#5a7684;border-radius:.5rem;padding:1rem;font-family:inherit;font-size:1.05rem;font-weight:500;letter-spacing:1.5px;color:#03191e;margin-right:5rem;border:none;box-shadow:2px 2px 2px #ebf5ee}.red{color:#cc2936}.editor{width:90%;margin:0 auto;display:flex;justify-content:space-around}.container{display:flex;flex-direction:column;align-items:center;width:45%;height:fit-content;padding:1rem;margin-bottom:5rem;background-color:#03191e;border-radius:5px;box-shadow:2px 2px 2px #a8f9ff}.tracklist-container{width:100%;display:flex;flex-direction:column;align-items:center}@media screen and (max-width: 425px){.editor{flex-direction:column-reverse;align-items:center}.container{width:85%}}.searchBar{display:flex;flex-direction:column;justify-content:space-between;align-items:center}input.song-name{width:30%;padding:1rem;margin-top:5rem;margin-bottom:2rem;border-radius:1.5rem;background-color:#03191e;border:none;font-family:inherit;font-size:2rem;letter-spacing:1.5px;color:#a8f9ff;text-align:center;box-shadow:5px 5px 5px #a8f9ff}input.song-name:focus{outline:#ebf5ee}button.search{width:fit-content;background-color:#03191e;border-radius:.5rem;padding:1.5rem;font-family:inherit;font-size:1.5rem;letter-spacing:1.5px;color:#a8f9ff;margin-bottom:5rem;box-shadow:5px 5px 5px #a8f9ff}button.search:active{box-shadow:none;transform:translate(5px,5px);color:#cc2936}@media screen and (max-width: 425px){input.song-name{width:75%}}.track-container{display:flex;width:90%;height:5rem;justify-content:space-between;align-items:center;margin-right:0;padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:1px solid #ebf5ee}.track-container img{object-fit:contain;width:80px;padding-left:1rem}.text-container{width:65%;display:flex;flex-direction:column;text-align:left}.text-container p{margin:0}.text-container .title{font-size:1.5rem}.text-container .artist{font-size:.75rem}button.add,button.remove{background-color:transparent;color:#ebf5ee;font-size:1.5rem;width:10%;padding:0;border:none}h2{margin:0;margin-bottom:1.5rem;font-size:2rem;font-weight:400;border-bottom:2px solid #EBF5EE;width:100%}button.save{width:35%;background-color:#5a7684;border-radius:.5rem;padding:1rem;font-family:inherit;font-size:1.05rem;font-weight:500;letter-spacing:1.5px;color:#03191e;border:none;box-shadow:2px 2px 2px #ebf5ee}button.save:active{box-shadow:none;transform:translate(2px,2px);color:#cc2936}input.playlistName{background-color:transparent;border:none;border-bottom:2px solid #EBF5EE;width:100%;font-size:2rem;text-align:center;padding-bottom:.5rem;margin-top:.5rem;margin-bottom:1.5rem}input.playlistName:placeholder{color:#ebf5ee}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;box-sizing:border-box;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}
