:root{--bg-color: #ffffff;--bg-color-component: #ffffff;--bg-color-component-soft: #f0f0f0;--text-color: #000000;--text-color-soft: #4a4a4a;--bg-color-header: #fff;--bg-color-keyboard: #d3d6da;--bg-color-archive: #f9f9f9;--bg-color-menu: #1e1e1e;--bg-color-toggle: #ddd;--bg-color-copy-button: #e5e5e5;--bg-color-hover-copy-button: #d0d0d0}[data-theme=dark]{--bg-color: #121212;--bg-color-component: #2e2e2e;--bg-color-component-soft: #2e2e2e;--bg-color-header: #2e2e2e;--bg-color-keyboard: #444;--bg-color-archive: #222;--bg-color-menu: #5a5a5a;--text-color: #efeff1;--text-color-soft: #bfbfbf;--bg-color-toggle: #888;--bg-color-copy-button: #4b4b4b;--bg-color-hover-copy-button: #797979}body,html{background:var(--bg-color);color:var(--text-color);transition:background .3s ease,color .3s ease;padding:0;margin:0;height:100%;display:flex;justify-content:center;align-items:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}header-component{display:block;width:500px;margin:0 auto}main-nav{margin-bottom:1.5rem;align-self:flex-start}#app{width:100%;max-width:800px;min-height:99vh;margin:0 auto;padding:1rem;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box}