:root{--text-color:#3b3939;--selected-text-background-color:#5f5d5d;--selected-text-color:white;--ocean-height:370px;--ocean-width:500px;--wave-stroke-color:rgba(0,0,0,.5);--wave-stroke-width:2px;--ocean-border-radius:4px;--font-size:.8rem;--title-height:22px}.ocean-container{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.project-content span,.ocean-container{letter-spacing:-1px;font-family:Space Mono,monospace;font-size:var(--font-size);color:var(--text-color)}.container{flex-direction:column;justify-content:center;align-items:center;gap:5px;display:flex;position:relative}.ocean{width:var(--ocean-width);height:var(--ocean-height);border:.8px solid var(--text-color);border-radius:var(--ocean-border-radius);cursor:crosshair;justify-content:center;align-items:center;transition:border .3s;display:flex;position:relative;overflow:hidden}.ocean:has(.memory.selected){cursor:pointer!important}.ocean svg{transform-origin:50%;margin:-25px -25px -10px;transition:opacity .5s ease-out;position:absolute;bottom:0;left:0}.ocean path{transition:all .1s ease-in-out}.ocean path.wave-hovered{filter:brightness(.7);transform:scaleY(1.02)translateY(-5px)}.ocean{animation:1s ease-in-out forwards border-opacity}@keyframes border-opacity{0%{border:.8px solid rgba(0,0,0,.1)}}.ocean .memory path.wave-hovered,.ocean .bubbles path.wave-hovered{filter:none;transform:none}.ocean [class*=memory]:hover{cursor:pointer}@keyframes border-info-button{0%{border:1px solid rgba(0,0,0,.1)}}#info-button{bottom:calc(var(--ocean-height)/2 + 5px);right:calc(var(--ocean-width)/2*-1 + 2px);border:1px solid var(--text-color);border-radius:20px;justify-content:center;align-items:center;width:16px;height:16px;transition:border .2s ease-out,background-color .2s ease-out;animation:1s ease-in-out .5 forwards border-info-button;display:flex;position:absolute}#info-button span{letter-spacing:0;display:inline-block;position:relative}#info-button:hover{cursor:pointer;background-color:rgba(0,0,0,.05)}#overlay div{opacity:0;transition:opacity .8s}#info-content{height:var(--ocean-height);width:var(--ocean-height);visibility:hidden;flex-direction:column;justify-content:center;gap:18px;display:flex;position:absolute}#info-content p{cursor:text;width:-moz-fit-content;width:fit-content}#memory-song-content{height:var(--ocean-height);width:var(--ocean-width);visibility:hidden;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute}#memory-song-content img{filter:drop-shadow(0 0 4px #787a7a);max-width:calc(var(--ocean-width)*.9);max-height:calc(var(--ocean-height)*.9);border-radius:4px;width:auto;height:auto}#overlay{height:var(--ocean-height);width:var(--ocean-width);border:.8px solid var(--text-color);border-radius:var(--ocean-border-radius);pointer-events:none;background-color:rgba(237,237,235,0);flex-direction:column;justify-content:center;align-items:center;transition:all .5s;display:flex;position:absolute}#overlay.show{background-color:rgba(237,237,235,.9)}#overlay.show-memory:has(#info-content.show-content){background-color:rgba(237,237,235,.9)}#overlay.show-memory:has(#memory-song-content.show-content){-webkit-backdrop-filter:contrast(1.05)brightness(.95);backdrop-filter:contrast(1.05)brightness(.95);background-color:rgba(237,237,235,.5)}.ocean-container:has(#overlay.show) .container .ocean{cursor:default}.ocean-container:has(#overlay.show) .container .ocean svg{pointer-events:none}.ocean-container:has(#overlay.show-memory) .container .ocean{cursor:default}.ocean-container:has(#overlay.show-memory) .container .ocean svg{pointer-events:none}#overlay .show-content{visibility:visible;opacity:1}#overlay #memory-song-content.show-content{animation:.5s grow,20s ease-in-out .5s infinite float}@keyframes grow{0%{filter:grayscale(80%);opacity:0;transform:scale(.8)}30%{filter:grayscale(80%);opacity:0;transform:scale(.8)}70%{transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@keyframes float{0%{transform:translateY(0)translate(0)}25%{transform:translateY(-8px)translate(2px)}50%{transform:translateY(4px)translate(-1px)}75%{transform:translateY(-6px)translate(3px)}to{transform:translateY(0)translate(0)}}#title{margin-top:calc(var(--ocean-height) + var(--title-height) + 24px);text-align:center;width:max-content;min-height:var(--title-height);position:absolute}.container span{transition:opacity .5s ease-out}.container .active-old{opacity:.6}.container .done{opacity:.8}.container .active-fresh{opacity:.3}.noise{width:var(--ocean-width);height:var(--ocean-height);pointer-events:none;z-index:1000;mix-blend-mode:color-burn;background-image:url(/ocean/noise.png);background-repeat:no-repeat;background-size:100%;position:absolute}.ocean-container:has(.show-memory) .noise{opacity:0}.top-noise{width:var(--ocean-width);height:var(--ocean-height);pointer-events:none;z-index:1000;mix-blend-mode:color-burn;opacity:0;background-image:url(/ocean/noise.png);background-repeat:no-repeat;background-size:100%;position:absolute}.ocean-container:has(.show-memory) .top-noise{opacity:.5}@keyframes dash{0%{stroke-dashoffset:4000px}to{stroke-dashoffset:0}}@keyframes dash-wave-420{0%{stroke-dashoffset:5000px}to{stroke-dashoffset:0}}.ocean path{stroke:var(--wave-stroke-color);stroke-width:var(--wave-stroke-width);stroke-dasharray:4000;stroke-dashoffset:0;animation:1s ease-out forwards dash}.wave-420 path{stroke-dasharray:5000;animation:.5s ease-out forwards dash-wave-420}.ocean .memory g{filter:drop-shadow(0 0 20px rgba(255,255,255,.3))}#source{color:#ada8a8;position:fixed;bottom:10px}.project-desc{width:500px}@media screen and (max-width:580px){:root{--ocean-height:250px;--ocean-width:320px}.project-desc{width:340px}}
:root{--bubble-animation-duration:8s;--bubble-animation-delay:0s}.bubbles path{pointer-events:none;transform-origin:50%;animation:flicker var(--bubble-animation-duration)ease-in-out infinite;animation-delay:var(--bubble-animation-delay)}@keyframes flicker{50%{opacity:.8}}.bubbles ellipse,.bubbles circle{transform-box:fill-box;transform-origin:50%;animation:1s ease-in-out infinite pulse,20s ease-in-out infinite opacity;animation-delay:var(--delay,0s);stroke:#000;stroke-width:2px}@keyframes opacity{0%,to{opacity:.2}50%{opacity:0}70%{opacity:.4}}@keyframes pulse{0%,to{transform:scale(.2)}50%{transform:scale(.1)}70%{transform:scale(.05)}}
.memory{transform-origin:50%;filter:brightness()drop-shadow(0 10px 10px rgba(255,255,255,0))}.memory .wrapper{transform-origin:50%;offset-distance:0%;transform-box:fill-box;will-change:transform,offset-distance;animation:40s ease-in-out infinite float-along-path;transform:translateY(-5px)}@keyframes float-along-path{0%{offset-distance:0%}50%{offset-distance:100%}to{offset-distance:0%}}.memory .shape{transition:all .3s ease-in-out;transform:scale(.5)}.memory:hover .child{transform-origin:50%;cursor:pointer}.memory:hover .child .shape{filter:drop-shadow(0 0 10px rgba(255,255,255,.8));transform:scale(.7)rotate(10deg)}.memory:hover{cursor:pointer!important}.memory.selected{filter:brightness(1.05)drop-shadow(0 10px 10px rgba(255,255,255,.5));cursor:pointer!important}.memory.selected .child{transform-origin:50%}.memory.selected .child .shape{filter:drop-shadow(0 0 10px rgba(255,255,255,.8));transform:scale(.8)rotate(10deg)}.memory:hover .wrapper,.memory.selected .wrapper{animation-play-state:paused!important}.memory-info.song{text-align:center;opacity:0;transition:opacity .8s 1.2s}.container:has(.memory.song:hover) .memory.song-info{opacity:.7}.memento-overlay-container{z-index:101;pointer-events:none;opacity:0;transition:opacity .3s;position:fixed}.memory{offset-distance:0%;offset-rotate:0deg;transform-box:fill-box;will-change:transform,offset-distance}
[class*=wave-]:hover{transform-origin:50%;transform:var(--transform-value,translateX(10px))}[class*=wave-]{transition:transform 1s}