.button{--hover-bg: #ffff;--hover-text: #000;--bg: rgba(0, 0, 0, .18);color:#fff;cursor:pointer;border:1px solid white;border-radius:4px;padding:.5em 1em;background:#2e2e2e;transition:.2s}.button:hover{color:var(--hover-text);background:var(--hover-bg);box-shadow:.25rem .25rem var(--bg);color:#000;border:1px black solid}.button:active{transform:translate(0);box-shadow:none}@media(prefers-color-scheme:dark){.button{background:#1c2e4a;border-color:#ffffff24;color:#fff;box-shadow:0 12px 30px #050b1457;--bg: rgba(255, 255, 255, .08)}.button:hover{color:#fff;background:#0f1a2b;border-color:#fff3;box-shadow:0 18px 38px #050b146b}}