@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-Bold.woff2");
    font-weight: 700;
}
@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2");
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2");
    font-weight: 800;
}
@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2");
    font-weight: 800;
    font-style: italic;
}
@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-ExtraLight.woff2");
    font-weight: 200;
}
@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2");
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-Light.woff2");
    font-weight: 300;
}
@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-LightItalic.woff2");
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-Medium.woff2");
    font-weight: 500;
}
@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-MediumItalic.woff2");
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-Regular.woff2");
    font-weight: 400;
}
@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2");
    font-weight: 600;
}
@font-face {
    font-family: "atkinson-hyperlegible-next";
    src: url("/static/fonts/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2");
    font-weight: 600;
    font-style: italic;
}


:root {

    font-family: atkinson-hyperlegible-next, sans-serif;
    --pico-font-family: atkinson-hyperlegible-next, sans-serif;

    /* --highlight-hue: 240; */
    --highlight-hue: 201;

    --page-background: hsl(var(--highlight-hue), 70%, 5%);
    --content-background: hsl(var(--highlight-hue), 20%, 0%);
    --sidebar-background: hsl(var(--highlight-hue), 20%, 0%);
    --sidebar-border-color: hsl(var(--highlight-hue), 20%, 20%);
    --sidebar-link-color: hsl(var(--highlight-hue), 10%, 80%);
    --link-color: hsl(var(--highlight-hue), 75%, 60%);

    --link-color2: hsl(var(--highlight-hue), 40%, 20%);

    --button-color: hsl(var(--highlight-hue), 75%, 50%);
    --button-highlight-color: hsl(var(--highlight-hue), 40%, 40%);
    --button-border: hsl(var(--highlight-hue), 60%, 60%);

    --button2-color: var(--link-color2);
    --button2-border: var(--sidebar-border-color);

    --contentwidth: 35vw;

    --pico-spacing: 0.5rem;
    --pico-transition: 0.1s ease-in-out;

    --pico-form-element-spacing-vertical:   0.33rem;
    --pico-nav-link-spacing-vertical:       0.33rem;
    --pico-form-element-spacing-horizontal: 0.75rem;
    --pico-nav-link-spacing-horizontal:     0.75rem;

    --menu-highlight-color: #fff;
    --body-color: #ddd;

    --user-box-background-color: hsl(240, 20%, 5%);
    --user-box-border-color: solid     hsl(240, 40%, 20%);
    --pico-card-sectioning-background-color: #ff0000;

    /* --fallback-icon-background: hsl(var(--highlight-hue), 40%, 50%); */
    --fallback-icon-foreground: var(--pico-primary-background);
    /*--fallback-icon-foreground: var(--pico-secondary-inverse); */
    --fallback-icon-background: var(--pico-card-background-color);

    scrollbar-color: hsl(var(--highlight-hue), 75%, 15%) var(--body-color);


    /* calculate some touchscreen size units */
    --touch-unit: clamp(10mm, 2.5rem, 12vh);


}

@media only screen and (prefers-color-scheme: light) {
    :root {
        --page-background: hsl(var(--highlight-hue), 70%, 95%);
        --content-background: hsl(var(--highlight-hue), 20%, 90%);
        --sidebar-background: hsl(var(--highlight-hue), 20%, 90%);
        --sidebar-border-color: hsl(var(--highlight-hue), 20%, 50%);
        --sidebar-link-color: hsl(var(--highlight-hue), 10%, 20%);
        --link-color: hsl(var(--highlight-hue), 75%, 35%);

        --link-color2: hsl(var(--highlight-hue), 40%, 80%);

        --button-color: hsl(var(--highlight-hue), 75%, 50%);
        --button-highlight-color: hsl(var(--highlight-hue), 40%, 40%);
        --button-border: hsl(var(--highlight-hue), 60%, 60%);
        --menu-highlight-color: #000;
        --body-color: #333;
        --user-box-background-color: hsl(240, 20%, 95%);
        --user-box-border-color: hsl(240, 40%, 50%);
        /* --fallback-icon-foreground: var(--pico-secondary-inverse); */
    }
}
@media only screen and (prefers-color-scheme: dark) {
    :root {
        --pico-card-sectioning-background-color: #1e242e;
    }
}

html,body {
    overflow-x: hidden;
}

/*
main, div#content {
    height: auto;
}
*/

main,body {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

body {
    width: 100vw;
    min-height: 100vh;
}

a:link, a:visited {
  --pico-text-decoration: none;
}
a:hover {
  --pico-text-decoration: underline;
}


main > aside {
    width: clamp(15vw, 32ch, calc(98vw - var(--contentwidth)));
}

@media screen and (min-width: 50ch) {

    main > div#content {
        width: var(--contentwidth);
        left: calc(50vw - var(--contentwidth)/2);
        position: relative;
    }
    main > div#content.two-column {
        width: calc(var(--contentwidth) * 2);
        left: calc(50vw - var(--contentwidth) + 7.5vw);
    }

    main > aside {
        min-height: 100vh;
        max-height: 100vh;
        position: fixed;
        left: calc(var(--contentwidth) / 2 + 50.5vw);
        top: 0;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none;
    }

    main > aside:first-child {
        left: auto;
        right: calc(var(--contentwidth) / 2 + 50.5vw);
    }
    main > aside.two-column:first-child {
        right: calc(var(--contentwidth) + 43vw);
    }

}


