{"version":3,"sources":["styles.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,kBAA4B,CAC5B,yDAIC,CACD,6BACF,CAGA,GACE,SAAU,CACV,gBAAkB,CAClB,SAAU,CACV,UAAyB,CACzB,eAAgB,CAChB,iBACF,CAEA,KACE,YAAa,CACb,UAAW,CACX,kBAAmB,CACnB,sBACF,CAEA,MACE,aAAc,CACd,SACF,CAEA,cACE,wBAMF,CAEA,6BAPE,YAAa,CACb,mCAAqC,CACrC,gCAAkC,CAClC,cAAe,CACf,oBASF,CAEA,iCAEE,UAAY,CACZ,cACF,CAEA,QACE,WAAY,CACZ,aAAc,CACd,aAAc,CACd,wBAAkC,CAClC,WAAY,CACZ,eAAgB,CAChB,UAAY,CACZ,UAAW,CAEX,yBAA0B,CAC1B,cAAe,CACf,6BACF,CAEA,cANE,iBAQF,CAEA,MACE,cAAe,CAEf,eACF,CACA,cAHE,aAKF,CAEA,aACE,cACF,CAEA,qBACE,UAAY,CACZ,cAAe,CACf,mBACF,CAEA,UACE,wBAAiC,CACjC,iBAAkB,CAClB,iCAA0C,CAC1C,wBACF,CAEA,QACE,cACF,CAEA,SACE,YAAa,CACb,6BAA8B,CAC9B,iBACF,CAEA,cACE,aAAgB,CAChB,yCAA0C,CAC1C,QACF,CAEA,iBACE,GACE,SACF,CACA,IACE,SACF,CACA,GACE,SACF,CACF,CAEA,UACE,yCAA0C,CAC1C,aAAgB,CAChB,QACF,CAEA,mBACE,GACE,SAAU,CACV,aACF,CACA,GACE,SAAU,CACV,YACF,CACF,CAGA,0GACE,MACE,aACF,CAEA,KACE,YAAa,CACb,eAAgB,CAChB,UAAW,CACX,kBAAmB,CACnB,sBAAuB,CACvB,YACF,CAOA,6BACE,iBAAkB,CAClB,gBACF,CACF,CAIA,iCACE,GACE,eACF,CAEA,KACE,YAAa,CACb,cAAe,CACf,eAAgB,CAChB,UAAW,CACX,kBAAmB,CACnB,sBAAuB,CACvB,YACF,CAEA,MACE,eACF,CAOA,6BACE,iBAAkB,CAClB,gBACF,CAEA,iCAEE,UAAY,CACZ,cACF,CAEA,QACE,WAAY,CACZ,cACF,CACF,CAGA,+BACE,uCACF,CACA,wBACE,MAEE,mBACF,CACA,QAEE,wBACF,CACA,QAEE,uBACF,CACF,CACA,yBACE,+BACE,cACF,CACA,yBACE,uCACF,CACF","file":"styles.64474a6f.css","sourceRoot":"../demo/keyboard","sourcesContent":["body {\n  margin: 0;\n  background: rgb(71, 53, 128);\n  background: radial-gradient(\n    circle,\n    rgba(71, 53, 128, 1) 0%,\n    rgba(26, 55, 83, 1) 100%\n  );\n  font-family: \"Roboto\", sans-serif;\n}\n\n/* mobile-first styles */\nh1 {\n  width: 85%;\n  margin: 0.5em auto;\n  padding: 0;\n  color: rgb(255, 255, 255);\n  font-weight: 400;\n  text-align: center;\n}\n\nmain {\n  display: flex;\n  height: 55%;\n  align-items: center;\n  justify-content: center;\n}\n\n#main {\n  max-width: 95%;\n  width: 95%;\n}\n\n.section-left {\n  background-color: rgb(40, 45, 80);\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  grid-template-rows: repeat(3, 1fr);\n  grid-row-gap: 0;\n  grid-column-gap: 0.2em;\n}\n\n.section-right {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  grid-template-rows: repeat(3, 1fr);\n  grid-row-gap: 0;\n  grid-column-gap: 0.2em;\n}\n\n.section-left p,\n.section-right p {\n  color: white;\n  font-size: 0.9em;\n}\n\n.output {\n  padding: 1em;\n  display: block;\n  margin: 0 auto;\n  background-color: rgb(44, 57, 102);\n  border: none;\n  box-shadow: none;\n  color: white;\n  width: 100%;\n  text-align: center;\n  border-radius: 5px 5px 0 0;\n  font-size: 20px;\n  font-family: \"Roboto\", sans-serif;\n}\n\n.info {\n  text-align: center;\n}\n\n.info {\n  font-size: 18px;\n  color: rgb(105, 223, 242);\n  font-weight: 300;\n}\n.info a {\n  color: rgb(105, 223, 242);\n}\n\n.instruction {\n  margin-top: 2em;\n}\n\n.output::placeholder {\n  color: white;\n  font-size: 15px;\n  font-weight: lighter;\n}\n\n.keyboard {\n  background-color: rgb(30, 42, 80);\n  border-radius: 5px;\n  box-shadow: 0 5px 10px 5px rgb(40, 42, 80);\n  border: 3px solid rgb(105, 223, 242);\n}\n\n.credit {\n  font-size: 15px;\n}\n\n.letters {\n  display: grid;\n  grid-template-columns: 50% 50%;\n  text-align: center;\n}\n\n.model-status {\n  color: lightgray;\n  animation: blink 1.5s ease-in-out infinite;\n  margin: 0;\n}\n\n@keyframes blink {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.fade-out {\n  animation: fadeOut 1s ease-in-out forwards;\n  color: lightgray;\n  margin: 0;\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n    display: block;\n  }\n  to {\n    opacity: 0;\n    display: none;\n  }\n}\n\n/* Tablet Landscape */\n@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {\n  #main {\n    max-width: 65%;\n  }\n\n  main {\n    display: flex;\n    max-height: 100%;\n    height: 70%;\n    align-items: center;\n    justify-content: center;\n    margin-top: 0;\n  }\n\n  .section-left {\n    grid-column-gap: 0;\n    grid-row-gap: 2em;\n  }\n\n  .section-right {\n    grid-column-gap: 0;\n    grid-row-gap: 2em;\n  }\n}\n\n/* bigger screens */\n/* @media (min-device-width: 667px) { */\n@media (min-device-width: 1025px) {\n  h1 {\n    padding-top: 1em;\n  }\n\n  main {\n    display: flex;\n    min-height: 80%;\n    max-height: 100%;\n    height: 80%;\n    align-items: center;\n    justify-content: center;\n    margin-top: 0;\n  }\n\n  #main {\n    max-width: 900px;\n  }\n\n  .section-left {\n    grid-column-gap: 0;\n    grid-row-gap: 2em;\n  }\n\n  .section-right {\n    grid-column-gap: 0;\n    grid-row-gap: 2em;\n  }\n\n  .section-left p,\n  .section-right p {\n    color: white;\n    font-size: 20px;\n  }\n\n  .output {\n    padding: 2em;\n    font-size: 20px;\n  }\n}\n\n/* Github corner - Thanks to @tholman! https://github.com/tholman/github-corners */\n.github-corner:hover .octo-arm {\n  animation: octocat-wave 560ms ease-in-out;\n}\n@keyframes octocat-wave {\n  0%,\n  100% {\n    transform: rotate(0);\n  }\n  20%,\n  60% {\n    transform: rotate(-25deg);\n  }\n  40%,\n  80% {\n    transform: rotate(10deg);\n  }\n}\n@media (max-width: 500px) {\n  .github-corner:hover .octo-arm {\n    animation: none;\n  }\n  .github-corner .octo-arm {\n    animation: octocat-wave 560ms ease-in-out;\n  }\n}\n"]}