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}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.top-row{display:flex;justify-content:center;width:100%}.row-element{margin-left:5px;text-align:left}.row-element,.row-element2{font-size:24px;font-weight:700;width:250px}.row-element2{text-align:center}.row-element3{font-size:24px;margin-right:5px;text-align:right;width:250px}.colored-part,.row-element3{font-weight:700}.red{color:red}.green{color:green}.yellow{color:#ff0}.buttons-container{align-items:center;display:flex;justify-content:center}.room-button-img{align-items:center;background-color:initial;border:1px solid #ccc;cursor:pointer;display:flex;font-size:18px;justify-content:space-between;padding:10px;transition:background-color .3s ease;width:620px}.room-button-img:hover{background-color:#f0f0f0}.left-text{font-size:22px;font-weight:700;text-align:left;width:150px}.center-text{font-size:16px;text-align:center;width:200px}.right-text{text-align:right;width:150px}.room-button-bottom-row,.room-button-top-row{display:flex;justify-content:center;width:100%}.center-text-subelement{width:100px}.modal-overlay{align-items:center;background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modal{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px #0000001a;padding:20px;text-align:center;width:300px}.modal button{background-color:#4caf50;border:none;border-radius:5px;color:#fff;cursor:pointer;margin-top:20px;padding:10px;transition:background-color .3s ease}.modal button:hover{background-color:#45a049}.room-code-modal-overlay{align-items:center;background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.room-code-modal{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px #0000001a;padding:20px;text-align:center;width:300px}.room-code-modal button{background-color:#4caf50;border:none;border-radius:5px;color:#fff;cursor:pointer;margin-top:20px;padding:10px;transition:background-color .3s ease}.room-code-modal button:hover{background-color:#45a049}.piano-key{background-color:#fff;border:1px solid #ccc;border-radius:4px;cursor:pointer;display:inline-block;height:200px;position:absolute;transition:all .1s ease;width:28px}.piano-key.black{background-color:#000;height:100px;left:0;position:absolute;width:20px;z-index:2}.piano-key.white{background-color:#fff}.piano-key.active{background-color:#00bcd4}.keyboard{background-color:#e0f7fa;border-radius:10px;box-shadow:0 4px 10px #0000001a;height:200px;margin:0 auto;padding:20px;position:relative}.keyboard .white{z-index:1}
/*# sourceMappingURL=main.7cea0591.css.map*/