main > aside > ul {
    padding: 0;
}

main > aside > nav#main-menu > ul > li {
    font-weight: 500;
    font-size: 1.25rem;
}

main > aside > nav#main-menu {
    margin-top: calc(0.5 * var(--pico-nav-element-spacing-vertical));
    margin-bottom: var(--pico-nav-element-spacing-vertical);
}

main aside nav ul li *[aria-current] {
    font-weight: 900;
}
main aside nav ul li a {
    --pico-color: var(--pico-secondary);
}
main aside nav ul li a[aria-current] {
    --pico-color: var(--pico-primary);
}

main aside nav ul li a:hover[aria-current] {
    text-decoration: none
}
main aside nav ul>li>ul {
    margin-left: calc(2 * var(--pico-nav-element-spacing-horizontal)) !important;
    margin-top:  calc(0.75 * var(--pico-nav-element-spacing-vertical)) !important;
}

article.muted {
    background-color: var(--muted-article-color);
    border-color: var(--muted-article-border);
}
article.muted > header {
    background-color: var(--muted-article-border);
}

article header:not(:first-child) {
    margin-top: 0.25rem;
}

article header.grid,
article header .grid {
    grid-template-columns: 2.5rem 7fr 1.5rem;
}

article header span.icon {
    margin: 0 0 0 0;
    position: relative;
    top: -0.125rem;
    right: -0.375rem;
}

.feed-info header.grid {
    grid-template-columns: 2.5rem auto auto;
}

.sidebar-menu-item {
    padding: 0.33rem var(--pico-nav-element-spacing-horizontal);
}

.sidebar-menu-item span.icon,
#sidebar-left span.icon
{
    position: relative;
    top: -0.1rem;
    margin-right: 1rem;
    margin-left: 1rem;
}

#sidebar-left #post-widget span.icon {
    width: 3rem;
    margin: 0 0 0 0;
}
#sidebar-left #post-widget svg.feather {
    width: 3rem;
    height: 3rem;
}


hgroup > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


.hidden {
    display: none;
}
.visible {
    display: block;
}


.feather {
  width: 1.25em;
  height: 1.25em;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.feather-solid {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: currentColor;
}

span.icon {
    position: relative;
    top: -0.133em;
}

.notification-badge {
  display: inline-block;
  background-color: var(--pico-color-red-650);
  color: white;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 900;
  padding: 0.1rem 0.4rem 0 0.35rem;
  position: absolute;
  top: -0.5rem;
  right: -0.66rem;
  border-radius: 0.5rem;
}

.superscript-icon .feather {
    width: 0.75em;
    height: 0.75em;
    position: relative;
    top: -0.25em;
}

button .feather, a[role=button] feather {
    margin-top: -0.25em;
}

a.stealth_clickable {
    text-decoration: none;
    color: inherit;
}

/***** ARTICLES *****/

article {
    clear: both;
    margin-bottom: calc(var(--pico-block-spacing-vertical) * 3);
}

a:not(.article-extern-link)[target=_blank]::after{
    content: "";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" stroke="hsl(240, 60%, 80%)" stroke-width="2" viewBox="0 0 24 24"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 0.5em;
    margin-left: 0.125em;
    opacity: 80%;
}

.article-content {
    line-height: 1.5;
    margin: 0;
    font-size: 1rem;
}

div#content.two-column .article-content {
    column-count: 1;
}

div#content.two-column .article-content:has(p:nth-of-type(3)),
div#content.two-column .article-content:has(div:nth-of-type(3))
{
    column-count: 2;
}

.article-content * {
    box-sizing: border-box !important;
}

.article-content img {
    max-width: 100%;
    object-fit: contain;
    box-sizing: border-box !important;
}

.article-content > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* workaround for some RSS feed content margin brainworms */
.article-content br:not(:first-child)
{
    margin-top: 0;
    margin-bottom: 0;
    height: 0;
    display: none;
}

.expandable {
    margin: 0;
}

.expandable-proto {
    max-height: 70vh;
    overflow: hidden;
}

.expandable-proto.smaller {
    max-height: 30vh;
}

.expandable.expanded {
    max-height: none;
    padding-bottom: 1rem;
}

.expandable:not(.expanded) + .expandable-gradient,
*:not(.expandable) + .expandable-gradient
{
    display: block;
    position: relative;
    bottom: 0;
    left: 0;
    margin-top: -10vh;
    margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
    width: inherit;
    height: 10vh;
    background: linear-gradient(to bottom, rgba(127, 127, 127, 0) 0%, var(--pico-card-background-color) 75%);
}

.more-button-container {
    display: none;
    text-align: right;
}

.expandable + * + .more-button-container {
    display: block;
    text-align: right;
    position: sticky;
    bottom: 2rem;
    right: 0.25rem;
    margin-top: -2rem;
    margin-bottom: 2rem;
}
.expandable + * + .more-button-container + *{
    margin-top: -1.5rem;
}

