style.css

@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap);#phone{width:228.8px;height:600px;background-image:url(screenshots/kaiosphone.png);background-size:contain;transform:translate(-50%);position:absolute;left:50%;top:2%}#statusbar{height:26px;width:240px;background-color:#000;color:#fff;position:absolute;top:40px;left:-6px;transition:background-color .2s linear;text-align:right;box-sizing:border-box;padding-right:2px;font-size:0}#statusbar div{display:inline-block;position:unset}#time{font-size:14px;height:100%;line-height:25px;margin-left:4px;margin-right:2px}#ime{position:absolute!important;left:5px;width:12.8px;height:17.6px;font-size:13px;top:3px}[data-icon]{font-size:16px;margin-left:2px;margin-right:2px;font-style:normal}[data-icon]::after{content:attr(data-icon);font-family:gaia-icons}#screen{top:34px;position:absolute;left:-6px;pointer-events:none}#keyselector,#screen,#statusbar{transform:scale(.8)}body,html{width:100%;height:100%;padding:0;margin:0}#keyselector{display:flex;position:absolute;top:272px;left:-6px;height:30px;width:240px;background-color:#ccc}#keyselector div{width:30px;height:30px;display:flex;align-items:center;justify-content:center;position:unset}#keyselector div.selected{background-color:#00f;color:#fff}*{box-sizing:border-box;position:absolute;font-family:"Open Sans";font-weight:500}@media (prefers-color-scheme:dark){body{background-color:#000}p{color:#fff;font-weight:700;padding:14px;width:30vw}}.backspace,.char,.mode{width:60px;height:30px}.char[data-key="1"],.char[data-key="4"],.char[data-key="7"],[data-key=SoftLeft]{left:17px}.char[data-key="0"],.char[data-key="2"],.char[data-key="5"],.char[data-key="8"],[data-key=ArrowDown],[data-key=ArrowUp]{left:86px}.char[data-key="3"],.char[data-key="6"],.char[data-key="9"],.mode[data-key="#"],[data-key=SoftRight]{right:17px}.char[data-key="1"],.char[data-key="2"],.char[data-key="3"]{bottom:133px}.char[data-key="4"],.char[data-key="5"],.char[data-key="6"]{bottom:93px}.char[data-key="7"],.char[data-key="8"],.char[data-key="9"]{bottom:54px}.char[data-key="0"],.mode[data-key="#"]{bottom:14px}[data-key=ArrowDown],[data-key=ArrowUp],[data-key=SoftLeft],[data-key=SoftRight]{width:60px;height:20px}[data-key=ArrowUp],[data-key=SoftLeft],[data-key=SoftRight]{bottom:252px}.backspace{bottom:212px;right:0}.call,.end,[data-key=ArrowDown]{bottom:180px}[data-key=ArrowLeft],[data-key=ArrowRight]{width:20px;height:60px;bottom:195px}[data-key=ArrowLeft]{left:67px}[data-key=ArrowRight]{right:67px}[data-key=Enter]{bottom:201px;right:90px;width:50px;height:50px}@font-face{font-family:gaia-icons;src:url(screenshots/gaia-icons.ttf)}