@import url(base.css);
@import url(nsfw-warning.css);

:root {
  --image-size: 200px;
  --badge-size: calc(1/4 * var(--image-size));
  --gap: 0em;
}

@media (min-width: 1000px) {
  .page { max-width: 80%; }
}

.page {
  padding: 2em calc(1/4 * var(--image-size));
}

#filters {
  margin: 1em 0 2em 0;
}

#filters div {
  display: grid;
  grid-template-columns: 15% auto;
  align-items: baseline;
  grid-gap: 0.75em;
}

#filters h3 {
  margin: 0;
}

#filters h3 {
  text-align: right;
  grid-area: auto / 1;
}

.filterlist {
  display: flex;
  flex-flow: row wrap;
  padding: 0;

  font-weight: 500;
  font-size: 90%;
  grid-column-gap: 0.5em;
}

.filterlist input {
  /* i can't believe it's not appearance: none */
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.filterlist li {
  list-style: none;
}

.filterlist li:focus-within {
  color: var(--focus-text);
}

.filterlist label {
  cursor: pointer;
  padding: 0.15em 0.4em;
  border-radius: 1000px;
  border: 1px solid transparent;
}

.filterlist label::before {
  content: url('/style/unchecked.svg');
  display: inline-block;
  height: 1em;
  width: 1em;
  vertical-align: -15%;
  padding-right: 0.25em;
  text-shadow: none;
}
.filterlist :checked + label::before { content: url('/style/checked.svg'); }
.filterlist :checked + label {
  background: var(--button-bg);
  border: var(--button-border);
}

.filterlist label:not([data-count="1"])::after {
  content: attr(data-count);
  font-size: 80%;
  font-weight: 400;
  padding: 0 0.5em;
}

.filterlist [data-count="1"] {
  font-size: 85%;
  padding-right: 0.8em;
}

.filterlist input {
  margin: 0;
}

#filterstuff {
  padding: 0;
  grid-area: auto / span 2;
  display: flex;
  justify-content: center;
  margin-top: 0;
  grid-gap: 2em;
}

#filterstuff li {
  list-style: none;
  display: inline-block;
  padding: var(--button-pad);
  border-radius: var(--button-radius);
  background: var(--button-bg);
  border: var(--button-border);
}

#filterstuff a {
  font-weight: 500;
  text-decoration: none;
}

#filters-details:not([open])::after {
  content: attr(data-filters);
  margin-left: 2em;
  font-size: 90%;
}


@media (max-width: 50rem) {
  #filters div {
    grid-template-columns: auto;
  }

  #filters h3 {
    text-align: left;
    grid-area: unset;
  }

  #filterstuff {
    grid-area: unset;
    flex-flow: column;
    grid-column-gap: 0.2em;
  }

  #filterstuff li {
    border-radius: 1em;
  }
}


main {
  padding: 0;
  display: grid;
  grid: auto-flow / repeat(auto-fit, var(--image-size));
  grid-gap: var(--gap);
  justify-content: center;
}

.item {
  --border-thickness: 2px;
  list-style: none;

  width: var(--image-size);
  height: var(--image-size);
  overflow: hidden;
  margin: 0;

  position: relative;
}

.item:not(.year-marker) {
  background: hsl(0, 0%, 0%, 50%);
  clip-path: polygon(5% 0, 95% 10%, 95% 100%, 5% 90%);
}
.item img {
  clip-path: polygon(7% 2%, 93% 12%, 93% 98%, 7% 88%);
}

.item:focus-within {
  box-shadow: var(--focus-box);
}

.year-marker:not([hidden]) {
  /* uncomment to reenable line breaks before year markers */
  /* grid-area: auto / 1; */
  padding: var(--border-thickness);
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 3 * var(--gap)));
  grid-gap: 0;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.year-marker .y {
  display: block;
  text-align: center;
  font-size: calc(var(--image-size) * 0.6);
  line-height: 0;
  font-weight: 800;
  transform: scaleX(110%);
}

.item.nsfw::before, .item[data-updated="true"]::after {
  height: var(--badge-size);
  width: var(--badge-size);

  display: inline-block;
  position: absolute;

  mix-blend-mode: hard-light;

  pointer-events: none;
}

.item.nsfw::before {
  transform: rotate(15deg);
  content: url(../18_plus_white.svg);
  top: 11%;
  right: 7%;
  z-index: 100;
}

.item[data-updated="true"]::after {
  transform: rotate(-8deg);
  content: url(../sparkles.svg);
  bottom: 4%;
  right: 7%;
}

footer {
  font-size: 90%;
  text-align: center;
  margin-top: 1em;
}

@media (pointer: coarse) {
  #filters label {
    font-size: 150%;
  }
}