.expand-button {
    font-size: 90%;
    padding: calc(var(--pico-form-element-spacing-vertical) / 2) var(--pico-form-element-spacing-vertical);
    border: solid rgba(127,127,127,0.66) 1px;
    box-shadow: 0.125rem 0.125rem 0.25rem var(--page-background);
}

.filter-hidden {
    max-height: 0px;
    visibility: hidden;
    margin: 0 0 0 0;
}


figure {
    /*
    background-color: var(--pico-card-sectioning-background-color);
    padding: 1rem;
    */
    display: inline-block;
    border: solid rgba(127,127,127,0.05) 1px;
    font-size: 90%;
    text-align: center;
}

.article-controls {
    margin-bottom: calc(var(--pico-block-spacing-vertical) * -0.5);
}

.article-controls > * {
    text-align: center;
}

.article-controls svg {
    fill: var(--pico-color);
    opacity: 50%;
}

.article-controls .star-active svg {
    fill: hsl(50, 100%, 50%);
    stroke: hsl(50, 75%, 50%);
    opacity: 100%;
}

/* threaded articles */
article article {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
/*
article article:first-child {
    margin-top: 0;
}

article article:last-child {
    margin-bottom: 0;
}
*/
article span:first-child article {
    margin-top: 0;
}
article span:last-child article {
    margin-bottom: 0;
}

article.thread-container {
    background-color: var(--muted-article-color);
    border-color: var(--muted-article-border);
}

article.thread-main {
    font-size: 115%;
}

article.thread-reply,
article.thread-parent {
    margin-left: 2rem;
    margin-top: 0;
    margin-bottom: 0.75rem;
}
article.thread-reply .feed-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    position: relative;
    top: calc(var(--pico-block-spacing-vertical) * -0.66);
}
article.thread-reply header .grid {
    grid-template-columns: 1.5rem 7fr 1.5rem;
}
article.thread-reply::before,
article.thread-parent::before {
    content: "";
    position: relative;
    left: -2rem;
    display: block;
    height: inherit;
    float: left;
    margin-right: -1.5rem;
}




/*** COLORS ***/


body {
    /*background-color: hsl(240, 40%, 10%);*/
    background-color: var(--page-background);
}


div#sidebar-left > a:hover,
div#sidebar-right > a:hover
{
    background-color: var(--link-color2);
}

.user-box {
    background-color: var(--user-box-background-color);
    border: solid     var(--user-box-border-color) 0.125rem;
}

#sidebar-left hr {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

#sidebar-footer {
    text-align: center;
}
#sidebar-footer a {
    display: inline-block;
    margin: 0 0.5rem;
    color: var(--pico-color);
    font-size: 0.8rem;
    font-weight: 500;
}

code {
    padding-bottom: 0;
    padding-top: 0;
    background-color: rgba(127,127,127,0.125);
    line-height: inherit;
}


/*** LAYOUT ***/



body {
    color: var(--body-color);
    font-family: atkinson-hyperlegible-next, sans-serif;
    margin: 0;
}

#content a:link not([role=button]) {
    color: var(--link-color);
    text-decoration: none;
    font-weight: bold;
}
#content a:visited not([role=button]) {
    color: var(--link-color);
    text-decoration: none;
    font-weight: bold;
}
#content a:hover not([role=button]) {
    text-decoration: underline;
}


.user-box {
    border: solid rgba(127,127,127,0.125) 1px;
    border: solid hsla(var(--highlight-hue), 70%, 33%, 0.25) 1px;
    border-radius: 0.66rem;
    margin-left: 0.5rem;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0 !important;
    font-size: 75%;
    min-height: 4rem;
}

.user-box a.user-name {
    color: inherit;
    font-size: 1.25em;
}

.user-box a.user-profile-link {
    display: block;
    margin-top: 0;
    font-size: 0.9em;
}
.user-box a {
    text-decoration: none;
    font-weight: bold;
}
.user-box a:hover {
    text-decoration: underline;
}

.user-box svg {
    display: block;
    float: left;
    margin: 0.4rem 0.5rem 0 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    stroke: var(--fallback-icon-foreground);
    background-color: var(--fallback-icon-background);
    border-radius: 0.25rem;
    border: solid var(--fallback-icon-background) 0.125rem;
}

.user-box img {
    display: block;
    float: left;
    margin: 0.2rem 0.5rem 0 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.25rem;
}

img.header-avatar {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.25rem;
    margin-top: -0.125rem;
    border-radius: 0.25rem;
}

img.inline-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 0.25rem;
}
img.small-avatar,
svg.small-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.1rem;
}

.user-box div {
    margin-left: 3rem;
}

div#sidebar-right > *,
div#sidebar-left > * {
    display: block;
    min-height: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
div#sidebar-left > * {
    padding-left: 3rem;
}
div#sidebar-right > * {
    padding-right: 0;
}

div#sidebar-right a,
div#sidebar-left a {
    color: var(--sidebar-link-color);
    text-decoration: none;
}
div#sidebar-right a:hover,
div#sidebar-left a:hover {
    text-decoration: underline;
}
div#sidebar-right > a,
div#sidebar-left > a {
    margin-top: 1rem;
}

div#sidebar-right .icon,
div#sidebar-left  .icon {
    font-size: 2em;
    width: 3rem;
    display: block;
    float: left;
    text-align: center;
    position: relative;
    top: -0.75rem;
}
div#sidebar-left  .icon {
    right: 0;
}
div#sidebar-right .icon {
    right: 2rem;
}
#sidebar-right article {
    background-color: transparent;
    margin-top: -0.5rem;
    font-size: 80%;
    line-height: 1rem;
}
#sidebar-right article svg {
    margin: -0.125rem 0.25rem 0 0.4rem;
    width: 1rem;
    height: 1rem;
}

#sidebar-logo {
    font-size: 2rem;
    margin-left: 3.5rem;
    height: 2rem;
    font-weight: 900;
}
#sidebar-logo a {
    color: var(--body-color) !important;
    text-decoration: none;
}

/*
li#search_widget {
    margin-bottom: -1rem;
}
*/

/*
div#content {
    margin-top: 2.5rem;
    min-height: 100%;
    width: var(--contentwidth);
    position: absolute;
    left: calc(50vw - var(--contentwidth)/2);
    padding: 0;
    box-sizing: border-box;
}
*/

/*
div#content > * {
    padding: 0.5em 1em;
}
*/

div#content > hr {
    padding: 0;
    clear: both;
    margin: 2px 0;
}

div#content nav details.dropdown {
    font-size: 90%;
}
div#content nav details.dropdown summary {
    font-size: inherit;
}


.landing-search {
    border-radius: 2rem;
}


.dropdown_no_icon::after {
    display: none !important;
}

.landing-search:focus-within {
    outline: none;
    border-color: inherit;
    box-shadow: none;
    border: var(--pico-border-width) solid var(--pico-form-element-active-border-color);
}
.landing-search:focus-within *:focus {
    border: none;
    box-shadow: none;
}
/* .landing-search:focus-within details { */
.landing-search:focus-within {
}


/***** ARTICLES *****/


.article-title {
    font-size: 120%;
    font-weight: bold;
    text-decoration: none;
    color: inherit;
    display: block;
    margin-right: 2rem;
}
.article-title:visited {
    color: inherit;
}

.article-date, .article-author, .article-stats {
    font-size: 80%;
    opacity: 80%;
    line-height: 2em;
    margin: -0.25rem 0;
}
.article-stats {
    text-align: right;
}

.article-author {
    float: right;
    position: relative;
    right: -2rem;
}

.article-extern-link {
    float: right;
}

article.filtered-article header img {
    opacity: 50%;
}
article.filtered-article header a {
    color: var(--pico-secondary);
}

.article-filtered-notification {
    margin-left: 3.25rem;
    margin-top: -2rem;
    margin-bottom: 0;
    font-style: italic;
    color: var(--pico-secondary);
}
.article-filtered-notification a {
    font-style: normal;
    font-size: 90%;
}


/* some annoyances */
h1 {
    font-size: 180%;
}
h2 {
    font-size: 145%;
}
h3 {
    font-size: 130%;
}
h4 {
    font-size: 115%;
}

#channels > a {
    display: block;
    padding: 0.5em 0;
}

#selected_channel {
    display: block;
}
#selected_channel > a {
    display: block;
    font-size: 75%;
}


/***** CONTEXT MENU *****/

.context-menu {
    visibility: hidden;
    display: block;
    width: 15rem;
    border: solid var(--sidebar-border-color) 1px;
    background-color: var(--sidebar-background);
    position: absolute;
    border-radius: 0.25rem;
    padding: 0 0.2rem;
}

.context-menu > * {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.context-menu > a, .context-menu > button {
    background: none;
    color: var(--link-color);
    border: none;
    font-size: 90%;
    font-weight: bold;
    text-align: left;
    padding: 0.5rem 1rem;
    margin: 0.2rem 0;
    border-radius: 0.5rem;
    cursor: pointer;
}
.context-menu > a:hover, .context-menu > button:hover {
    background-color: var(--button2-color);
    text-decoration: none;
}


button.context-menu-button + .context-menu:active,
button.context-menu-button:focus + .context-menu {
    visibility: visible;
}




/***** FEED INFO *****/

#content > .feed-info {
    min-height: 3rem;
    margin-bottom: 2rem;
}

.feed-title,
.profile-title {
    font-size: calc(var(--pico-font-size) * 1.2);
}

header.feed-title {
    font-size: 120%;
    font-weight: bold;
}

.feed-title nav {
    font-size: 1em;
}

#content .line-item {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    clear: both;
}
#content .line-item:first-child {
    margin-top: 0.25rem;
}
#content .line-item:last-child {
    margin-bottom: 0.25rem;
}



