body{background:#1b1a19;color:#bbbab9ab;font-family:sans-serif;letter-spacing:.5px;margin:0;padding:0}.main,body{height:100vh;width:100vw}.main{display:flex}section{align-items:center;flex:1 1;height:100vh}section,section .center{display:flex;flex-direction:column}section .center{box-sizing:border-box;height:100%;max-width:800px;min-width:400px;padding:14px;width:100%}section .center .scrollable{display:flex;flex:1 1;flex-direction:column;overflow-y:auto;padding:0 10px;text-align:center}section .center .scrollable::-webkit-scrollbar{background:#0000;padding:0 5px;width:6px}section .center .scrollable::-webkit-scrollbar-thumb{background:#fff3;border:6px solid #0000;border-radius:8px}section .center .scrollable .intro{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 100px);padding:10px 20px}section .center .scrollable .prediction{background:#aaa1;border:1px solid #ccc1;border-radius:9px;box-sizing:border-box;display:flex;flex-direction:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-bottom:16px;padding:10px;width:100%}section .center .scrollable .prediction p{border-bottom:3px solid #0002;font-size:18px;margin:0 0 0 80px;padding:10px 0;text-align:left}section .center .scrollable .prediction .phonics{align-items:center;display:flex;width:100%}section .center .scrollable .prediction .phonics .phonemes{align-items:center;display:flex;flex-wrap:wrap;gap:6px 3px;padding-top:6px;width:100%}section .center .scrollable .prediction .phonics .phonemes span{align-items:center;background:#0002;border-radius:4px;cursor:pointer;display:flex;font-size:16px;height:24px;justify-content:center;padding:10px;transition:.3s;width:24px}section .center .scrollable .prediction .phonics .phonemes span:hover{background:#0004}section .center .scrollable .prediction .phonics .phonemes .divider{align-items:center;display:flex;font-size:30px;font-weight:500;height:30px;justify-content:center;width:30px}section .center .textbox{align-items:flex-start;background:#aaa1;border:1px solid #ccc2;border-radius:9px;box-sizing:border-box;display:flex;padding:10px}.css-fxt409-MuiButtonBase-root-MuiIconButton-root{border-radius:9px!important}nav{flex-direction:column;font-size:16px;height:100%;justify-content:center;max-width:400px;padding:14px}nav,nav .links{box-sizing:border-box;display:flex;width:100%}nav .links{align-items:center;background:#0004;border-radius:14px;color:#bbbab9ab;height:60px;margin:10px 0;padding:8px;text-decoration:none;transition:.3s}nav .links:hover{background:#0006;color:#dbdad9ab}nav .links img{height:60px;width:60px}nav .links span{padding:0 10px;text-decoration:none}.menu{align-self:flex-end;background:#1b1a19;box-shadow:1px 1px 10px #0004;cursor:pointer;display:none;flex-direction:column;padding:20px 100% 20px 20px;position:fixed;top:0;transition:.3s;z-index:5}.menu div{background:#bbbab9ab;height:2px;margin-bottom:7px;width:30px}.menu:hover div{background:#fff}.menu-1,.menu-3{transition:.5s}.menu-2{transition:.2s}.close .menu-1{transform:translate(5px,-1px) rotate(40deg);transform-origin:0 0;transition:all .5s}.close .menu-2{visibility:hidden}.close .menu-3{transform:translateY(-10px) rotate(-40deg);transition:all .5s}@media only screen and (max-width:800px){nav{background:#1b1a19;box-shadow:1px 1px 10px #0004;position:fixed;top:66px;transform:translate(-100%);transition:.3s;z-index:2}.menu{display:flex}.show{transform:translate(0)}}
/*# sourceMappingURL=main.59426eb6.css.map*/