/******************************************************************************
  Stylesheet for philippseifer.com
******************************************************************************/



/******************************************************************************
  Global theme color definitions
******************************************************************************/

/* Core colors: Light theme. */
:root {
  --background_color: #FFF;
  --foreground_color: #000;
  --theme_color: #537d9a;
  --highlight_color: #9a537d; 
  --off_highlight_color: #7d9a53;
  --body_background_color: var(--theme_color);
  /* Note: This is --theme_color (#537d9a) for use in 'filter'.
   * See: https://codepen.io/sosuke/pen/Pjoqqp */
  --filter_theme_color: 
      brightness(0) saturate(100%) 
      invert(45%) sepia(47%) saturate(356%) hue-rotate(161deg) 
      brightness(94%) contrast(91%);
}

/* Core colors: Dark theme. */
@media (prefers-color-scheme: dark) {
  :root {
    --background_color: #222;
    --foreground_color: #FFF;
    --theme_color: #6f96b1;
    --highlight_color: #cca1ba;
    --off_highlight_color: #bacca1;
    --body_background_color: #181818;
  /* Note: This is --theme_color (#6f96b1) for use in 'filter'. 
   * See: https://codepen.io/sosuke/pen/Pjoqqp */
  --filter_theme_color: 
      brightness(0) saturate(100%) 
      invert(60%) sepia(32%) saturate(370%) hue-rotate(162deg)
      brightness(88%) contrast(94%);
  }
}

/* Define semantic colors. */
:root {
    --main_text_color: var(--foreground_color);
    --content_background_color: var(--background_color);
    --code_background_color: var(--background_color);
    --header_background_color: var(--background_color);
    --header_foreground_color: var(--theme_color);
    --link_color: var(--highlight_color);
}

.only-on-light {
  display: block;
}

.only-on-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .only-on-dark {
    display: block;
  }
  
  .only-on-light {
    display: none;
  }
}



/******************************************************************************
  Global configuration
******************************************************************************/

html {
  padding-top: -20px;
  height: 100%;
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
}

body {
  margin: auto;
  color: var(--main_text_color);
  font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 140%;
  background-color: var(--body_background_color);
  min-width: 320px;
  height: 100%;
}

a {
  color: var(--theme_color);
  text-decoration: none;
}

a:hover {
  color: var(--link_color);
  text-decoration: underline;
}



/******************************************************************************
  Utility definitions intended for use from Markdown (Pandoc) 
******************************************************************************/

.site_logo {
    height:auto;
    margin:0 auto;
    padding-bottom: 20px;
}

@media screen and (max-width: 940px) {
  .center_image {
    padding-bottom: 10px;
  }
}

.center_image_full {
    display:block;
    height:auto;
    margin:0 auto;
    width: 66%;
}

.project_image {
    display:block;
    height:auto;
    margin:0 auto;
    width: 50%;
    filter: var(--filter_theme_color);

}

.center_message {
  display: flex;
  justify-content: center;
  align-items: center;
}



/******************************************************************************
  Style of the header and footer
******************************************************************************/

header {
  border-bottom: 2px solid var(--theme_color);
  background-color: var(--header_background_color);
  position: fixed;
  width: 100%;
  z-index: 1;
}

.header_content {
  margin: auto;
  padding-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 890px;
}

@media screen and (max-width: 940px) {
  header {
    position: static;
  }
  .header_content {
    padding-bottom: 10px;
    padding-top: 10px;
  }
}

footer {
  width: 940px;
  margin: 0px auto;
  height: 50px;
  border-top: 2px solid var(--theme_color);
  background-color: var(--header_background_color);
}

.footer_content {
  margin: auto;
  padding-top: 12px;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 890px;
}

.footer_site_link {
  padding-left: 20px;
  float: left;
  padding-right: 20px;
}

.footer_site_link a {
  color: var(--theme_color);
  text-transform: uppercase;
}

.footer_site_link a:hover {
  color: var(--highlight_color);
  text-decoration: none;
}

#footer_scroll_up {
  text-align: right;
  padding-right: 0px;
  float: right;
  cursor: pointer;
  color: var(--theme_color);
}