#sidebar-feed-list .feed-title {
    font-size: inherit;
    padding-left: 2rem;
    line-height: 1.2em;
}
#sidebar-feed-list .feed-title a:link,
#sidebar-feed-list .feed-title a:visited {
    font-weight: normal;
    text-decoration: none;
    color: var(--sidebar-link-color);
}
#sidebar-feed-list .feed-title a:hover {
    color: var(--pico-color);
}

#sidebar-feed-list .line-item {
    display: block;
    clear: left;
    margin: 0 0 0.5em 0;
}

.feed-subtitle,
.profile-subtitle {
    font-weight: normal;
    min-height: 1rem;
    color: var(--pico-secondary);
}

.feed-info-controls {
    text-align: right;
}

.subscribe-controls {
    float: right;
    vertical-align: top;
}

.subscribe-controls {
    transform: scale(0.9);
    transform-origin: right top;
}

.hide-subscribed-feeds article:has(.subscribed) {
    display: none;
}

.feed-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--body-color);
    border-radius: 5px;
    background-color: var(--fallback-icon-background);
    position: relative;
    left: -0.25rem;
}

.feed-icon svg {
    width: 2rem;
    height: 2rem;
    margin: 0.2rem;
    stroke: var(--fallback-icon-foreground);
    background-color: var(--fallback-icon-background);
    border-radius: 0.25rem;
}

.feed-title .feed-icon {
    border-radius: 5px;
    float: left;
}

aside .line-item .feed-icon {
    width: 3.5rem;
    margin-left: -4.5rem;
    margin-right: 0.5rem;
    margin-top: -0.5rem;
}
.line-item .feed-icon {
    float: left;
    clear: left;
    margin-right: 1rem;
}

* > .hover-only {
    opacity: 0;
}
*:hover > .hover-only {
    opacity: 1.0;
}

#sidebar-feed-list .feed-icon,
#sidebar-feed-list .user_icon img,
#sidebar-feed-list .user_icon svg {
    width: 1.25em;
    height: 1.25em;
    float: left;
    clear: left;
    margin-left: -1.75rem;
    margin-top: 0;
    border: none;
    border-radius: 0.25rem;
    background-color: var(--pico-card-sectioning-background-color);
}

#sidebar-feed-list .feed-icon svg {
    width: 1.3em;
    height: 1.3em;
    margin: 0;
    border-radius: 0.25rem;
}
#sidebar-feed-list .user_icon svg {
    width: 1.3em;
    height: 1.3em;
    padding: 0.05em;
}

.feed-stats {
    font-size: 0.75rem;
    opacity: 0.75;
    color: var(--pico-secondary);
}

ul#sidebar-channel-list {
    padding-left: 1.5rem;
}

ul#sidebar-channel-list > li {
    padding-top: 0.25em;
}
ul#sidebar-channel-list > li > a {
    padding: 0 0 0 1em;
}


/***** USER PROFILES *****/

article .profile {
    width: inherit;
    overflow: hidden;
    padding: 0;
}

.profile-title {
    padding-bottom: 1rem;
}

.profile-controls {
    float: right;
    margin-top: calc(0rem - var(--pico-nav-element-spacing-vertical));
}
.follow-controls {
    padding-right: var(--pico-nav-element-spacing-horizontal);
}

.profile-header-container {
    display: block;
    position: relative;
    left: 0;
    top: 0;
    width: var(--contentwidth);
    height: calc(var(--contentwidth) * 0.28125); /* 32:9 */
    overflow: hidden;
    margin-bottom: 1rem;
    text-align: center;
}
.profile-header-container-smaller {
    height: calc(var(--contentwidth) * 0.140625); /* 32:9 */
    background-size: var(--contentwidth) calc(var(--contentwidth) * 0.140625);
}
.profile-header {
    width: var(--contentwidth);
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: rgba(127,127,127,0.05);
}
.profile-header-smaller {
    width: var(--contentwidth);
    height: 100%;
    object-fit: cover;
    display: block;
    backdrop-filter: blur(10px);
    padding: 0 calc(var(--contentwidth) / 4);
}

.profile-avatar-container {
    position: relative;
    display: block;
    float: left;

    margin: -4rem 1rem 1rem 1rem;

    width: 8rem;
    height: 8rem;
    border: solid var(--page-background) 2px;
    border-radius: 10px;

    overflow: hidden;

    z-index: 100;
}
.profile-avatar-container-smaller {
    width: 6rem;
    height: 6rem;
    margin: -2rem 1rem 1rem 1rem;
}
.profile-avatar {
    width: 8rem;
    height: 8rem;
    background-color: var(--fallback-icon-background);
    stroke: var(--fallback-icon-foreground);
    stroke-width: 1;
}
.profile-avatar-smaller {
    width: 6rem;
    height: 6rem;
}
.profile-display-name {
    font-size: 75%;
    opacity: 66%;
}

.tag {
    display: inline-block;
    margin: 0 1rem;
    padding: 0.125em 0.5em;
    border-radius: 0.333rem;
}


/***** PREFERENCE MENUS *****/

.settings {
    font-size: 1rem;
}
.settings-field-info {
    font-size: 0.8rem;
}

.settings div.checkbox {
    grid-template-columns: 2em 1fr;
    vertical-align: top;
}

