@charset "utf-8";

html {
  background-color: #eee;
}
h1 {
  font-family: 'Times New Roman';
  text-align: center;
  font-size: 50px;
  margin: 1rem;
}
header a {
  text-decoration: none;
  color: #000;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
  margin-top: 0;
}

ul {
  padding-left: 0;
}

.select {
  color: white;
  background-color: black;
}
.period a {
  text-decoration:none;
}
.period a:link, .period a:visited{
  color: black;
}
.period a:hover, .period a:active, .period a:focus {
  color: white;
  background-color: black;
}



.container li {
  width: calc(33.33% - 2px);
}
.container ul {
  float: left;
}
.container img {
  display: block;
  width: 100%;
}

[value="c_all"]:checked ~ .targets [data-category] {
  display: block;
}
[value="r31"]:checked ~ .targets .target:not([data-category~="r31"]),
[value="scenery"]:checked ~ .targets .target:not([data-category~="scenery"]),
[value="keeb"]:checked ~ .targets .target:not([data-category~="keeb"]),
[value="star"]:checked ~ .targets .target:not([data-category~="star"]),
[value="film"]:checked ~ .targets .target:not([data-category~="film"]),
[value="other"]:checked ~ .targets .target:not([data-category~="other"]),
[value="journey"]:checked ~ .targets .target:not([data-category~="journey"]) {
  display: none;
}

input[type="radio"] {
  display: none;
}

.period, .container_category {
  position: relative;
  background: #eee;
  margin: 0;
}
.period, .container_category {
  padding-bottom: 10px;
}
.period li, .container_category li {
  display: inline-block;
  text-align: center;
  width: 5rem;
}
.period p, .container_category p {
  margin: 0;
  padding-bottom: 5px;
}
.container_category label {
  text-align: center;
  padding: 0.25rem 0.5rem;
  min-width: 50px;
  cursor: pointer;
  transition: all 0.2s;
}
.container_category label:hover {
  background: #333;
  color: #fff;
}
[value="c_all"]:checked ~ .container_category [for="c_all"],
[value="r31"]:checked ~ .container_category [for="r31"],
[value="scenery"]:checked ~ .container_category [for="scenery"],
[value="keeb"]:checked ~ .container_category [for="keeb"],
[value="film"]:checked ~ .container_category [for="film"],
[value="other"]:checked ~ .container_category [for="other"],
[value="journey"]:checked ~ .container_category [for="journey"] {
  background-color: #333;
  color: #fff;
}

@media (max-width: 600px) {
  h1 {
    font-family: 'Times New Roman';
    text-align: center;
    font-size: 40px;
    margin: 0.5rem;
  }
  .container li {
      width: calc(50% - 1px);
  }
  .period li, .container_category li {
    padding-bottom: 10px;
  }
  .container_category {
    top: 90px;
  }
}