:root{--midnight:#0e0813}body{margin:0;font-family:system-ui,sans-serif}h1{width:85%;margin:.5em auto;padding:0;text-align:center}main{display:flex;height:55%;align-items:center;justify-content:center}#main{max-width:95%;width:95%}.section-left{background-color:#282d50}.section-left,.section-right{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);grid-row-gap:0;grid-column-gap:.2em}.section-left p,.section-right p{color:#fff;font-size:.9em}.output{padding:1em;display:block;margin:0 auto;background-color:#2c3966;border:none;box-shadow:none;color:#fff;width:100%;border-radius:5px 5px 0 0;font-size:20px;font-family:system-ui,sans-serif}.info,.output{text-align:center}.info{font-size:18px;font-weight:300}.info,.info a{color:#69dff2}.instruction{margin-top:2em}.output::placeholder{color:#fff;font-size:15px;font-weight:lighter}.keyboard{background-color:#1e2a50;border-radius:5px;box-shadow:0 5px 10px 5px #282a50;border:3px solid #69dff2}.credit{font-size:15px}.letters{display:grid;grid-template-columns:50% 50%;text-align:center}p.fade-out,p.model-status{display:inline-block;padding:1rem}.model-status{font-weight:700;background-color:#daa520;color:var(--midnight);margin:0;animation:flash 1.5s ease-in-out infinite}@keyframes flash{0%{opacity:1}50%{opacity:0}to{opacity:1}}.fade-out{animation:fade 2.25s ease-in-out forwards;background-color:var(--midnight);color:#4caf50;margin:0}@keyframes fade{0%{opacity:1;display:block}to{opacity:0;display:none}}@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape){#main{max-width:65%}main{display:flex;max-height:100%;height:70%;align-items:center;justify-content:center;margin-top:0}.section-left,.section-right{grid-column-gap:0;grid-row-gap:2em}}@media (min-device-width:1025px){h1{padding-top:1em}main{display:flex;min-height:80%;max-height:100%;height:80%;align-items:center;justify-content:center;margin-top:0}#main{max-width:900px}.section-left,.section-right{grid-column-gap:0;grid-row-gap:2em}.section-left p,.section-right p{color:#fff;font-size:20px}.output{padding:2em;font-size:20px}}.github-corner:hover .octo-arm{animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}.wave-emoji{display:inline-block;animation:wave 2.5s infinite;transform-origin:70% 70%}@keyframes wave{0%{transform:rotate(0deg)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}60%{transform:rotate(0deg)}to{transform:rotate(0deg)}}
/*# sourceMappingURL=styles.3a71be46.css.map */