@import"https://fonts.googleapis.com/css2?family=Nabla&family=Raleway:wght@500;600&family=Roboto&family=Tilt+Warp&display=swap";@import"https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap";.footer{padding:5px;font-family:Noto Sans,sans-serif;font-weight:700;text-align:center;line-height:1.4}.autor{all:unset;transition:ease-in-out 1s}.autor:hover{cursor:pointer;color:#100f0f;text-decoration:underline}.logo{font-size:5rem;text-align:center;line-height:var(--logo-height);height:var(--logo-height);margin:0;padding-top:30px;font-family:Tilt Warp,cursive;color:#191013a3;filter:drop-shadow(1px 1px 5px #f4f4f2)}.instruments{display:block;text-transform:capitalize;font-size:1.2rem;line-height:1.5;margin:1.5rem auto 0;padding:.4rem 1rem;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem}.key{position:relative;font-size:var(--font-size);border-radius:0 0 var(--radius) var(--radius);text-transform:uppercase;-webkit-user-select:none;user-select:none}.key--natural{width:var(--white-key-width);height:var(--white-key-height);padding-top:var(--white-key-padding);border:1px solid #191013;color:#191013;margin-right:-1px;z-index:1}.key--sharp,.key--flat{width:var(--black-key-width);height:var(--black-key-height);padding-top:var(--black-key-padding);background-color:#191013;color:#f4f4f2;margin:0 calc(-.5 * calc(var(--black-key-width)));z-index:2}.key--natural:active,.key--natural.is-pressed{background-color:#dddbdb}.key--sharp:active,.key--sharp.is-pressed,.key--flat:active,.key--flat.is-pressed{background-color:#483139}.key:disabled{background-color:none;cursor:wait}.key--natural:disabled{color:#0003;background-color:#fff}.key--sharp:disabled,.key--flat:disabled{color:#fff6;background-color:#111}.key{--radius: 2px;--font-size: .6rem;--white-key-width: 20px;--white-key-height: calc(var(--white-key-width) * 4.57);--white-key-padding: calc(var(--white-key-height) / 1.28);--black-key-width: calc(var(--white-key-width) / 1.6);--black-key-height: calc(var(--white-key-height) / 1.77);--black-key-padding: calc(var(--black-key-height) / 1.5)}@media (min-width: 380px){.key{--white-key-width: 25px;--radius: 5px;--font-size: .8rem}}@media (min-width: 540px){.key{--white-key-width: 35px;--font-size: 1rem}}@media (min-width: 720px){.key{--white-key-width: 45px;--font-size: 1.2rem}}@media (min-width: 960px){.key{--white-key-width: 65px;--font-size: 1.5rem}}@media (min-width: 1120px){.key{--white-key-width: 75px;--font-size: 1.8rem}}.keyboard{display:flex}.secret{display:flex;padding:.6em 2em;border:none;outline:none;color:#fff;background:#111;cursor:pointer;position:relative;z-index:0;border-radius:10px;justify-content:center;margin:1.2rem;text-decoration:none}.secret:before{content:"";background:linear-gradient(45deg,#2b2020,#a1a1a1,#797976);position:absolute;top:-2px;left:-2px;background-size:400%;z-index:-1;filter:blur(5px);width:calc(100% + 4px);height:calc(100% + 4px);animation:glowingbn5 20s linear infinite;opacity:0;transition:opacity .3s ease-in-out;border-radius:10px}@keyframes glowingbn5{0%{background-position:0 0}50%{background-position:400% 0}to{background-position:0 0}}.secret:active{color:#000}.secret:active:after{background:transparent;cursor:pointer}.secret:hover:before{opacity:1}.secret:after{z-index:-1;content:"";position:absolute;width:100%;height:100%;background:#191919;left:0;top:0;border-radius:10px}.container{display:flex;flex-direction:column}@keyframes reveal{0%{opacity:0}to{opacity:1}}p{margin:0}.unlocked{width:100%;height:100%;top:0;position:absolute;right:0;display:flex;background:#08080828;z-index:3;justify-content:center;align-items:center}.unlocked-music{width:40rem;height:auto;display:flex;flex-direction:column;justify-content:center;background:#f1f1f1;gap:rem;line-height:20.8px;box-sizing:border-box;border-radius:1rem;position:relative;transition:all .3s ease-in-out;-webkit-box-shadow:-1px 0px 32px -4px rgba(82,82,82,.62);-moz-box-shadow:-1px 0px 32px -4px rgba(82,82,82,.62);box-shadow:-1px 0 32px -4px #5252529e}.music{display:flex;flex-direction:column;align-items:center;padding:1.2rem 2rem;border-bottom:1px solid #c0c0c0;gap:.5rem}.close{display:flex;top:0;right:0;padding-top:1rem;padding-right:1rem;justify-content:flex-end}.close:hover:after{cursor:pointer;transform:scale(1.2) translate(-100%,-100%)}.describle{display:flex;align-items:center;padding:3rem;text-align:center;justify-content:center;white-space:pre-wrap}.music p{font-weight:300}h1{margin:0}.wrapper{display:flex;align-items:center;justify-content:flex-end;margin:1.2rem}.close-button{display:block;width:35px;height:35px;position:relative;overflow:hidden;cursor:pointer;background-color:#111;border-radius:.2rem}.close-button>div{position:relative}.close-button-block{width:35px;height:17px;position:relative;overflow:hidden}.close-button-block:before,.close-button-block:after{content:"";position:absolute;bottom:0;left:calc(55% - 4px);display:block;width:4px;height:25px;transform-origin:bottom center;background:#fff;transition:all ease-out .28s}.close-button-block:last-of-type{transform:rotate(180deg)}.close-button .in .close-button-block:before{transition-delay:.28s;transform:translate(20px) translateY(-20px) rotate(45deg)}.close-button .in .close-button-block:after{transition-delay:.28s;transform:translate(-22px) translateY(-22px) rotate(-45deg)}.close-button .out{position:absolute;top:0;left:0}.close-button .out .close-button-block:before{transform:translate(-5px) translateY(5px) rotate(45deg)}.close-button .out .close-button-block:after{transform:translate(5px) translateY(5px) rotate(-45deg)}.close-button:hover .in .close-button-block:before{transform:translate(-5px) translateY(5px) rotate(45deg)}.close-button:hover .in .close-button-block:after{transform:translate(5px) translateY(5px) rotate(-45deg)}.close-button:hover .out .close-button-block:before{transform:translate(-20px) translateY(20px) rotate(45deg)}.close-button:hover .out .close-button-block:after{transform:translate(20px) translateY(20px) rotate(-45deg)}.app{min-height:100vh}.app-content{--offset: calc(var(--footer-height) + var(--logo-height));min-height:calc(100vh - var(--offset));display:flex;justify-content:center;align-items:center}.container-socials{display:flex;flex-direction:column;position:absolute;top:50%;transform:translateY(-50%);margin-left:1rem}.social-link{color:#d4cdc5;font-size:2.5rem;filter:drop-shadow(2px 4px 6px #191013)}.social-link:hover{box-shadow:inset;cursor:pointer;color:#191013a3;filter:drop-shadow(1px 1px 5px #f4f4f2)}:root{--footer-height: 60px;--logo-height: 8rem}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Outfit,Raleway,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#d4cdc5}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}button{border:none;border-radius:0;background:#f4f4f2;margin:0;padding:0;width:auto;appearance:none;color:inherit;font:inherit;line-height:normal;cursor:pointer;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit}