/* TeleMacro web: same look as the app. Roboto Mono, black, #E9D561, square boxes. */
@font-face{font-family:"Roboto Mono";src:url("fonts/RobotoMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url("fonts/RobotoMono-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url("fonts/RobotoMono-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{--y:#E9D561;--bg:#000;--fg:#fff;--corner:0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.65 "Roboto Mono",ui-monospace,Menlo,monospace;text-align:center}
main{max-width:560px;margin:0 auto;padding:40px 20px 72px}

h1{color:var(--y);font-weight:700;font-size:28px;line-height:1.25;margin:0 0 10px;letter-spacing:.02em}
.lead{margin:0 0 26px}
.meta{opacity:.6;font-size:13px;margin:0 0 26px}

/* Flat boxes: white and yellow in turn, black text, square corners. */
.box{background:#fff;color:#000;border-radius:var(--corner);padding:22px 20px;margin:12px 0}
.box.y{background:var(--y)}
.box h2{font-size:16px;font-weight:700;margin:0 0 8px;color:#000;text-transform:uppercase;letter-spacing:.02em}
.box p{margin:0 0 10px}
.box p:last-child{margin-bottom:0}
.box a{color:#000;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* One link row at the bottom, as wide as the boxes. Every button has its own full border (like the app's option buttons). */
nav{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin:34px 0 18px}
nav a{display:block;padding:12px 8px;color:#fff;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.04em;border:1px solid var(--y);margin-left:-1px}
nav a:first-child{margin-left:0}
nav a.on{background:var(--y);color:#000}
nav a:hover:not(.on){background:#1a1a1a}
.foot{opacity:.6;font-size:13px;margin:0}