@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html,body{background:#f0f0f0;margin:0;padding:0;font:400 19px/1.5 "Montserrat",sans-serif;text-wrap:balance;color:#000;}
body{display:flex;align-items:center;justify-content:center;min-height:100vh;}
main{box-sizing:border-box;background:#fff;border-radius:5px;max-width:90vmin;margin:2em auto;border-left:#ffc720 solid 10px;padding:20px 30px;box-shadow:1em 1em 5em #00000020;}
main.error{border-left-color:#ff7320;}
::selection{color:#fff;background:#007640;}
h1{color:#007640;font-weight:600;font-family:inherit;margin:0 0 1ex;font-size:24px;}
p{margin:0 0 1ex;font:inherit;}
.copy{user-select:all;}
dl>dt,dl>dd{display:inline;margin:0;padding:0;font:inherit;}
dl>dt{text-transform:uppercase;color:#007640;}
dl>dt:after{content:":";}
dl>dd:after{content:"\A";white-space:pre-wrap;}
@media (max-width: 599px){
    main{margin:0;max-width:none;width:100%;border-radius:0;min-height:100vh;}
}

.sd-button{--size:60px;--color-bg:#d7dfda;--color:#000;display:inline-block;height:var(--size);font:600 calc(0.3667 * var(--size))/var(--size) sans-serif;text-decoration:none;text-transform:uppercase;border:none;border-radius:calc(0.133 * var(--size));margin:0;padding:0 calc(0.7 * var(--size));user-select:none;text-align:center;white-space:nowrap;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;background:var(--color-bg);color:var(--color);vertical-align:top;}
button.sd-button:enabled,a.sd-button{cursor:pointer;}
button.sd-button:disabled,.sd-button.disabled{cursor:not-allowed;filter:grayscale(1) contrast(0.5) brightness(1.2);}
.sd-button.sd-button-main{--color-bg:#007640;--color:#fff;}

.sd-buttons{display:flex;flex-wrap:wrap;gap:15px}

.sd-button{--size:50px;}