@media screen and (max-width: 940px) {
  footer{
    height: 155px;
    width: 100%;
  }
  .footer_site_link {
    width: 100%;
    text-align: center;
    padding-left: 0px;
    padding-top: 10px;
  }
}


/******************************************************************************
  Style of the navigation bar
******************************************************************************/

.navbar {
  height: 30px;
  margin-left: 0px;
  margin-top: 20px;
  text-transform: uppercase;
}

.nav_item {
  float: left;
  padding-left: 20px;
  padding-right: 20px;
  height: 30px;
  text-align: center;
  background-color: var(--header_background_color);
  padding-top: 10px;
}

.nav_last_item {
  float: right;
}

.nav_item a {
  color: var(--header_foreground_color);
  text-decoration: none;
}

.nav_item a:not(.nav_item_active a):hover {
  color: var(--highlight_color);
}

.nav_item_active a {
  color: var(--off_highlight_color);
  text-decoration: none;
}

.nav_item_active a:hover {
  color: var(--highlight_color);
  text-decoration: none;
}

@media screen and (max-width: 940px) {
  .navbar {
    margin-top: 0px;
  }
  .nav_last_item {
    float: left;
  }
  .nav_item {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}



/******************************************************************************
  Main setup for content, headings, and TOC
******************************************************************************/

.content {
  margin: auto;
  max-width: 900px;
  background-color: var(--content_background_color);
  color: var(--main_text_color);
  padding: 20px;
  padding-bottom: 60px;
  padding-top: 100px;
  /* Page height minus total header/footer/padding, so
   * that on non-full pages, it fits exactly to page height. */
  min-height: calc(100% - 101px - 51px - 60px);
}

.content-title-n-toc {
  float: left;
  display: block;
}

.content-title {
  font-size: 180%;
  margin-bottom: 20px;
  color: var(--theme_color);
  text-transform: uppercase;
}

h1 a, h2 a, h3 a, h4 a, h5 a {
  text-decoration: none;
  color: var(--theme_color);
}

h1, h2, h3, h4, h5 {
  font-weight: lighter;
  float: none;
  color: var(--theme_color);
  clear: both;
}

h1 {
  font-size: 150%;
  margin-top: 75px;
  border-bottom: 2px solid var(--theme_color);
  text-transform: uppercase;
}

h2 {
  font-size: 130%;
  margin-top: 50px;
}

h3 {
  font-size: 110%;
  margin-top: 20px;
}

h4 {
  font-size: 100%;
  font-style: italic;
}

h5 {
  font-size: 90%;
  font-style: italic;
}

span.header-section-number {
  display: none;
  visibility: hidden;
}

h1.title {
  margin: 0;
  font-weight: lighter;
  padding-top: 0.4em;
  padding-bottom: 0.2em;
  text-align: left;
  border: none;
  color: var(--theme_color);
  height: 30px;
  font-size: 32px;
}

hr {
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: var(--theme_color);
  border-color: var(--theme_color);
}

.content > ol > li::marker, .content > ul > li::marker {
  color: #f2f2f2;
}

.content > ol > li, .content > ul > li {
  padding-left: 10px;
}

p {
  clear: left;
  line-height: 165%;
}

p:before {
  content: "";
  width: 10em;
  display: block;
  overflow: hidden;
}

p.title {
  font-size: 90%;
  width: 50%;
  margin-top: 0px;
  margin-bottom: 20px;
}

div.content > ol > li {
  padding-bottom: 6px;
}

div.content > ul > li {
  padding-bottom: 3px;
}

math {
  color: var(--main_text_color);
}

@media screen and (max-width: 940px) {
  .content {
    padding-top: 25px;
  }
}


/******************************************************************************
  Style of the table of contents
******************************************************************************/

.table_of_contents {
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
  padding: 10px;
  background-color: var(--content_background_color);
  border: 2px solid var(--theme_color);
  width: 33%;
}

.table_of_contents_header {
  text-align: center;
  color: var(--theme_color);
  text-transform: uppercase;
}

.table_of_contents a {
  color: var(--theme_color);
}

.table_of_contents a:hover {
  color: var(--highlight_color);
  text-decoration: underline;
}

.table_of_contents ul {
  padding-left: 14px;
  padding-right: 8px;
  margin-bottom: 0px;
}

.table_of_contents li::marker {
  color: transparent;
}



/******************************************************************************
  Style of source code blocks
******************************************************************************/

pre, code, kbd, samp {
  font-family: Lucida Console, monospace;
}

pre {
  border: 2px solid var(--theme_color);
  background-color: var(--code_background_color);
  color: var(--off_highlight_color);
  padding: 0.5em;
  width: fit-content;
  min-width: 100%;
  box-sizing: border-box;
}

code {
  font-family: Lucida Console, monospace;
  font-size: 14px;
  white-space: pre-wrap;
}

code > span {
  padding-bottom: 0px;
}

p > code, li > code  {
  background-color: var(--code_background_color);
  border-radius: 3px;
  border-color: white;
  border-width: 2px;
  color: var(--off_highlight_color);
  padding: 3px;
}



/******************************************************************************
  Quotes, tables, and other stuff
******************************************************************************/

span.clear {
  clear: left; display: block;
}

blockquote {
  border-left: 3px solid #ccc;
  margin-left: 5px;
  /* margin: 1.5em 10px; */
  /* padding: 0.5em 10px; */
}

blockquote p {
  display: inline-block;
  padding-left: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #83a3a4;
}

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 2em;
  border-spacing: 0;
  border-collapse: collapse;
  border-bottom: 2px solid var(--theme_color);
}

