body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;background-color:#282c34;color:#fff;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;height:100vh;justify-content:center;margin:0}.App{background-color:#3c414e;border-radius:10px;box-shadow:0 4px 8px #0003;max-width:90vw;overflow:hidden;padding:2rem 0;position:relative;text-align:center;width:800px}.idle-screen,.question-content,.results-screen{padding:0 4rem}h1{font-size:2.5rem;margin-bottom:1rem}p{font-size:1.2rem;margin-bottom:2rem}.controls{align-items:center;display:flex;gap:2rem;justify-content:center}.controls button,.results-screen button{background-color:#61dafb;border:none;border-radius:8px;color:#282c34;cursor:pointer;font-size:1.5rem;padding:.8rem 1.5rem;transition:background-color .2s}.controls button:hover,.results-screen button:hover{background-color:#4fa8c5}button.play-note-button{border-radius:50%;height:64px;padding:1rem;width:64px}button.play-note-button img{height:32px;width:32px}.sound-select{align-items:center;display:flex;gap:.5rem}.sound-select label{font-size:1.2rem}.sound-type-select{-webkit-appearance:none;appearance:none;background-color:#3c414e;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361dafb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.2em;border:2px solid #61dafb;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;padding:.5rem 2rem .5rem .8rem}.progress-bar{display:flex;gap:5px;height:10px;margin-bottom:2rem;padding:0 4rem}.progress-segment{background-color:#5a606e;border-radius:5px;flex:1 1;transition:all .3s ease}.progress-segment.active{box-shadow:0 0 0 2px #61dafb}.progress-segment.correct{background-color:#4caf50}.progress-segment.incorrect{background-color:#f44336}.note-buttons{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.note-buttons button{background-color:initial;border:2px solid #61dafb;border-radius:8px;color:#61dafb;cursor:pointer;font-size:1.2rem;min-width:50px;padding:.8rem;transition:background-color .2s,color .2s}.note-buttons button:hover{background-color:#61dafb;color:#282c34}.note-buttons button:disabled{cursor:not-allowed;opacity:.5}.note-buttons button.correct-answer{background-color:#4caf50;border-color:#4caf50;color:#fff}.note-buttons button.incorrect-answer{background-color:#f44336;border-color:#f44336;color:#fff}.note-buttons button.correct-answer:disabled,.note-buttons button.incorrect-answer:disabled{opacity:1}.message{font-size:1.5rem;font-weight:700;height:30px;margin-top:2rem}.message.correct{color:#4caf50}.message.incorrect{color:#f44336}.results-screen{align-items:center;animation:fade-in .5s .15s forwards;display:flex;flex-direction:column;gap:1rem}.results-screen h1{margin-bottom:0}.results-screen p{font-size:1.5rem;margin-bottom:1rem}.next-question-button{animation:fade-in .3s forwards;background:#0000;border:none;color:#61dafb;cursor:pointer;font-size:4rem;font-weight:100;line-height:1;padding:1rem;position:absolute;right:1rem;top:50%;transform:translateY(-50%);transition:color .2s}.next-question-button:hover{color:#fff}@keyframes slide-out-left{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100%)}}@keyframes slide-in-right{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.question-content.slide-out{animation:slide-out-left .15s ease-in-out forwards}.question-content.slide-in{animation:slide-in-right .15s ease-in-out forwards}
/*# sourceMappingURL=main.c89f6e9b.css.map*/