@import "https://fonts.googleapis.com/css?family=Open+Sans&display=swap";*{box-sizing:border-box}:root{--metro-accent-home:#d7c826;--metro-accent-blue:#1ba1e2;--metro-accent-magenta:#ff0097;--metro-accent-purple:#a200ff;--metro-accent-teal:#00aba9;--metro-accent-lime:#8cbf26;--metro-accent-brown:#960;--metro-accent-orange:#f09609;--metro-accent-red:#e51400;--metro-accent-green:#393;--primary-metro-accent:var(--metro-accent-blue);--background-dark:#1e1e1e;--tile-background:#00000069;--border-color:#555;--text-color-primary:#e0e0e0;--text-color-secondary:#a0a0a0;--text-color-terciary:#aaa;--primary-metro-accent-rgb:27, 161, 226;--square-background:#1d1d1d;--square-letter:var(--text-color-terciary);--square-number:#6c9ebf;--square-symbol:#c97e5a;--square-space:#333;--dark-matter:#000}body{background-color:#111;justify-content:center;align-items:flex-start;height:100vh;margin:0;font-family:Courier New,monospace;display:flex}.phone{background-color:#111;border:0 solid #eee;border-radius:5px;width:360px;height:600px;margin-top:13%;position:relative;overflow:hidden}.phone .content{opacity:0;background-color:#111;width:100%;height:calc(100% - 60px);padding:5px 0;transition:opacity .4s;display:block;position:absolute;top:0;left:0;overflow:hidden auto}.phone .content::-webkit-scrollbar{width:4px}.phone .content::-webkit-scrollbar-track{background:var(--background-dark)}.phone .content::-webkit-scrollbar-thumb{background:var(--metro-accent-blue);border-radius:0}.phone .content.show{opacity:1;z-index:1}.hoverboard-container{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:2px;max-width:100%;min-height:100%;display:flex}.square{background-color:var(--square-background);justify-content:center;align-items:center;width:16px;height:16px;font-family:Courier New,monospace;font-size:13px;font-weight:700;transition:all 2s;display:flex;box-shadow:0 0 2px #000}.square-letter{color:var(--text-color-terciary)}.square-number{color:var(--square-number)}.square-symbol{color:var(--square-symbol)}.square-space{color:var(--square-space)}.square:hover{transition-duration:0s}nav{z-index:2;background-color:#0000;width:100%;margin-top:-5px;position:absolute;bottom:0;left:0}nav ul{background-color:#0000;height:60px;margin:0;padding:0;list-style-type:none;display:flex}nav li{color:#777;cursor:pointer;text-align:center;flex:1;padding:10px;transition:color .3s}nav ul li p{margin:2px 0;font-size:16px}nav ul li:hover,nav ul li.active{color:var(--metro-accent-blue)}