table th {
  padding: .2em 1em;
  border-top: 2px solid var(--theme_color);
  border-bottom: 2px solid var(--theme_color);
  color: var(--theme_color);
}

table td {
  padding: .2em 1em;
  vertical-align: top;
}



/******************************************************************************
  Style for Blog posts and tag selector
******************************************************************************/

input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.filters {
  list-style: none;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 2.5rem;
}

.filters * {
  display: inline-block;
}

.filters label {
  padding: 0.2rem 0.2rem;
  margin-bottom: 0.25rem;
  border-radius: 0rem;
  min-width: 0px;
  line-height: normal;
  cursor: pointer;
  transition: all 0.1s;
  color: var(--theme_color);
  position: relative;
  display: block;
}

.filters label:hover {
  /*background: var(--highlight_color);*/
  color: var(--highlight_color);
}

.posts .post {
  display: none;
  padding-top: 50px;
  padding-left: 0px;
  margin-left: -40px;
}

.posts br {
  margin: 10px 0;
}

.posts a {
  font-size: 130%;
}

*:has([value="all"]:checked) .filters [for="all"],
*:has([value="tag99"]:checked) .filters [for="tag99"],
*:has([value="tag98"]:checked) .filters [for="tag98"],
*:has([value="tag97"]:checked) .filters [for="tag97"],
*:has([value="tag96"]:checked) .filters [for="tag96"],
*:has([value="tag95"]:checked) .filters [for="tag95"],
*:has([value="tag94"]:checked) .filters [for="tag94"],
*:has([value="tag93"]:checked) .filters [for="tag93"],
*:has([value="tag92"]:checked) .filters [for="tag92"],
*:has([value="tag91"]:checked) .filters [for="tag91"],
*:has([value="tag90"]:checked) .filters [for="tag90"],
*:has([value="tag89"]:checked) .filters [for="tag89"],
*:has([value="tag88"]:checked) .filters [for="tag88"],
*:has([value="tag87"]:checked) .filters [for="tag87"],
*:has([value="tag86"]:checked) .filters [for="tag86"],
*:has([value="tag85"]:checked) .filters [for="tag85"],
*:has([value="tag84"]:checked) .filters [for="tag84"],
*:has([value="tag83"]:checked) .filters [for="tag83"],
*:has([value="tag82"]:checked) .filters [for="tag82"],
*:has([value="tag81"]:checked) .filters [for="tag81"],
*:has([value="tag80"]:checked) .filters [for="tag80"],
*:has([value="tag79"]:checked) .filters [for="tag79"],
*:has([value="tag78"]:checked) .filters [for="tag78"],
*:has([value="tag77"]:checked) .filters [for="tag77"],
*:has([value="tag76"]:checked) .filters [for="tag76"],
*:has([value="tag75"]:checked) .filters [for="tag75"],
*:has([value="tag74"]:checked) .filters [for="tag74"],
*:has([value="tag73"]:checked) .filters [for="tag73"],
*:has([value="tag72"]:checked) .filters [for="tag72"],
*:has([value="tag71"]:checked) .filters [for="tag71"],
*:has([value="tag70"]:checked) .filters [for="tag70"],
*:has([value="tag69"]:checked) .filters [for="tag69"],
*:has([value="tag68"]:checked) .filters [for="tag68"],
*:has([value="tag67"]:checked) .filters [for="tag67"],
*:has([value="tag66"]:checked) .filters [for="tag66"],
*:has([value="tag65"]:checked) .filters [for="tag65"],
*:has([value="tag64"]:checked) .filters [for="tag64"],
*:has([value="tag63"]:checked) .filters [for="tag63"],
*:has([value="tag62"]:checked) .filters [for="tag62"],
*:has([value="tag61"]:checked) .filters [for="tag61"],
*:has([value="tag60"]:checked) .filters [for="tag60"],
*:has([value="tag59"]:checked) .filters [for="tag59"],
*:has([value="tag58"]:checked) .filters [for="tag58"],
*:has([value="tag57"]:checked) .filters [for="tag57"],
*:has([value="tag56"]:checked) .filters [for="tag56"],
*:has([value="tag55"]:checked) .filters [for="tag55"],
*:has([value="tag54"]:checked) .filters [for="tag54"],
*:has([value="tag53"]:checked) .filters [for="tag53"],
*:has([value="tag52"]:checked) .filters [for="tag52"],
*:has([value="tag51"]:checked) .filters [for="tag51"],
*:has([value="tag50"]:checked) .filters [for="tag50"],
*:has([value="tag49"]:checked) .filters [for="tag49"],
*:has([value="tag48"]:checked) .filters [for="tag48"],
*:has([value="tag47"]:checked) .filters [for="tag47"],
*:has([value="tag46"]:checked) .filters [for="tag46"],
*:has([value="tag45"]:checked) .filters [for="tag45"],
*:has([value="tag44"]:checked) .filters [for="tag44"],
*:has([value="tag43"]:checked) .filters [for="tag43"],
*:has([value="tag42"]:checked) .filters [for="tag42"],
*:has([value="tag41"]:checked) .filters [for="tag41"],
*:has([value="tag40"]:checked) .filters [for="tag40"],
*:has([value="tag39"]:checked) .filters [for="tag39"],
*:has([value="tag38"]:checked) .filters [for="tag38"],
*:has([value="tag37"]:checked) .filters [for="tag37"],
*:has([value="tag36"]:checked) .filters [for="tag36"],
*:has([value="tag35"]:checked) .filters [for="tag35"],
*:has([value="tag34"]:checked) .filters [for="tag34"],
*:has([value="tag33"]:checked) .filters [for="tag33"],
*:has([value="tag32"]:checked) .filters [for="tag32"],
*:has([value="tag31"]:checked) .filters [for="tag31"],
*:has([value="tag30"]:checked) .filters [for="tag30"],
*:has([value="tag29"]:checked) .filters [for="tag29"],
*:has([value="tag28"]:checked) .filters [for="tag28"],
*:has([value="tag27"]:checked) .filters [for="tag27"],
*:has([value="tag26"]:checked) .filters [for="tag26"],
*:has([value="tag25"]:checked) .filters [for="tag25"],
*:has([value="tag24"]:checked) .filters [for="tag24"],
*:has([value="tag23"]:checked) .filters [for="tag23"],
*:has([value="tag22"]:checked) .filters [for="tag22"],
*:has([value="tag21"]:checked) .filters [for="tag21"],
*:has([value="tag20"]:checked) .filters [for="tag20"],
*:has([value="tag19"]:checked) .filters [for="tag19"],
*:has([value="tag18"]:checked) .filters [for="tag18"],
*:has([value="tag17"]:checked) .filters [for="tag17"],
*:has([value="tag16"]:checked) .filters [for="tag16"],
*:has([value="tag15"]:checked) .filters [for="tag15"],
*:has([value="tag14"]:checked) .filters [for="tag14"],
*:has([value="tag13"]:checked) .filters [for="tag13"],
*:has([value="tag12"]:checked) .filters [for="tag12"],
*:has([value="tag11"]:checked) .filters [for="tag11"],
*:has([value="tag10"]:checked) .filters [for="tag10"],
*:has([value="tag9"]:checked) .filters [for="tag9"],
*:has([value="tag8"]:checked) .filters [for="tag8"],
*:has([value="tag7"]:checked) .filters [for="tag7"],
*:has([value="tag6"]:checked) .filters [for="tag6"],
*:has([value="tag5"]:checked) .filters [for="tag5"],
*:has([value="tag4"]:checked) .filters [for="tag4"],
*:has([value="tag3"]:checked) .filters [for="tag3"],
*:has([value="tag2"]:checked) .filters [for="tag2"],
*:has([value="tag1"]:checked) .filters [for="tag1"] {
  color: var(--off_highlight_color);
}

