/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --black: #3a3a3a;
  --white: #fff;
  --blue: #2A65FD;
}

/* * {
  margin: 0;
  padding: 0;
}*/

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ol {
  list-style: none;
}


.container {
  max-width: 1200px;
  margin: 0 auto;
}

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


/* FILTERS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.filters {
  text-align: center;
  margin-bottom: 2rem;
}

.filters * {
  display: inline-block;
}

.filters label {
  padding: 0.5rem 0.5rem;
  margin-bottom: 0.25rem;
  border-radius: 2rem;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  transition: all 0.1s;
}

.filters label:hover {
  background: var(--blue);
  color: var(--white);
}


/* FILTERED ELEMENTS (POSTS)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.posts {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
}

.posts .post {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.posts .post-title {
  font-size: 1.3rem;
}

.posts .post-title:hover {
  text-decoration: underline;
}

.posts figcaption {
  padding: 1rem;
}

.posts .post-categories {
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
}

.posts .post-categories * {
  display: inline-block;
}

.posts .post-categories li {
  margin-bottom: 0.2rem;
}

.posts .post-categories a {
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  border: 1px solid;
  line-height: normal;
  transition: all 0.1s;
}

.posts .post-categories a:hover {
  background: var(--blue);
  color: var(--white);
}


/* FILTERING RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– 
[value="All"]:checked ~ .filters [for="All"],*/
[value="A"]:checked ~ .filters [for="A"],
[value="B"]:checked ~ .filters [for="B"],
[value="C"]:checked ~ .filters [for="C"],
[value="D"]:checked ~ .filters [for="D"],
[value="E"]:checked ~ .filters [for="E"],
[value="F"]:checked ~ .filters [for="F"],
[value="G"]:checked ~ .filters [for="G"],
[value="H"]:checked ~ .filters [for="H"],
[value="I"]:checked ~ .filters [for="I"],
[value="J"]:checked ~ .filters [for="J"],
[value="K"]:checked ~ .filters [for="K"],
[value="L"]:checked ~ .filters [for="L"],
[value="M"]:checked ~ .filters [for="M"],
[value="N"]:checked ~ .filters [for="N"],
[value="O"]:checked ~ .filters [for="O"],
[value="P"]:checked ~ .filters [for="P"],
[value="Q"]:checked ~ .filters [for="Q"],
[value="R"]:checked ~ .filters [for="R"],
[value="S"]:checked ~ .filters [for="S"],
[value="T"]:checked ~ .filters [for="T"],
[value="U"]:checked ~ .filters [for="U"],
[value="V"]:checked ~ .filters [for="V"],
[value="W"]:checked ~ .filters [for="W"],
[value="X"]:checked ~ .filters [for="X"],
[value="Y"]:checked ~ .filters [for="Y"],
[value="Z"]:checked ~ .filters [for="Z"]
{
  background: var(--blue);
  color: var(--white);
}

[value="All"]:checked ~ .posts [data-category] {
  display: block;
}

[value="A"]:checked ~ .posts .post:not([data-category~="A"]),
[value="B"]:checked ~ .posts .post:not([data-category~="B"]),
[value="C"]:checked ~ .posts .post:not([data-category~="C"]),
[value="D"]:checked ~ .posts .post:not([data-category~="D"]),
[value="E"]:checked ~ .posts .post:not([data-category~="E"]),
[value="F"]:checked ~ .posts .post:not([data-category~="F"]),
[value="G"]:checked ~ .posts .post:not([data-category~="G"]),
[value="H"]:checked ~ .posts .post:not([data-category~="H"]),
[value="I"]:checked ~ .posts .post:not([data-category~="I"]),
[value="J"]:checked ~ .posts .post:not([data-category~="J"]),
[value="K"]:checked ~ .posts .post:not([data-category~="K"]),
[value="L"]:checked ~ .posts .post:not([data-category~="L"]),
[value="M"]:checked ~ .posts .post:not([data-category~="M"]),
[value="N"]:checked ~ .posts .post:not([data-category~="N"]),
[value="O"]:checked ~ .posts .post:not([data-category~="O"]),
[value="P"]:checked ~ .posts .post:not([data-category~="P"]),
[value="Q"]:checked ~ .posts .post:not([data-category~="Q"]),
[value="R"]:checked ~ .posts .post:not([data-category~="R"]),
[value="S"]:checked ~ .posts .post:not([data-category~="S"]),
[value="T"]:checked ~ .posts .post:not([data-category~="T"]),
[value="U"]:checked ~ .posts .post:not([data-category~="U"]),
[value="V"]:checked ~ .posts .post:not([data-category~="V"]),
[value="W"]:checked ~ .posts .post:not([data-category~="W"]),
[value="X"]:checked ~ .posts .post:not([data-category~="X"]),
[value="Y"]:checked ~ .posts .post:not([data-category~="Y"]),
[value="Z"]:checked ~ .posts .post:not([data-category~="Z"])
{
  display: none;
}

/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 900px) {
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 650px) {
  html {
    font-size: 14px;
  }

  .posts {
    grid-template-columns: repeat(1, 1fr);
  }
}

/** LIGHTBOX MARKUP **/

.lightbox {
  /* Default to hidden */
  display: none;

  /* Overlay entire screen */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* A bit of padding around image */
  padding: 2em;

  /* Translucent background */
  background: rgba(0, 0, 0, 0.8);
}

/* Unhide the lightbox when it's the target */
.lightbox:target {
  display: block;
}

.lightbox span {
  /* Full width and height */
  display: block;
  width: 100%;
  height: 100%;

  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}