*{margin:0;padding:0}body{font-family:Heebo,sans-serif}.card{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.container{display:inline-flex;justify-content:center;align-items:center;width:100%;box-sizing:border-box}.main-container{display:flex;flex-direction:column;padding:4rem 0;margin-top:2.4rem}nav{position:fixed;top:0;display:inline-flex;align-items:center;width:100%;height:3.6rem;background-color:#000;padding:0 1rem;box-sizing:border-box}nav>.branding{color:#fff;font-size:1.4rem}nav>.menu-buttons{margin-left:auto}nav>.menu-buttons>button{padding:8px 10px;border-radius:6px;border:none;min-width:120px}nav>.menu-buttons>button:not(:last-child){margin-right:12px}.score.container{margin-bottom:6rem}.card.score-card{display:inline-flex;border-radius:8px;font-size:1.4rem}.score-header{background-color:#000;color:#fff;border-radius:8px 0 0 8px;padding:8px 10px}#score{margin:auto 0;padding:0 16px}.sequence.container{padding:0 20px;margin-bottom:10rem}.sequence-card{display:flex;justify-content:center;align-items:center;width:calc((100% - 16px)/5);height:10rem;border-radius:8px;font-size:48px;text-transform:uppercase}.sequence-card.active{height:12rem;font-size:64px;font-weight:700}.sequence-card:not(:last-child){margin-right:16px}.control.container{flex-wrap:wrap}.control.card{width:180px;border-radius:8px;margin-bottom:32px;transition:all .08s ease}.control.card:not(:last-child){margin-right:24px}.control.card>.label{background-color:#000;border-radius:8px 8px 0 0;color:#fff;text-transform:uppercase;font-size:32px;padding:16px 0}.control.card>.key{height:80px;text-transform:capitalize;font-size:24px}.playing{box-shadow:0 10px 15px -3px #00e5ff80,0 4px 6px -4px #00e5ff80;transform:scale(1.2)}.hidden{display:none!important}.settings{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.settings>h1{font-size:2rem;text-align:center;margin-bottom:1.2rem}.settings-container{display:grid;width:90%;grid-template-columns:1fr 1fr;grid-template-rows:repeat(9,1fr);height:60vh;gap:.8rem}.settings-container>input{padding:10px 16px;font-size:1rem}.error{border:red 2px solid}.error-message{color:#a10000;font-size:1rem;font-weight:700;width:90%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-bottom:1.2rem;border-radius:8px;min-height:60px}.settings-controls{display:inline-flex;width:90%;justify-content:flex-end;padding:1rem}.settings-controls>button{background-color:#afeeee;border:none;padding:10px 16px;border-radius:8px;font-size:1.6rem}.settings-controls>button:not(:last-child){margin-right:10px}
