:root { font-family: Helvetica, sans-serif; font-size: 16px; line-height: 1.15; color: hsl(0, 0%, 95%); background: #17191a; }
* { box-sizing: border-box; }
body { display: flex; margin: 0; background: #17191a; }
a { color: hsl(8, 55%, 81%); padding: 2px; border-bottom: .0625em solid transparent; text-decoration: none; transition: color .25s, border-color .25s, background-color .25s; }
a:visited { color: #cc9d97; }
a:hover { background-color: hsla(30, 80%, 20%, 1); border-bottom-color: hsl(8, 55%, 81%); }
a:focus-visible { background-color: hsl(25, 50%, 28%); }
button, input, select { font: inherit; color: inherit; background: rgb(26, 28, 28); border: 1px solid rgb(70, 74, 83); border-radius: 8px; padding: .5em .75em; outline: none; }
button { cursor: pointer; }
button:hover, input:hover, select:hover { border-color: rgb(99, 104, 116); }
button:focus-visible, input:focus, select:focus { border-color: hsl(0, 0%, 70%); background-color: rgb(40, 42, 47); }
input::placeholder { color: rgb(120, 125, 135); opacity: 1; }
select { appearance: none; padding-right: 2em; background-image: url('assets/chevron.svg'); background-repeat: no-repeat; background-size: 12px; background-position: right .65em center; }
.icon { flex: 0 0 20px; width: 20px; height: 20px; color: #e6e6e6; }
.sidebar { position: fixed; height: 100%; display: flex; width: 12rem; min-width: 160px; flex-direction: column; background: #202324; padding: .5em 0; overflow-y: auto; transition: margin-left .25s ease-in-out; }
.sidebar-entry { display: flex; flex-direction: column; margin: .5rem 1rem 0; white-space: nowrap; }
.sidebar .sidebar-item { color: inherit; border: 0; transition: none; display: flex; align-items: center; height: 28px; flex-shrink: 0; padding: 0 0 0 1.5rem; }
.sidebar .group-heading { font-weight: 700; padding-left: .5rem; }
.sidebar-item .icon { margin-right: 7px; }
.sidebar a:hover, .sidebar a:focus-visible, .close-sidebar:hover, .close-sidebar:focus-visible { background: #ffffff1a; }
.home-entry { flex-direction: row; justify-content: space-between; align-items: center; }
.home-entry a { flex: 1; }
.close-sidebar { border: 0; border-radius: 0; background: transparent; padding: 0; width: 28px; height: 28px; margin-left: 10px; flex-shrink: 0; }
.close-sidebar .icon { width: 100%; height: 100%; }
.sidebar-entry.stuck-bottom { margin-top: auto; }
.sidebar .partner { color: rgb(255, 149, 0); }
.content-wrapper { width: 100%; min-width: 0; margin-left: 12rem; transition: margin-left .25s ease-in-out; }
.site-header { width: 100%; height: 2.5rem; background: #282a2e; display: flex; align-items: center; padding: 0 10px 0 5px; margin-top: calc(-1.2rem - 20px); transition: margin-top .25s ease-in-out; overflow: hidden; }
#burgor { height: 100%; padding: 5px; min-width: 48px; border: 0; border-radius: 0; background: transparent; }
#burgor svg { display: block; width: 38px; height: 30px; }
#burgor:focus-visible { background: #ffffff1a; }
.header-link { height: 100%; display: flex; align-items: center; padding: 5px; }
.header-link:first-of-type { margin-left: 10px; }
body.sidebar-closed .sidebar { margin-left: -12rem; }
body.sidebar-closed .content-wrapper { margin-left: 0; }
body.sidebar-closed .site-header { margin-top: 0; }
.backdrop { display: none; }
main { padding: 1em; }
.section-heading { padding-bottom: 1em; }
h1 { font-size: 1.7em; font-weight: 300; text-align: center; margin: 0; }
.search-form { display: flex; flex-direction: column; gap: .5rem; max-width: 34rem; margin: 0 auto .75rem; padding: .6rem; background: rgb(32, 35, 36); border-radius: 5px; }
.search-field { position: relative; }
.search-field .icon { position: absolute; width: 16px; height: 16px; color: #b3b3b3; left: .85em; top: 10px; pointer-events: none; }
.search-field input { width: 100%; height: 36px; padding-left: 2.5em; }
.search-options { display: flex; gap: .5rem; }
.search-options select { flex: 1 1 0; min-width: 0; height: 36px; }
#order { flex: 0 0 44px; width: 44px; height: 36px; padding: 8px; }
#order svg { display: block; width: 100%; height: 100%; }
#order[value="asc"] svg { transform: rotate(180deg); }
.filters { text-align: center; font-size: .85em; margin: .25em 0 .5em; }
.filters details { position: relative; display: inline-block; }
.filters summary { list-style: none; opacity: .7; cursor: pointer; }
.filters summary::-webkit-details-marker { display: none; }
.filter-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 15em; background: #17191a; border: 1px solid hsl(210, 15%, 5%); border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); padding: .55em .75em; display: flex; align-items: center; justify-content: space-between; gap: 1em; z-index: 1; }
.paginator { text-align: center; }
.paginator small { font-size: 80%; }
.paginator menu { display: table; margin: 5px auto; padding: 0; list-style: none; border-collapse: separate; border-spacing: 0; }
.paginator li { display: table-cell; border: 1px solid hsl(0, 0%, 45%); border-right: 0; line-height: 33px; min-width: 35px; color: hsl(0, 0%, 70%); }
.paginator li:last-child { border-right: 1px solid hsl(0, 0%, 45%); }
.paginator button { display: block; width: 100%; min-width: 35px; line-height: 33px; font-weight: 700; padding: 0 9px; border: 0; border-radius: 0; color: inherit; background: transparent; }
.paginator li.current { background: hsl(25, 50%, 28%); color: #cc9d97; border-color: hsl(8, 55%, 81%); }
.paginator li.current + li { border-left-color: hsl(8, 55%, 81%); }
.paginator button:disabled { color: hsl(0, 0%, 45%); cursor: default; }
.paginator button:hover:not(:disabled), .paginator button:focus-visible { background: hsl(0, 0%, 45%); color: hsl(0, 0%, 95%); }
.card-list { padding: .5em 0; }
.card-list-items { display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; gap: .5em; }
.card-list-items > * { flex: 0 1 480px; max-width: 100%; }
.user-card, .user-card:visited { position: relative; display: flex; align-items: center; padding: 1.25rem; gap: 1rem; border: 0; border-radius: 10px; color: #fff; background-color: #282a2e; background-size: cover; box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; top: 0; transition: top .1s ease; }
.user-card:hover, .user-card:focus-within { top: -3px; }
.user-card-icon { flex: 0 0 80px; width: 80px; height: 80px; align-self: center; overflow: hidden; border-radius: 10px; }
.user-card-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.user-card-info { padding: 5px; min-width: 0; }
.user-card-service { color: #fff; font-weight: 700; padding: .25rem .5rem; border-radius: .25rem; font-size: 14px; }
.platform-a { background: rgb(250, 87, 66); }
.platform-b { background: rgb(44, 51, 60); }
.platform-c { background: #5865f2; }
.user-card-name { font-weight: 300; font-size: 28px; padding: 5px 0; color: #fff; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card-count { color: #fff; }
.empty { text-align: center; padding: .5em 0; margin: 0 auto; }
.global-footer { padding: 1em; margin: 0; font-size: 14px; font-weight: 400; text-align: center; }
.global-footer ul { list-style: none; padding: 0; }
.global-footer li { display: inline; margin: 0 .5em 0 0; }
.global-footer a, .global-footer a:visited { color: #f2f2f2; }
.global-footer a:hover { background: hsl(220, 7%, 25%); border-bottom-color: #f2f2f2; }
@media (max-width: 1020px) {
  .sidebar { position: absolute; height: auto; min-height: 100%; width: 15rem; margin-left: -15rem; z-index: 3; }
  body.sidebar-closed .sidebar { margin-left: -15rem; }
  body.mobile-open .sidebar { margin-left: 0; }
  .sidebar .sidebar-item { height: 34px; }
  .close-sidebar { width: 34px; height: 34px; margin-left: 20px; }
  .content-wrapper { margin-left: 0; }
  .site-header { margin-top: 0; }
  main, .global-footer { padding: 1em 0; }
  .backdrop { display: block; position: fixed; inset: 0; background: #0006; opacity: 0; pointer-events: none; transition: opacity .25s ease-in-out; z-index: 2; }
  body.mobile-open .backdrop { opacity: 1; pointer-events: auto; }
}
@media (max-width: 600px) { .paginator .desktop-first, .paginator .mobile-hidden { display: none; } }
@media (max-width: 412px) { .header-link.about { display: none; } }
@media (max-width: 358px) { .header-link.home { display: none; } }
@media (max-width: 294px) { .header-link.login { display: none; } }

/* Posts, popular posts and tags: additions to the existing demo. */
.site-section--posts, .site-section--popular-posts, .site-section--tags { --colour0-primary: hsl(0, 0%, 95%); --colour1-secondary: #282a2e; }
.site-section__header { padding-bottom: 1em; }
.card-list--legacy { --card-size: 180px; }
.card-list__items { display: flex; flex-flow: row wrap; justify-content: center; gap: 8px; }
.card-list__items > * { flex: 0 1 var(--card-size); max-width: 100%; }
.post-card { position: relative; width: var(--card-size); height: var(--card-size); color: #fff; font-size: 80%; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.post-card > a.image-link { display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative; top: 0; overflow: hidden; background: #000; transition: top ease .1s; }
.post-card:hover > a, .post-card > a:focus { top: -5px; }
.post-card__image-container { position: absolute; inset: 0; display: flex; }
.post-card__image { width: 100%; height: 100%; object-fit: cover; }
.post-card__header { padding: 5px; z-index: 1; color: #fff; background: #00000080; overflow-wrap: anywhere; }
.post-card__footer { padding: 5px; z-index: 1; background: #00000080; }
.post-card__footer > div { display: flex; align-items: center; color: #fff; }
.post-card__footer time { color: var(--colour0-primary); }
.post-card__service { height: 20px; width: 20px; margin-left: auto; }
a.image-link { border: none; padding: 0; }
.search-bar { display: flex; justify-content: center; margin: 0 auto .5rem; }
.search-bar .search-input { width: 100%; max-width: 28rem; }
.posts-filters { display: flex; justify-content: center; gap: 1.5em; }
.posts-filters .filter-panel { z-index: 2; }
#paginator-dates > div { margin: .1em 0; }
#paginator-dates > div > * { margin: 0 .4em; }
#paginator-dates a { color: hsl(0, 0%, 45%); cursor: default; }
#all-tags-header { width: fit-content; margin: 0 auto; font-size: 1.6em; font-weight: 400; }
#tag-container { width: 80vw; margin: 1em auto 0; display: flex; flex-wrap: wrap; justify-content: center; }
#tag-container article { display: inline-flex; width: fit-content; background: var(--colour1-secondary); border-radius: 10px; margin: .125em; }
#tag-container article a { color: unset; border-radius: 10px; }
#tag-container article span { padding: .5em; }
#tag-container article span:first-child { padding-right: .0625em; }
#tag-container article span:nth-child(2) { color: #0ff; padding-left: .125em; }

/* Pagination remains usable with standard links and on narrow screens. */
.paginator a, .paginator a:visited { display: block; min-width: 35px; padding: 0 9px; line-height: 33px; font-weight: 700; color: inherit; border: 0; }
.paginator { overflow-x: auto; }
.paginator a:hover, .paginator a:focus-visible { background: hsl(0, 0%, 45%); color: #fff; }
@media (max-width: 600px) { .paginator a, .paginator button { min-width: 25px; padding: 0 5px; } .paginator li { min-width: 25px; } }