@import"https://fonts.googleapis.com/css2?family=Itim&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap";.header{width:100%;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;color:#8e7ab5}.header *{font-family:Itim,cursive}.header .sub-title{font-size:.9rem;display:flex;align-items:center;gap:5px;font-weight:100}.header .sub-title .fcc-logo{margin-top:2px;width:110px}.header .title{font-size:1.7rem}.drum-container{position:relative;display:flex;align-items:center;gap:20px;justify-content:center;border-radius:8px;background:#8e7ab5;padding:20px;box-shadow:#00000017 0 3px 12px}@media (max-width: 550px){.drum-container{flex-direction:column-reverse}}.drumpad-container{display:flex;align-items:center;gap:5px;justify-content:center;flex-wrap:wrap;width:220px;max-height:100%;padding-block:10px;border-radius:8px;transition:.3s}.drumpad-container.on{border:4px solid rgb(228,147,179)}.drumpad-container.on .drum-pad{background:#e493b3;box-shadow:#00000017 0 3px 12px}.drumpad-container.off{border:4px solid rgba(0,0,0,.25)}.drumpad-container.off .drum-pad{background:#00000040;pointer-events:none;color:#00000040}.drumpad-container .drum-pad{position:relative;width:60px;height:60px;display:flex;align-items:center;gap:0px;justify-content:center;border-radius:inherit;transition:.3s;outline:2px solid transparent}.drumpad-container .drum-pad:after{content:"";position:absolute;bottom:6px;left:auto;right:auto;width:12px;height:3.5px;border-radius:8px;background:#0000001a;transition:.3s}.drumpad-container .drum-pad:focus:after{background:#f1f6f9}.display-container{width:150px;height:200px;display:flex;flex-direction:column;gap:0px;justify-content:space-around;align-items:center}.display-container.on .display,.display-container.on .power{box-shadow:#00000017 0 3px 12px}.display-container.on .display{color:#f1f6f9;border:3.5px solid rgb(228,147,179)}.display-container.on .power{color:#e493b3;border:3px solid rgb(228,147,179)}.display-container.off .display,.display-container.off .power{color:#00000040}.display-container.off .display{border:3.5px solid rgba(0,0,0,.25)}.display-container.off .power{border:3px solid rgba(0,0,0,.25)}@media (max-width: 550px){.display-container{flex-direction:column-reverse;gap:20px;justify-content:unset;align-items:unset;height:auto;width:100%}}.display-container .display{width:100%;height:45px;border-radius:8px;transition:.3s;display:flex;align-items:center;gap:0px;justify-content:center;font-size:1.1rem}.display-container .power{width:50px;height:50px;display:flex;align-items:center;gap:0px;justify-content:center;border-radius:50%;background:none;font-weight:700;transition:.3s}@media (max-width: 550px){.display-container .power{position:absolute;top:20px;right:20px;width:44px;height:44px;border:none!important;box-shadow:none!important}}.about-controller{position:fixed;top:0;right:10px;background:#f4c3c4;color:#8e7ab5;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:#00000017 0 3px 12px;border-radius:0 0 50% 50%;width:30px;height:30px;font-size:.8rem;cursor:pointer;display:flex;align-items:center;gap:0px;justify-content:center;z-index:2;transition:.3s}.about-controller:hover{background:#8e7ab5;color:#e493b3}.about-container{display:flex;align-items:center;gap:0px;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;background:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:99}.about-container .about{display:flex;flex-direction:column;gap:8px;width:auto;min-width:250px;min-height:200px;padding:20px;position:relative;background:#e493b399;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:inherit;animation:fadeIn .5s 1;max-width:90%;border-radius:8px;box-shadow:#00000017 0 3px 12px;justify-content:center;align-items:center;text-align:center;background:#eea5a6;-webkit-backdrop-filter:none;backdrop-filter:none;max-width:350px;color:#323232;padding:20px!important}@media screen and (max-width: 500px){.about-container .about{padding:30px}}.about-container .about a{text-decoration:none}.about-container .about .title{font-size:1.2rem;margin-bottom:10px}.about-container .about .link-opener-blank{font-size:.8rem}.about-container .about .dismiss-about{position:absolute;font-size:1.8rem;background:none;border:none;transition:.3s;padding:0;top:10px;right:15px;color:#8e7ab5}.about-container .about .dismiss-about:hover{color:#725aa2}.about-container .about .dismiss-about:focus{color:#443660}.about-container .about .separator{width:50px;height:2px;border-radius:20px;box-shadow:#00000017 0 3px 12px;background:gray;margin:10px auto}.about-container .about .tech-stack{display:flex;flex-direction:column;gap:5px}.about-container .about .tech-stack .title{font-size:1rem}.about-container .about .tech-stack .technologies{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}.about-container .about .tech-stack .technologies li{display:flex;align-items:center;gap:5px;padding:5px 10px;background:#8e7ab5;color:#f1f6f9;border-radius:8px;box-shadow:#00000017 0 3px 12px;cursor:grab}.about-container .about .tech-stack .technologies li img{width:18px;pointer-events:none}.main-container{width:100%;height:100%;display:flex;flex-direction:column;gap:50px;justify-content:center;align-items:center}@media (max-height: 380px){.main-container{justify-content:unset;margin-block:30px 80px}}*{margin:0;padding:0;box-sizing:border-box}*:not(i){font-family:Urbanist,sans-serif}body{color:#323232;background:#eea5a6;height:100dvh}#root{width:100%;height:100%;overflow-x:hidden;display:flex;flex-direction:column;gap:30px}button{background:#e493b3;color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer}.white-space{white-space:pre}.bold{font-weight:700}.italic{font-style:italic}.hidden{position:absolute;top:-999999;left:-9999999;visibility:hidden;opacity:0}button>*{pointer-events:none}a{color:#5b4881}a,a button{cursor:pointer}@media (prefers-reduced-motion: no-preference){a,a button{transition:.3s}}::selection{background-color:#e493b3;color:#f1f6f9}