.settings form > .grid {
    vertical-align: top;
    margin-bottom: 0.75rem;
}

.settings form > .grid:first-of-type {
    margin-bottom: 0;
}
.settings form > .grid:first-of-type > * {
    margin-bottom: 0;
}

.settings input[type="checkbox"] {
    /*
    width: auto;
    height: inherit;
    */
}

.settings label {
    font-size: 110%;
    color: var(--pico-color);
    font-weight: 900;
    margin-top: 0.5rem;
}

.settings header{
    font-size: 0.8rem;
}

.settings hr {
    margin-top: 0;
    margin-bottom: 0.25em;
}

.settings h1 {
    margin-bottom: 0.25em;
    margin-top: 0.25em;
}
.settings h2,
.settings h3,
.settings h4 {
    margin-bottom: 0;
    margin-top: 0.25em;
}

.filter_list_delete_mark {
    display: none;
    position: absolute;
    left: 0.25rem;
    top: 0.25rem;
    right: 4.75rem;
    bottom: 0;
    height: 2rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    background-color: rgba(192,64,64,0.5);
    background: repeating-linear-gradient(
      45deg,
      rgba(192,64,64,0.5),
      rgba(192,64,64,0.5) 10px,
      rgba(127,127,127,0.5) 10px,
      rgba(127,127,127,0.5) 20px
    );
    backdrop-filter: blur(1px);
    text-shadow: var(--page-background) 1px 1px 1px;
    border-radius: 0.25rem;
    pointer-events: none;
}

.filter_list_delete_mark:has(.filter_remove_toggle:checked) {
    display: block;
}

/***** SEARCH *****/

.result header {
    margin-bottom: 0;
    padding: calc(var(--pico-block-spacing-vertical) * .66) var(--pico-block-spacing-horizontal) calc(var(--pico-block-spacing-vertical) * .33) var(--pico-block-spacing-horizontal);
}

.result progress {
    margin: 0.35em 0 0 0.5rem;
    width: 3rem;
}

.result .feed-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0;
}

.result header svg {
    width: 1.5rem;
    height: 1.5rem;
}

.result header.grid {
    grid-template-columns: 2rem 1fr 1.5rem;
}

.result-domain {
    font-size: 1rem;
}
.result-uri {
    font-size: 75%;
    opacity: 66%;
}

.result-blurb {
    font-size: 1rem;
}
.result-blurb > br:first-child {
    display: none;
}

.result strong {
    color: var(--pico-color-jade);
}
.result-title {
    font-size: 1.1rem;
    font-weight: normal !important;
}
.result-match {
    font-weight: 900;
    color: var(--pico-color);
}
.result-type {
    float: right;
}

.result details {
    margin-top: 1em;
}

.result details summary {
    background-color: var(--pico-form-element-background);
    padding: 0.25em;
}

.result .expand-button {
    font-size: 90%;
    padding: 0.125em 1.0em;
}

.search-result-hit {
    margin: 0.5rem 0 0.75rem 0;
}

.markdown nav ul,
.markdown nav ol
{
    display: block;
    padding-left: 2rem;
}

.markdown nav li {
    display: block;
    padding: 0;
}

.youtube-facade {
    width: calc(var(--contentwidth) - (4 * var(--pico-block-spacing-horizontal)));
    max-width: 100%;
    aspect-ratio: 16/9;
    border: solid black 1px;
    background-size: cover;
    background-position: center;
    background-color: black;
    position: relative;
    cursor: pointer;
}
.youtube-facade p {
    font-size: 1.25rem;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
    padding: 10px 0;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    text-shadow: var(--page-background) 1px 1px 1px;
}
div#content.two-column .youtube-facade {
    column-span: all;
    width: calc(var(--contentwidth) * 2 - (4 * var(--pico-block-spacing-horizontal)));
    height: calc((var(--contentwidth) * 2 - (4 * var(--pico-block-spacing-horizontal))) * 0.5625); /* 16x9 */
}



/* that weird post button */

button.post_button {
  --pico-background-color: var(--pico-form-element-background-color);
  --pico-border-color: var(--pico-form-element-border-color);
  --pico-color: var(--pico-form-element-color);
  --pico-box-shadow: none;
  border: var(--pico-border-width) solid var(--pico-border-color);
  border-radius: var(--pico-border-radius);
  outline: 0;
  background-color: var(--pico-background-color);
  box-shadow: var(--pico-box-shadow);
  color: var(--pico-form-element-placeholder-color);
  font-weight: var(--pico-font-weight);
  text-align: left;
}

.post-link-header svg {
  width: 2.5rem;
  height: 2.5rem;
}

a.user_icon img {
    border-radius: var(--pico-border-radius);
}



/***** MODAL DIALOG ****/

#gen_modal > article {
    min-width: var(--contentwidth);
    padding: 0 1.5rem;
    background-color: var(--page-background);
}

#gen_modal_content {
    margin: 0;
    padding: 0;
}

#gen_modal_content > header {
    background-color: var(--pico-card-sectioning-background-color);
    margin-top: calc(var(--pico-block-spacing-vertical) * -1);
    margin-left:  calc(var(--pico-block-spacing-horizontal) * -1);
    margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    color: var(--body-color);
}