*:has([value="all"]:checked) .posts [data-category],
*:has([value="tag99"]:checked) .posts [data-category~="tag99"],
*:has([value="tag98"]:checked) .posts [data-category~="tag98"],
*:has([value="tag97"]:checked) .posts [data-category~="tag97"],
*:has([value="tag96"]:checked) .posts [data-category~="tag96"],
*:has([value="tag95"]:checked) .posts [data-category~="tag95"],
*:has([value="tag94"]:checked) .posts [data-category~="tag94"],
*:has([value="tag93"]:checked) .posts [data-category~="tag93"],
*:has([value="tag92"]:checked) .posts [data-category~="tag92"],
*:has([value="tag91"]:checked) .posts [data-category~="tag91"],
*:has([value="tag90"]:checked) .posts [data-category~="tag90"],
*:has([value="tag89"]:checked) .posts [data-category~="tag89"],
*:has([value="tag88"]:checked) .posts [data-category~="tag88"],
*:has([value="tag87"]:checked) .posts [data-category~="tag87"],
*:has([value="tag86"]:checked) .posts [data-category~="tag86"],
*:has([value="tag85"]:checked) .posts [data-category~="tag85"],
*:has([value="tag84"]:checked) .posts [data-category~="tag84"],
*:has([value="tag83"]:checked) .posts [data-category~="tag83"],
*:has([value="tag82"]:checked) .posts [data-category~="tag82"],
*:has([value="tag81"]:checked) .posts [data-category~="tag81"],
*:has([value="tag80"]:checked) .posts [data-category~="tag80"],
*:has([value="tag79"]:checked) .posts [data-category~="tag79"],
*:has([value="tag78"]:checked) .posts [data-category~="tag78"],
*:has([value="tag77"]:checked) .posts [data-category~="tag77"],
*:has([value="tag76"]:checked) .posts [data-category~="tag76"],
*:has([value="tag75"]:checked) .posts [data-category~="tag75"],
*:has([value="tag74"]:checked) .posts [data-category~="tag74"],
*:has([value="tag73"]:checked) .posts [data-category~="tag73"],
*:has([value="tag72"]:checked) .posts [data-category~="tag72"],
*:has([value="tag71"]:checked) .posts [data-category~="tag71"],
*:has([value="tag70"]:checked) .posts [data-category~="tag70"],
*:has([value="tag69"]:checked) .posts [data-category~="tag69"],
*:has([value="tag68"]:checked) .posts [data-category~="tag68"],
*:has([value="tag67"]:checked) .posts [data-category~="tag67"],
*:has([value="tag66"]:checked) .posts [data-category~="tag66"],
*:has([value="tag65"]:checked) .posts [data-category~="tag65"],
*:has([value="tag64"]:checked) .posts [data-category~="tag64"],
*:has([value="tag63"]:checked) .posts [data-category~="tag63"],
*:has([value="tag62"]:checked) .posts [data-category~="tag62"],
*:has([value="tag61"]:checked) .posts [data-category~="tag61"],
*:has([value="tag60"]:checked) .posts [data-category~="tag60"],
*:has([value="tag59"]:checked) .posts [data-category~="tag59"],
*:has([value="tag58"]:checked) .posts [data-category~="tag58"],
*:has([value="tag57"]:checked) .posts [data-category~="tag57"],
*:has([value="tag56"]:checked) .posts [data-category~="tag56"],
*:has([value="tag55"]:checked) .posts [data-category~="tag55"],
*:has([value="tag54"]:checked) .posts [data-category~="tag54"],
*:has([value="tag53"]:checked) .posts [data-category~="tag53"],
*:has([value="tag52"]:checked) .posts [data-category~="tag52"],
*:has([value="tag51"]:checked) .posts [data-category~="tag51"],
*:has([value="tag50"]:checked) .posts [data-category~="tag50"],
*:has([value="tag49"]:checked) .posts [data-category~="tag49"],
*:has([value="tag48"]:checked) .posts [data-category~="tag48"],
*:has([value="tag47"]:checked) .posts [data-category~="tag47"],
*:has([value="tag46"]:checked) .posts [data-category~="tag46"],
*:has([value="tag45"]:checked) .posts [data-category~="tag45"],
*:has([value="tag44"]:checked) .posts [data-category~="tag44"],
*:has([value="tag43"]:checked) .posts [data-category~="tag43"],
*:has([value="tag42"]:checked) .posts [data-category~="tag42"],
*:has([value="tag41"]:checked) .posts [data-category~="tag41"],
*:has([value="tag40"]:checked) .posts [data-category~="tag40"],
*:has([value="tag39"]:checked) .posts [data-category~="tag39"],
*:has([value="tag38"]:checked) .posts [data-category~="tag38"],
*:has([value="tag37"]:checked) .posts [data-category~="tag37"],
*:has([value="tag36"]:checked) .posts [data-category~="tag36"],
*:has([value="tag35"]:checked) .posts [data-category~="tag35"],
*:has([value="tag34"]:checked) .posts [data-category~="tag34"],
*:has([value="tag33"]:checked) .posts [data-category~="tag33"],
*:has([value="tag32"]:checked) .posts [data-category~="tag32"],
*:has([value="tag31"]:checked) .posts [data-category~="tag31"],
*:has([value="tag30"]:checked) .posts [data-category~="tag30"],
*:has([value="tag29"]:checked) .posts [data-category~="tag29"],
*:has([value="tag28"]:checked) .posts [data-category~="tag28"],
*:has([value="tag27"]:checked) .posts [data-category~="tag27"],
*:has([value="tag26"]:checked) .posts [data-category~="tag26"],
*:has([value="tag25"]:checked) .posts [data-category~="tag25"],
*:has([value="tag24"]:checked) .posts [data-category~="tag24"],
*:has([value="tag23"]:checked) .posts [data-category~="tag23"],
*:has([value="tag22"]:checked) .posts [data-category~="tag22"],
*:has([value="tag21"]:checked) .posts [data-category~="tag21"],
*:has([value="tag20"]:checked) .posts [data-category~="tag20"],
*:has([value="tag19"]:checked) .posts [data-category~="tag19"],
*:has([value="tag18"]:checked) .posts [data-category~="tag18"],
*:has([value="tag17"]:checked) .posts [data-category~="tag17"],
*:has([value="tag16"]:checked) .posts [data-category~="tag16"],
*:has([value="tag15"]:checked) .posts [data-category~="tag15"],
*:has([value="tag14"]:checked) .posts [data-category~="tag14"],
*:has([value="tag13"]:checked) .posts [data-category~="tag13"],
*:has([value="tag12"]:checked) .posts [data-category~="tag12"],
*:has([value="tag11"]:checked) .posts [data-category~="tag11"],
*:has([value="tag10"]:checked) .posts [data-category~="tag10"],
*:has([value="tag9"]:checked) .posts [data-category~="tag9"],
*:has([value="tag8"]:checked) .posts [data-category~="tag8"],
*:has([value="tag7"]:checked) .posts [data-category~="tag7"],
*:has([value="tag6"]:checked) .posts [data-category~="tag6"],
*:has([value="tag5"]:checked) .posts [data-category~="tag5"],
*:has([value="tag4"]:checked) .posts [data-category~="tag4"],
*:has([value="tag3"]:checked) .posts [data-category~="tag3"],
*:has([value="tag2"]:checked) .posts [data-category~="tag2"],
*:has([value="tag1"]:checked) .posts [data-category~="tag1"] {
  display: block;
}