body,html,#root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;background-color:#000;margin:0;padding:0;scroll-behavior:smooth}*{box-sizing:border-box;margin:0;padding:0}.g{color:gray;padding-top:.5em;font-size:18px}.name-hover:hover{color:#fff0f5;-webkit-text-stroke:3px lavenderblush}.buttons{display:flex;gap:1em;color:#000;background-color:#cd5c5c}.playlist{height:100vh}.header-buttons{display:flex;direction:row;align-items:center;margin-top:1.5em;gap:.5em}.turn{padding:0 .3em;font-size:40px;border-radius:50%;border:2px solid transparent;color:#cd5c5c;background-color:transparent;display:flex;align-items:center}.turn:hover:after{color:gray;content:"click to flip!";font-size:18px;padding-left:1em}.turn:hover{color:gray}.play{width:150px;height:50px;border-radius:30px;background-color:#cd5c5c;border:2px solid transparent;font-size:1em;transition:transform .3s ease,box-shadow .3s ease}.play:hover{transform:scale(1.08)}.content{flex:1;padding:2em 4em}.header{height:100vh;display:flex;justify-content:center;align-items:center;color:#fff0f5;perspective:800px;position:relative;padding:40px}.profile{display:flex;gap:1em;padding-top:1em;align-items:center}.profile img{height:40px;width:40px;border-radius:50%;object-fit:cover}.backside{padding:1em 3em;display:flex;flex-direction:column;align-items:center}.backside p{margin:0;padding:0}.backside ul{display:flex;padding:.5em 0}ul{display:flex}.backside .education,.backside .interests,.backside .coursework{display:flex;flex-direction:column;align-items:center}.backside .education li{margin-right:.5em;background-color:#00f;color:#fff}.education p{padding:.5em 0;color:gray;font-size:18px}.backside .interests li{margin-right:.5em;color:#fff0f5}.backside .coursework li{color:#000;font-weight:700;font-size:14px}.coursework li:hover{color:#cd5c5c}.education li:hover{color:#9494ff}.fs{background-color:#00f}.ds{background-color:orange}.ux{background-color:purple}.cv{background-color:green}.fs,.ds,.ux,.cv{animation:ease-in-out .8s}.ds:hover,.fs:hover,.cv:hover,.ux:hover{transform:scale(1.05)}.backside ul li{border-radius:20px;padding:.5em}.album-info{position:relative;text-align:left;padding-left:3em;padding-right:3em}.album_info{display:flex;font-size:24px;padding:1em}.album_info h1{font-size:100px}.album-info h1{font-size:4em}.album-info p{color:gray}.record-bg{margin-right:1em;padding:1em 1em 3em}.mouse-img{height:60px;margin-left:1em}.para{margin-left:4em;color:gray}.in{display:flex}.album-cover{height:250px;width:300px;object-fit:cover}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.track-labels{display:flex;justify-content:space-between;font-size:20px;color:#fff0f5;width:60%;padding-left:3em;padding-right:4em}.tracks{width:60%;padding:0 4em}.track{display:flex;transition:all .5s ease;color:gray;align-items:center;padding:16px}.track-id{width:50px}.track-name{width:450px;text-align:center;font-weight:700}.track-type{width:200px;color:#fff0f5;font-size:14px}.track-date{width:200px;text-align:right}.track-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:25px;white-space:nowrap;justify-content:left}.track:hover{color:#fff0f5;background-color:gray;border-radius:15px;border-color:#e6e6fa;transform:scale(1.1)}.headerRow{position:sticky;top:0;z-index:100;background-color:#000;padding:0 1em 1em;border-bottom:.5px solid rgb(110,110,110)}.track-dot{border-radius:50%;height:8px;width:8px;margin-right:6px}.exp{color:#fff;padding:0 1em;margin:0;font-size:4em}@keyframes scroll{to{transform:translate(calc(-100% - var(--gap)))}}.now-playing-bar{position:fixed;pointer-events:none;-webkit-user-select:none;user-select:none;bottom:0;width:100vw;color:#fff0f5;overflow:hidden;height:2em;display:flex;flex-direction:column;justify-content:center;--gap: .1em;gap:var(--gap)}.now-playing-buttons{display:flex;justify-content:center;gap:.5em;position:sticky;bottom:0;font-size:20px}.now-playing-content{display:flex}.now-playing-bar ul{flex-shrink:0;list-style:none;display:flex;justify-content:space-around;align-items:center;min-width:100%;animation:scroll 10s infinite linear}.now-playing-content span{margin:0 1em}.hover-name{color:#fff0f5}.footer{display:flex;color:#fff;flex-direction:column;align-items:center;justify-content:center;height:100vh}.footer h1,.footer h1:hover{padding-bottom:.5em;font-size:3em}.footer h2{font-size:2.5em;font-weight:200}.footer-text{display:flex;gap:2em;text-align:right}.links2{padding-top:1em;display:inline}.links2 a{color:#fff0f5;margin-left:1em}.links2 a:after{content:" ⤓";opacity:0;transition:opacity .2s ease}.links{padding-top:1em;display:flex;justify-content:center;gap:.5em;color:#000;width:100vw;font-size:1em;align-items:center;margin-top:4em}.links a{text-decoration:none;color:#fff0f5;border-radius:30px;padding:1em}.links a:after{content:" ↗";opacity:0;transition:opacity .2s ease}.links a:hover:after,.links2 a:hover:after{opacity:1}.links a:hover,.links2 a:hover{font-size:1em;color:gray;background-color:#80808051}li{list-style:none}.artist:hover{color:#fff0f5;text-decoration:underline dotted}.footer-bio{color:gray;padding:1em 0;width:300px}.track-details{color:#fff0f5;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.now-playing{display:flex;color:#fff0f5;flex-direction:column;align-items:center;justify-content:center;width:40%}.side-by-side{display:flex;overflow:hidden}.proj-desc{margin:1em 0;color:#fff0f5}.cover-border{display:flex;align-items:center;color:#000;background:#fff;height:350px;width:800px;padding:20px;margin:10em;border-radius:20px;box-shadow:0 20px 30px #fff6;transform-style:preserve-3d;transition:transform .8s ease}.border:hover{transform:rotateX(2deg) rotateY(2deg)}.dot{position:fixed;top:0;left:0;width:10px;height:10px;background:#b0b0b0;border:1px solid pink;border-radius:50%;pointer-events:none;z-index:9999}.footer-pic{border-radius:50%;background-color:#ffc0cbc3}.reactive-bg{position:fixed;inset:0;z-index:-1;background-image:url(/bg.jpeg);background-size:cover;background-position:center;pointer-events:none;filter:brightness(.85)}.text-black{color:#000;padding-top:.5em}.turnlogo{font-size:50px;color:#cd5c5c;position:absolute;top:-1.65em;right:0}