@import "https://fonts.googleapis.com/css2?family=Monoton:wght@400;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap";@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes coverAnimationInit{0%{transform:translateX(0)}50%{transform:translateX(-5%)}100%{transform:translateX(0)}}@keyframes coverAnimation{0%{opacity:1;transform:translateX(0)}33%{opacity:1;transform:translateX(-66%) rotate(0)}50%{opacity:1;transform:translateX(-100%) rotate(-15deg)}100%{opacity:0;transform:translateX(-200%) rotate(-90deg)}}@keyframes recordAnimationInit{0%{transform:rotate(360deg)}100%{transform:rotate(0)}}@keyframes recordAnimation{0%{transform:rotate(0deg)}50%{transform:rotate(3deg)}100%{transform:rotate(0deg)}}@keyframes labelAnimationInit{0%{transform:rotate(360deg) scale(0.33)}100%{transform:rotate(0) scale(0.33)}}@keyframes labelAnimation{0%{transform:rotate(0) scale(0.33)}100%{transform:rotate(360deg) scale(0.33)}}@keyframes playtimeAnimation{0%{fill:var(--turquoise);opacity:0.5}50%{fill:var(--blue);opacity:1}100%{fill:var(--turquoise);opacity:0.5}}:root{--font-syncopate: "Syncopate", sans-serif;--font-monoton: "Monoton", sans-serif;--font-doto: "Doto", sans-serif;--purple: oklch(0.58 0.27 328.37);--dark-purple: oklch(0.18 0.27 328.37);--black: oklch(0.12 0 0);--black-30: rgba(0, 0, 0, 0.3);--turquoise: oklch(0.85 0.19 161.54);--dark-turquoise: oklch(0.45 0.19 161.54);--blue: oklch(0.77 0.13 204.93)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-syncopate);font-weight:400;font-style:normal;background-color:var(--black);background-image:url("/assets/background.jpg");background-attachment:fixed;background-size:cover;color:var(--turquoise);line-height:1.6;overflow-x:hidden}.uppercase{text-transform:uppercase}.container{max-width:1200px;margin:0 auto;padding:2rem;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}header{text-align:center;margin-bottom:4rem;animation:fadeInDown 1s ease-out}h1{font-family:var(--font-monoton);font-weight:400;font-style:normal;font-size:5rem;margin-bottom:1rem;background:linear-gradient(-45deg, var(--purple), var(--blue), var(--turquoise));animation:gradientShift 5s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:400% 400%;background-clip:text}h2{font-size:1.5rem;color:var(--blue);margin-bottom:1rem}.subtitle{font-size:1.2rem;font-weight:700;color:var(--turquoise)}.emphase{white-space:nowrap;color:var(--blue)}.profile-section{display:flex;flex-direction:column;align-items:center;gap:2rem;margin-bottom:4rem;animation:fadeIn 1.5s ease-out}.profile-section .profile-image{width:20rem;height:20rem;transform:scale(1);transition:transform 0.3s ease, filter 0.3s ease, border 0.3s;position:relative;z-index:0}.profile-section .profile-image .cover,.profile-section .profile-image .pin,.profile-section .profile-image .label,.profile-section .profile-image .playtime,.profile-section .profile-image .record{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-repeat:no-repeat}.profile-section .profile-image .cover{z-index:5;border-radius:1%;border:3px solid var(--purple);animation-fill-mode:both;animation-play-state:running;animation:coverAnimationInit 1.6s ease-in-out forwards}.profile-section .profile-image .cover .cover-image{position:absolute;margin:0;padding:0;width:100%;height:100%;background:url("/assets/erika.jpg");background-size:cover}.profile-section .profile-image .cover .cover-image .cover-background{border-radius:inherit;width:100%;height:100%;background:var(--turquoise);background-size:cover;mix-blend-mode:multiply}.profile-section .profile-image .cover .cover-text{position:absolute;margin:0;padding:0;width:100%;height:100%}.profile-section .profile-image .cover .cover-text .artist{position:absolute;top:5%;left:5%;font-family:var(--font-monoton);font-size:1.33rem;color:var(--purple);font-weight:400}.profile-section .profile-image .cover .cover-text .title{position:absolute;top:90%;left:5%;font-weight:800}.profile-section .profile-image .pin{z-index:4;transform:scale(0.02);background-color:black;background-size:cover;mix-blend-mode:color-burn}.profile-section .profile-image .label{z-index:3;transform:scale(0.33);background:url("/assets/erika.jpg");background-size:cover;mix-blend-mode:color-dodge}.profile-section .profile-image .label.animate-label-init{animation-fill-mode:both;animation-play-state:running;animation:labelAnimationInit 0.5s linear}.profile-section .profile-image .label.animate-label{animation-fill-mode:both;animation-play-state:running;animation:labelAnimation 3s linear infinite}.profile-section .profile-image .label.paused{animation-play-state:paused}.profile-section .profile-image .playtime{z-index:2}.profile-section .profile-image .playtime path{fill:transparent}.profile-section .profile-image .playtime text{fill:var(--blue);font-weight:500;font-size:0.9rem;font-family:var(--font-doto)}.profile-section .profile-image .playtime.animate-playtime-init{display:none}.profile-section .profile-image .playtime.animate-playtime{display:block}.profile-section .profile-image .playtime.paused text{animation:playtimeAnimation 1.5s ease-in-out infinite}.profile-section .profile-image .record{z-index:1;border:3px solid var(--turquoise);background:url("/assets/record.png");background-size:cover;filter:opacity(0.8);animation:recordAnimationInit none}.profile-section .profile-image .record.animate-record-init{animation-fill-mode:both;animation-play-state:running;animation:recordAnimationInit 0.5s linear}.profile-section .profile-image .record.animate-record{animation-fill-mode:both;animation-play-state:running;animation:recordAnimation 1.5s ease-in-out infinite}.profile-section .profile-image .record.paused{animation-play-state:paused}.profile-section .profile-image:hover .cover{animation-fill-mode:both;animation-play-state:running;animation:coverAnimation 1.6s linear forwards}.profile-section .bio{max-width:600px;text-align:center;font-size:1.1rem;line-height:1.8}.audio-section{width:100%;max-width:800px;margin:0 0 4rem 0;border:3px solid var(--turquoise);border-radius:13px;object-fit:cover;box-shadow:0 0 20px var(--dark-purple);animation:fadeIn 2s ease-out;transition:transform 0.3s ease, filter 0.3s ease, border-radius 0.3s ease}.audio-section:hover{border:3px solid var(--purple);transform:scale(1.05)}.audio-section #audio-player{width:100%;height:150px;background:rgba(0,0,0,0.3);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--turquoise)}.audio-section #audio-player iframe{border-radius:10px;width:100%;height:150px}.social-section{display:flex;flex-direction:column;align-items:center;gap:2rem;margin-bottom:4rem;animation:fadeInUp 2s ease-out}.social-section .social-links{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}.social-section .social-links .social-link{display:flex;align-items:center;gap:0.5rem;padding:0.8rem 1.5rem;background-color:var(--black-30);border:1px solid var(--purple);border-radius:50px;color:var(--turquoise);text-decoration:none;font-weight:500;transition:all 0.3s ease}.social-section .social-links .social-link:hover{background-color:var(--purple);color:var(--black);transform:translateY(-3px);box-shadow:0 5px 15px var(--dark-purple)}.social-section .social-links .social-link svg{width:20px;height:20px}@media (max-width: 768px){h1{font-size:2.5rem}.subtitle{font-size:1rem}.bio{font-size:1rem}.social-links{flex-direction:column;align-items:center}}