html{--bg-1:#fff;--bg-2:#e0e6eb;--bg-3:#c2cdd6;--fg-1:#212121;--fg-2:#4d4d4d;--link:#1c7ed4;--link-hover:#3492e5;--link-active:#176bb5}html.dark{--bg-1:#2e2e2e;--bg-2:#4d4d4d;--bg-3:#666;--fg-1:#e6e6e6;--fg-2:#b3b3b3;--fg-3:#999;--link:#73c1fc;--link-hover:#91cefd;--link-active:#4baffb}body{--border-radius:4px;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;--font-mono:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,"DejaVu Sans Mono",monospace;background:var(--bg-1);color:var(--fg-1);font-family:var(--font);height:calc(100vh - 2rem);margin:1rem;line-height:1.5}h1,h2,h3,h4,h5,h6{font-variant-numeric:tabular-nums;font-weight:400;line-height:1.1}:-webkit-any(h1,h2,h3,h4,h5,h6,p){margin:1rem .1rem}:is(h1,h2,h3,h4,h5,h6,p){margin:1rem .1rem}label{margin:.5rem .1rem}:-webkit-any(h1,h2,h3,h4,h5,h6,p,label):first-child{margin-top:0}:is(h1,h2,h3,h4,h5,h6,p,label):first-child{margin-top:0}:-webkit-any(h1,h2,h3,h4,h5,h6,p,label):last-child{margin-bottom:0}:is(h1,h2,h3,h4,h5,h6,p,label):last-child{margin-bottom:0}a{color:var(--link)}a:hover{color:var(--link-hover)}a:active{color:var(--link-active)}label{align-items:center;gap:.5rem;display:flex}label input{margin:0}button,input,select{font-family:inherit;font-size:inherit}button{background:var(--link);color:var(--bg-1);border-radius:var(--border-radius);border:none;padding:.5rem 1rem}button:hover{background:var(--link-hover)}button:active{background:var(--link-active)}:-webkit-any(button,button:hover,button:active):disabled{background:var(--link);filter:grayscale();opacity:.4}:is(button,button:hover,button:active):disabled{background:var(--link);filter:grayscale();opacity:.4}input,textarea,select{border:1px solid var(--bg-2);border-radius:var(--border-radius);box-sizing:border-box;padding:.5rem}input,textarea{background:var(--bg-1);color:inherit}select:not([multiple]){background:var(--bg-2)}textarea{font-family:var(--font-mono);font-size:.9rem}form{flex-direction:column;align-items:baseline;gap:1rem;display:flex}ul:has(li):has(form){padding:0;list-style:none}li form{flex-direction:row;gap:.5rem;margin:.5rem 0}nav{background:var(--bg-2);z-index:2;border-radius:var(--border-radius);gap:1em;margin:0 0 1em;padding:1em;display:flex;position:relative}nav a{text-decoration:none}nav a[aria-current=true]{border-bottom:2px solid}ul:has(form){padding:0;list-style:none}progress{margin:.5rem 0}progress:first-child{margin-top:0}progress:lsat-child{margin-bottom:0}.error{color:red}code{background:var(--bg-2);font-family:var(--font-mono);border-radius:var(--border-radius);padding:.15rem .3rem;font-size:.9em}ul.todos{padding:0}ul.todos li form{-webkit-user-select:none;user-select:none;background:var(--bg-1);filter:drop-shadow(2px 3px 6px #0000001a);border-radius:5px;align-items:center;gap:.5em;margin:0 0 .5em;padding:.5em .5em .5em 1em;transition:filter .2s,opacity .2s;display:flex;position:relative}ul.todos li:not(:has(>form)){-webkit-user-select:none;user-select:none;background:var(--bg-1);filter:drop-shadow(2px 3px 6px #0000001a);border-radius:5px;align-items:center;gap:.5em;margin:0 0 .5em;padding:.5em .5em .5em 1em;transition:filter .2s,opacity .2s;display:flex;position:relative}ul.todos .done{filter:none;opacity:.4}ul.todos button{cursor:pointer;aspect-ratio:1;opacity:.5;background-color:#0000;background-position:50%;background-repeat:no-repeat;background-size:1rem 1rem;border:none;width:3em;height:3em;margin:-.5em -.5em -.5em 0;transition:opacity .2s}ul.todos button:hover{opacity:1}

:root {
    --debug-outline: none;

    --lager-color: #fbdf57;
    --white-color: #25ccee;
    --fruits-color: #ff79cb;
    --black-color: #573738;
    --ale-color: #ff9042;
    --ipa-color: #ff101a;
    --hazy-color: #e2d06e;
    --sour-color: #cb00cb;

    --special-color: #ed8bd1;
    --ultimate-color: #33f8e8;
    --extreme-color: rgba(244, 241, 48, 0.82);
    --limited-color: #b4f886;
    --basic-color: #87b4f3;
    --no-grade-color: lightgray;
    --beer-not-applied-color: white;


    --body-background-color: #e0e3e3;

    --noto-sans-jp: Lato, 'Noto Sans JP', sans-serif;
}