#gen_modal_content article {
    overflow: visible;
    max-height: none;
}

#modal {
    /* Underlay covers entire screen. */
    position: fixed;
    top:0px;
    bottom: 0px;
    left:0px;
    right:0px;
    background-color:rgba(0,0,0,0.66);
    backdrop-filter: blur(5px);
    z-index:1000;

    /* Flexbox centers the .modal-content vertically and horizontally */
    display:flex;
    flex-direction:column;
    align-items:center;

    /* Animate when opening */
    animation-name: fadeIn;
    animation-duration:150ms;
    animation-timing-function: ease;
}

#modal > .modal-underlay {
    /* underlay takes up the entire viewport. This is only
    required if you want to click to dismiss the popup */
    position: absolute;
    z-index: -1;
    top:0px;
    bottom:0px;
    left: 0px;
    right: 0px;
}

#modal > .modal-content {
    /* Position visible dialog near the top of the window */
    margin-top:10vh;

    /* Sizing for visible dialog */
    width:80%;
    max-width:600px;

    /* Display properties for visible dialog*/
    border:solid 1px #999;
    border-radius:8px;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
    background-color: #333;
    padding:20px;

    /* Animate when opening */
    animation-name:zoomIn;
    animation-duration:150ms;
    animation-timing-function: ease;
}

#modal.closing {
    /* Animate when closing */
    animation-name: fadeOut;
    animation-duration:150ms;
    animation-timing-function: ease;
}

#modal.closing > .modal-content {
    /* Animate when closing */
    animation-name: zoomOut;
    animation-duration:150ms;
    animation-timing-function: ease;
}

.modal-header {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
} 

@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
} 

@keyframes zoomIn {
    0% {transform: scale(0.9);}
    100% {transform: scale(1);}
} 

@keyframes zoomOut {
    0% {transform: scale(1);}
    100% {transform: scale(0.9);}
} 


#post-button-grid {
    grid-template-columns: 3rem 1fr;
}


/***** mobile *****/

input.collapse {
    display: none;
    margin: 0;
    padding: 0;
}

label.collapse-toggle {
    display: none;
    margin: 0;
    padding: 0;
}

.collapse-toggle + * {
    max-height: 100vh;
}

