@import"https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap";@import"https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Titillium Web,M PLUS\ 1p,sans-serif;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}::-webkit-scrollbar{display:none}::selection{background-color:#529eba}body{width:100vw;height:100vh}h2{font-size:1.125rem;font-weight:400}@media(max-width:1024px){h2{font-size:.875rem}}p{font-size:1rem}@media(max-width:1024px){p{font-size:.875rem}}.container-bg{background-color:rgba(20,23,28,.541);border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.icon-button{width:36px;height:36px;opacity:.5;filter:invert(100%)}.icon-button:hover{cursor:pointer;opacity:1}@media(max-width:1024px){.icon-button{width:24px;height:24px}}.slider{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:3px;background:gray;pointer-events:auto}.slider:hover{cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0;background:none;border:none}.slider::-webkit-slider-runnable-track{height:6px;border-radius:3px}.slider::-moz-range-thumb{width:0;height:0;background:none;border:none}.hidden-text{display:none}.page{width:100%;height:100dvh;min-height:600px;justify-content:space-between;align-items:flex-end;background-color:#14171c;display:grid;grid-template-columns:repeat(3,1fr);position:relative;background-image:url(https://roifjcf.github.io/holo-fi/img/background.png);background-size:cover;background-position:50%}@media(max-width:768px){.page{display:flex}}.loading-container{width:100%;height:100%;background-color:#14171c;color:#919191}.loading-title{font-size:4rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ambientsound-container{height:30%;max-height:600px;min-height:300px;width:200px;padding:1rem;position:absolute;top:50%;right:0;transform:translateY(-50%);display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;align-items:center;align-content:center;justify-content:space-between}@media(max-width:1024px){.ambientsound-container{width:120px}}@media(max-width:768px){.ambientsound-container{width:60px}}.sfxunit-container{width:36px;height:auto;margin-bottom:.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.25rem}.sfxunit-container .playing{opacity:1}.playcontrol-container{padding:1rem}@media(max-width:768px){.playcontrol-container{position:absolute;bottom:0;right:50%;transform:translate(50%)}}.playcontrol-music-title{height:auto;text-align:center;color:#f6f6f6}.playcontrol-buttons{position:relative;align-items:center;justify-content:center;margin-top:.5rem}.playcontrol-buttons,.playcontrol-buttons .left,.playcontrol-buttons .right{display:flex;flex-direction:row}.playcontrol-buttons .right{justify-content:right;position:absolute;right:0}@media(max-width:1024px){.playcontrol-buttons{justify-content:space-between}}.playlist-container{display:flex;flex-direction:row;height:100vh;margin-right:.5rem}@media(max-width:768px){.playlist-container{position:absolute;top:0;left:0}}.playlist-list{width:0;height:100%;transition:width 1s ease-in-out;color:#f6f6f6;z-index:400}.playlist-track{transition:background-color .3s ease;padding:.25rem .5rem}.playlist-track:hover{cursor:pointer}.playlist-current,.playlist-track:hover{background-color:hsla(0,0%,96%,.2)}.playlist-closebutton{margin-top:.25rem;margin-left:.5rem}@media(min-width:768px){.playlist-closebutton{display:none}}