@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--violet-glow:#954ce980;--key-white:#f0f0f0;--key-black:#222;--bg-dark:#1a1a2e}body{background:linear-gradient(135deg,#1a1a2e,#16213e);background:linear-gradient(135deg,var(--bg-dark) 0,#16213e 100%);color:#f0f0f0;color:var(--key-white);font-family:Poppins,sans-serif}.pianoPage{align-items:center;display:flex;flex-direction:column;min-height:100vh;padding:2rem}h1{color:#f0f0f0;color:var(--key-white);margin-bottom:2rem;margin-top:150px;text-align:center;text-shadow:0 0 10px #954ce980;text-shadow:0 0 10px var(--violet-glow)}.piano{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff0d;border-radius:20px;box-shadow:0 0 20px #0000004d,0 0 60px #954ce980;box-shadow:0 0 20px #0000004d,0 0 60px var(--violet-glow);display:flex;justify-content:center;padding:20px;width:900px}.white-key{background:linear-gradient(180deg,#f0f0f0 0,#e0e0e0);background:linear-gradient(to bottom,var(--key-white) 0,#e0e0e0 100%);border:1px solid #0003;border-radius:0 0 10px 10px;color:#222;color:var(--key-black);height:300px;width:80px;z-index:1}.black-key,.white-key{align-items:flex-end;display:flex;font-weight:600;justify-content:center;padding-bottom:10px;text-align:center;transition:all .3s ease}.black-key{background:linear-gradient(180deg,#222 0,#000);background:linear-gradient(to bottom,var(--key-black) 0,#000 100%);border-radius:0 0 5px 5px;color:#f0f0f0;color:var(--key-white);height:200px;margin-left:-25px;margin-right:-25px;width:50px;z-index:2}.black-key.active,.black-key:hover,.white-key.active,.white-key:hover{box-shadow:0 0 15px #954ce980;box-shadow:0 0 15px var(--violet-glow);transform:scale(1.02)}.black-key:active,.white-key:active{transform:scale(.98)}
/*# sourceMappingURL=main.5b2a3a09.css.map*/