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