* {
  font-family: "ComputerModern Typewriter", monospace;
  font-size: 1rem;
  margin: 0;
  box-sizing: border-box;
  font-weight: normal;
}
body {
  margin: 0;
  padding: var(--headerheight) 0 0 0;
}
html {
  --headerheight: 3em;
}

a {
  color: currentColor;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

/* ---------------------------------------- nav */
label {cursor: pointer;}
#menu {display: none;}
#currentTag:not(:empty)::before{ content: " : ";}
.tags {
  display: none;
  background: deepskyblue;
  flex-wrap: wrap;
  justify-content:start;
  a {
    display: inline-block;
    padding: .25em .5em;
    text-decoration: none;
    background-color: var(--c);
  }
}

.utils {
  display: none;
  gap: 1em;
}
#resultsCount{
  padding: 1em;
  background: Gold;
  &::before{content: "↑ ";}
}
:has(#currentTag:not(:empty)),
:has(#menu:checked) {
  .tags, .utils {display: flex;}
}
#colors {
  appearance: none;
  background: none;
  border:none;
  padding: 0;
}
/* ---------------------------------------- header */
#header {
  padding: 1em;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  position: fixed;
  width: 100%;
  height: var(--headerheight);
  top: 0;
  z-index: 1000;
  background: white;
  a { text-decoration: none;}
}


/* ---------------------------------------- grid */

#results,
main {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  background: deeppink;
  scroll-margin-top: var(--headerheight);
}
[data-colors="0"] {
  #results,
  main { background: #eee}  
}
/* ---------------------------------------- articles */

article {
  scroll-snap-align: start;
  position: relative;
  background: var(--c, white);
  min-width: 0;
  max-height: 80vh;
  overflow-y: scroll;
  color: rgba(0,0,0,.7);
  scroll-margin-top: var(--headerheight);
}

article header {
  padding: 1em;
  text-transform: uppercase;
  display: grid;
  grid-template-columns: 1fr min-content;
  align-items: start;
  gap: 1em;
  *{grid-column: 1; margin: 0;}
  a {grid-column: 2; grid-row:1}
}
summary {
  background: var(--c);
  width: fit-content;
  border-radius: 2em;
  color: white;
  padding: 0 1em;
  cursor: pointer;
  mix-blend-mode: multiply;
  &::marker{content: "";}
}
details[open] summary {margin-bottom: 1em;}
details {
  text-transform: none;
}

[data-colors="0"] article {
  background: var(--g, white)
}
/* ---------------------------------------- images */

.image figure {
  max-height: 50vh;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  > a {
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 2em);
    height: calc(100% - 2em);
  }
  img {
    width: calc(100% - 2em);
    height: calc(100% - 2em);
    object-fit:scale-down;
  }
  figcaption{
    position: absolute;
    top: 0;
    left: 0;
    padding: 1em;
    opacity: 0;
    background: var(--c, transparent);
    width: calc(100% - 5em);
  }
  &:hover figcaption{
    opacity: 1
  }
}


/* ---------------------------------------- text */

div.text {
  text-transform: none;
  line-height: 1.4;
  img {
    max-width: 100%;
    display: block;
    margin-bottom: 1em;
  }
}

/* ---------------------------------------- videos */

.enabled{
  z-index: 666;
}

.youtube-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.youtube-container .embed-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/9
}

.youtube-container .embed-container iframe {
  position: absolute;
  width: 100%;
  aspect-ratio: 16/9
}

.youtube-container img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: none;
  mix-blend-mode: luminosity;
  filter: grayscale(1);
}

[data-colors="0"] .youtube-container img {
  filter: none;
  mix-blend-mode: normal;
}
.disabled img,
.enabled .embed-container  {
  display: block;
}
.enabled img,
.disabled .embed-container {
  display: none;
}

.youtube-hint {
  display: none;
}
.youtube-hint::before{
  content: "PLAY";
  display: flex;
  align-items: center;
  justify-content: center;
  display: block;
  position: absolute;
  top: 1em;
  left: 1em;
  width: 4em;
  aspect-ratio: 2;
  background: var(--c);
  border-radius: 2em;
  z-index: 3;
  display: none;
}
.youtube-container:hover .youtube-hint::before{display: flex;}

.disabled .youtube-hint,
.disabled .youtube-hint button {
  position: absolute;
  appearance: none;
  background: transparent;
  inset: 0;
  z-index: 1;
  border: none;
  display: block;
  cursor: pointer;
}
.disabled .youtube-hint button {
  opacity: 0;
}



/* ---------------------------------------- footer */
body > footer {  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0;
  a {
    min-width: 3em;
    padding: 1em;
    flex: 1;
    text-align: center;
    text-decoration: none;
    background: var(--c);
  }
  a:hover,
  a.current {
    background: #000;
    color: white;
  }
}
[data-colors="0"] footer {
  filter: grayscale(1);
}