/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:0.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}

:root {
    --themeColor:hsl(var(--themeH),var(--themeS),var(--themeL)); 
    --themeColorDark:hsl(var(--themeH),var(--themeS),20%); 
    --themeColorLight:hsl(var(--themeH),var(--themeS),90%); 
    --themeColorExtraDark:hsl(var(--themeH),30%,10%); 
    --black:hsl(0,0%,0%);
    --white:hsl(0,0%,100%);

    --textColor:var(--themeColorDark);
    --shadowColor:var(--themeColorExtraDark);
    --negativeColor:var(--themeColorLight);
    --negativeColor2:var(--white);
    --bg:var(--themeColor); 

    color-scheme:light dark;

    color:var(--textColor);
    --spationierung:0em;
    font-size:calc(10pt + 0.35vw); line-height:1.3em; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
}

body {
    height:100vh; width:100vw; padding:0; margin:0; 
    background-color:var(--bg); 
    letter-spacing:var(--spationierung);
}

#container {
    margin:0 auto; padding:0; 
    width:calc(100vw - 4em); max-width:80em;
}
#container::after {
    content: "-";
    font-size: 0.2em;
    color:transparent;
}

h1,h2,li {white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
h1,h2 {font-weight:100; line-height:1.2em; text-align:left; column-span:all; }
h1 {font-size:2em; color:var(--themeColorLight); margin:1em 0;}
h2 {font-size:1.5em; margin:0 0 0.5em; padding:0 0 0.5em; border-bottom:0.5pt dashed var(--textColor);}
a {color:inherit; text-decoration-line:none; text-decoration-style:dashed;}
a:hover {text-decoration-line:underline;}
a + .tags {margin-left:2em;}
.tags {font-style:italic;}
.text {display:inline;}

.box {
    width:100%; 
    margin:1em 0 0; padding:1em; box-sizing:border-box;
    background-color:var(--negativeColor); box-shadow:0 0 0.5em var(--shadowColor);
    border-radius:1em;
    column-gap:3em; column-rule:0.5pt dashed var(--textColor); 
}

ul {
    margin:0; padding:0;
    line-height:1.5em; list-style-type:none; list-style-position:inside;
}
#results ul, .box.feed ul, .noicon ul {list-style-type:disc; list-style-position:inside;}


li {margin-bottom:0.5em;}

img.ico {border-radius: 3em; background-color: var(--white); height:1.5em; width:1.5em; margin-right:0.5em; vertical-align:middle;}

input {
    width:100%; 
    padding:0.3em;
    background-color:var(--white); border:0; box-shadow:0 0 0.1em var(--themeColor) inset; 
    font-size:1.3em; color:var(--shadowColor);
}

#results {
    width:calc(100% - 4em); 
    margin:0 auto; padding:1em; 
    position:relative;
    background-color:var(--negativeColor); border-radius:0 0 1em 1em; box-shadow:0 0.5em 0.5em var(--shadowColor); 
}
#results.hidden {display:none;}

#home p {margin:0;}
#home {margin-bottom:1em;}

.box.columns4 {column-width:17em;}
.box.columns2 {column-width:30em;}

.box.large li {margin:0.5em; display:inline-block;}
.box.large .text {display:none}
.box.large img.ico {height:5em; width:5em;}

.box.cloud {text-align:center; padding:1em 1em 0.5em; }
.box.cloud li {
    max-width:calc(100% - 2em);
    margin:0 0.5em 0.2em; padding:0.5em; 
    display:inline-block; border-radius:1em; 
    background-color:var(--negativeColor2);
}

#feeds {column-width:20em;}
.box.feed {display:inline-block; box-shadow:0 0 0.5em var(--shadowColor); break-inside:avoid;}
.box.feed h2 {column-span:none;}


.tags {
    margin:0 0.3em; padding:0 0.5em;
    display:inline-block; border-radius:0.7em; background-color:var(--textColor);
    color:var(--negativeColor); font-size:0.7em; font-weight:bold;
}

.noicon img.ico {display:none !important;}

@media (prefers-color-scheme:light) {
    :root {
        --spationierung:0em;
        --textColor:var(--themeColorDark);
        --shadowColor:var(--themeColorExtraDark);
        --negativeColor:var(--themeColorLight);
        --negativeColor2:var(--white);
        --bg:var(--themeColor);
   }
}

@media (prefers-color-scheme:dark) {
    :root {
        --spationierung:0.05em;
        --textColor:var(--themeColorLight);
        --shadowColor:var(--black);
        --negativeColor:var(--themeColorDark);
        --negativeColor2:var(--themeColor);
        --bg:var(--themeColorExtraDark);
    }
}

html[theme="dark"] {
        --spationierung:0.05em;
        --textColor:var(--themeColorLight);
        --shadowColor:var(--black);
        --negativeColor:var(--themeColorDark);
        --negativeColor2:var(--themeColor);
        --bg:var(--themeColorExtraDark);
}

html[theme="light"] {
        --spationierung:0em;
        --textColor:var(--themeColorDark);
        --shadowColor:var(--themeColorExtraDark);
        --negativeColor:var(--themeColorLight);
        --negativeColor2:var(--white);
        --bg:var(--themeColor);
}