*{box-sizing:border-box;padding:0;margin:0}:root{--fontSize: calc(12px + .698vw) ;--lineHeight: calc(var(--fontSize) * 1.4);--letterSpacing: calc(var(--fontSize) * .0015);--fontWeight: 300;--bg: #ffffff;--text: #111111;--link: #000000;--shadow: rgba(0, 0, 0, .05);--shadow-strong: rgba(0, 0, 0, .2);--toggle-hover: rgba(0, 0, 0, .06)}:root[data-theme=dark]{--bg: #0f0f0f;--text: #ededed;--link: #ffffff;--shadow: rgba(0, 0, 0, .4);--shadow-strong: rgba(0, 0, 0, .6);--toggle-hover: rgba(255, 255, 255, .1)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #0f0f0f;--text: #ededed;--link: #ffffff;--shadow: rgba(0, 0, 0, .4);--shadow-strong: rgba(0, 0, 0, .6);--toggle-hover: rgba(255, 255, 255, .1)}}html{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);transition:background-color .2s ease,color .2s ease}@supports (font-variation-settings: normal){html{font-family:Inter var,sans-serif}}img{image-rendering:crisp-edges;image-rendering:pixelated}.app{width:100%;display:flex;justify-content:center;align-items:center}.library{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.row{width:100%;display:flex;justify-content:center;align-items:center;padding:5vh}.song{width:30%;cursor:pointer}h2{font-size:calc(var(--fontSize) * 1.75);letter-spacing:var(--letterSpacing)}h4{font-size:calc(var(--fontSize) * 1);letter-spacing:var(--letterSpacing);padding-top:2vh}p{font-size:calc(var(--fontSize) * .75);letter-spacing:var(--letterSpacing)}a{color:var(--link);font-weight:600}.image{width:85%;border-radius:.25vw;box-shadow:0 .2vw 5.2vw var(--shadow)}.header-text{width:85%;height:20vh;display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;margin:2% 0}@media(max-width:900px){.row{flex-direction:column;justify-content:center;align-items:center;padding:2vh}.song{width:90%;padding:5vh}.image{width:100%}h2{font-size:calc(var(--fontSize) * 2)}p{font-size:calc(var(--fontSize) * 1)}h4{font-size:calc(var(--fontSize) * 1.25)}}@media(max-width:540px){.row{padding:1vh}.song{width:95%;padding:2vh}h2{font-size:calc(var(--fontSize) * 1.75)}p{font-size:calc(var(--fontSize) * .9)}h4{font-size:calc(var(--fontSize) * 1.2)}.header-text{height:22vh;margin:2% 0}}@media(max-width:400px){h2{font-size:calc(var(--fontSize) * 1.5)}p{font-size:calc(var(--fontSize) * .8)}}.wrapper{width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.song-page{width:100%;height:85vh;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}audio{display:block;width:40vw}.song-title-page{font-size:calc(var(--fontSize) * 1.5);letter-spacing:var(--letterSpacing);font-family:Inter,sans-serif}.page-image{width:50%;border-radius:.5vw;box-shadow:0 .2vw 5.2vw var(--shadow-strong)}.back{width:1%;cursor:pointer;margin:2.5% auto 2.5% 3.5%}@media(max-width:960px){.page-image{width:75%}.song-page{height:85vh}audio{display:block;width:60vw}.back{width:1.5%}}@media(max-width:760px){.back{width:2%}}@media(max-width:540px){.page-image{width:85%}body{overflow-x:hidden}audio{width:75vw}.song-page{height:65vh}.back{width:3%;margin:0 auto 20% 7%}}.about{width:85%}.back-about{width:1%;cursor:pointer;margin:5% auto 2.5% 0}.about-text{width:85%;height:30vh;display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;margin:2% 0}@media(max-width:960px){.back-about{width:1.5%}}@media(max-width:760px){.back-about{width:2%}.about-text{height:50vh;margin:2% 0}}@media(max-width:540px){.back-about{width:3%;margin:5% auto 20% 0}.about-text{height:40vh;margin:2% 0}}.theme-toggle{position:fixed;top:1.25rem;right:1.25rem;z-index:100;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:transparent;color:var(--text);cursor:pointer;transition:background-color .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent}.theme-toggle:hover{background:var(--toggle-hover)}.theme-toggle:focus-visible{outline:2px solid var(--text);outline-offset:2px}.theme-toggle svg{width:1.25rem;height:1.25rem;display:block}@media(max-width:540px){.theme-toggle{top:.75rem;right:.75rem}}