@media screen and (max-width: 50ch) {

    .mobile-hidden {
        display: none !important;
    }

    :root {
        font-size: 1rem;
        --contentwidth: 100vw;
    }

    body {
        overflow-x: hidden;
    }

    main {
        margin: 0;
        padding: 0;
    }

    main > aside {
        z-index: 5;
    }

    #sidebar-collapse-button {
        position: absolute;
        top: 0;
        right: 0;
        width: var(--touch-unit);
        height: var(--touch-unit);
        margin-right: calc(var(--touch-unit) * 0.125);
    }

    #sidebar-collapse-toggle {
        display: block;
        z-index: 20;
    }

    #sidebar-collapse-toggle svg {
        transition: transform 0.25s ease-in-out;
    }

    #sidebar-left:has(#sidebar-collapse:checked) #sidebar-collapse-toggle svg {
        transform: rotate(90deg);
    }

    #sidebar-left label.collapse-toggle .icon {
        margin-left: 0;
    }

    .article-content {
        font-size: 1rem;
    }

    main > #content {
        margin-top: 3rem;
    }

    #sidebar-left {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        height: calc(var(--touch-unit) * 1.1875);
        background-color: var(--sidebar-background);
        display: flex;
        flex-direction: column;
        overflow-x: hidden;

        font-size: calc(var(--touch-unit) * 0.5);
        line-height: var(--touch-unit);

        transition: height 0.25s ease-in-out;
    }

    #sidebar-left:has(#sidebar-collapse:checked) {
        min-height: 100%;
        overflow-x: hidden;
    }


    #sidebar-left > #main-menu {
        order: 0;
    }
    #sidebar-left > #post-widget {
        order: 1;
    }
    #sidebar-left > #sidebar-content {
        order: 2;
    }
    #sidebar-left > #sidebar-footer {
        order: 3;
    }

    #sidebar-left > #main-menu {
        margin: 0;
        padding: 0;
    }
    #sidebar-left > #main-menu::before {
        content: "";
        display: inline-block;
        height: var(--touch-unit);
        width: calc(var(--touch-unit) * 1.5);
        float: left;
    }

    .sidebar-menu-item span.menu_txt {
        visibility: hidden;
        display: none;
    }
    .sidebar-submenu .sidebar-menu-item span.menu_txt {
        visibility: visible;
        display: inline;
        margin-left: 1em;
        margin-top: calc(var(--touch-unit) * 0.25);
    }

    .sidebar-menu-item {
        padding: 0;
        display: block;
        float: left;
        order: 1;
    }
    .sidebar-submenu {
        margin-left: 1em;
        clear: both;
    }

    .sidebar-submenu .sidebar-menu-item {
        display: block;
        width: 100% !important;
    }


    .sidebar-menu-item a {
        margin: 0;
        padding: 0;
    }


    .sidebar-menu-item span.icon,
    #sidebar-left span.icon
    {
        position: relative;
        top: 0;
        margin-right: 0;
        margin-left: 0;
    }


    .sidebar-menu-item .icon,
    #sidebar-collapse-toggle .icon {
        padding: 0;
    }
    .sidebar-menu-item .icon svg,
    #sidebar-collapse-toggle .icon svg {
        width: calc(var(--touch-unit) * 0.8);
        height: calc(var(--touch-unit) * 0.8);
    }

    #sidebar-left #post-widget .user_icon {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 0 0 calc(var(--touch-unit) * 0.1);
        margin: 0;
    }
    #sidebar-left #post-widget .user_icon .feather,
    #sidebar-left #post-widget .user_icon img
    {
        width: var(--touch-unit);
        height: var(--touch-unit);
        padding: 0.125rem;
    }

    #sidebar-left .sidebar-menu-item {
        width: var(--touch-unit);
        height: calc(var(--touch-unit) * 1.25);
        margin: 0 calc(var(--touch-unit) * 0.5) 0 0;
    }

    /*
    main > aside:first-child {
        background-color: var(--sidebar-background);
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 12vw;
        overflow: hidden;
    }

    aside#sidebar-left > nav:nth-of-type(2) {
        background-color: var(--sidebar-background);
        display: block;
        position: fixed;
        top: 12vw;
        padding: 0;
        left: 0;
        width: 100%;
        height: auto;
        font-size: clamp(5mm, 1rem, 7mm);
    }

    aside#sidebar-left > nav:nth-of-type(2) details {
        padding-top: 0.5rem;
    }

    nav#sidebar-settings-menu span.menu_txt {
        display: inline;
        visibility: visible;
    }

    aside > nav > ul {
        margin: 0 !important;
    }

    aside .menu_txt {
        visibility: hidden;
        display: none;
    }
    */

    /*
    aside nav:first-child li {
        display: inline-block;
        padding: 0;
    }
    */

    /*
    aside hr {
        display: inline-block;
        width: 1px;
        height: inherit;
    }
    */

    #sidebar-logo {
        height: 3rem;
        margin-left: 3rem;
        width: var(--touch-unit);
        height: var(--touch-unit);
        overflow: hidden;
        color: transparent;
        display: none;
    }

    /*
    #sidebar-content {
        display: block;
        clear: left;
    }
    */

    .user-box {
        padding: 0 !important;
        margin: 0;
        display: block;
        min-height: 0;
        z-index: 1;
    }

    .user-box img {
        margin: 1.5vw;
        width: 8vw;
        height: 8vw;
    }

    #post-button-grid {
        grid-template-columns: 1fr;
        height: var(--touch-unit);
    }

    /*
    main aside:first-child nav:first-child li:first-child {
        float: left;
        z-index: 10;
    }

    main aside:first-child nav:first-child li {
        padding: 0;
    }

    .user-box a.user-profile-link {
        display: none;
    }
    .user-box a.user-name #user-acct {
        display: none;
    }

    #sidebar-left .sidebar-menu-item {
        float: left;
        margin: 0;
    }

    #search-widget {
        display: none;
    }
    #post-widget {
        display: none;
    }

    main aside a#login_button {
        padding-top: 1rem;
        padding-left: 0;
        font-size: 1.25rem;
        line-height: 2.25rem;
    }

    main aside .sidebar-menu-item {
        padding: 3vw 3vw;
    }

    .sidebar-menu-item span.icon {
        margin-left: 0;
        margin-right: 0;
    }

    main > aside .feather {
        width: 6vw;
        height: 6vw;
    }

    main > aside .user-box .feather {
        width: 9.5vw;
        height: 9.5vw;
    }

    li#search_widget {
        background: var(--sidebar-background);
        position: fixed;
        display: block;
        order: 100;
        top: 12vw;
        left: 0;
        width: 100vw;
    }
    li#search_widget input {
        font-size: clamp(5mm, 1rem, 7mm);
    }
    */


    /* left sidebar */
/*
    #sidebar-left .line-item {
        padding: 0 2vw;
        font-size: clamp(4mm, 1rem, 5mm);
    }

   aside hr {
       display: none;
    }

    #sidebar-settings-menu {
        position: fixed;
        top: 10vw;
        left: 0;
        width: 100%;
        display: block;
        z-index: 200;
        background: var(--sidebar-background);
    }
    #sidebar-settings-menu summary {
        padding: 1em 0;
    }
    */

    /* some other stuff */

    img.profile-avatar, div.profile-avatar-container {
        width: 5rem;
        height: 5rem;
    }
    .profile-controls {
        top: calc(var(--contentwidth) * 0.28125 + 2vw);
	padding-right: 0.5rem;
        z-index: 5;
    }
    div.profile-avatar-container {
	top: 1rem;
	margin-left: 0.5rem;
    }
    div.profile-bio {
	padding: 0 0.5rem;
    }
    .tag {
	margin-left: 0.5rem;
	display: inline-block;
	clear: both;
    }

}