* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 50px 0;
  /* font-size: normal; */
  /* font: 1rem/1.3; */
  font-family: monospace;
  background:
	repeating-radial-gradient( circle, rgb(120, 95, 140) 0 0.0001%, rgb(0, 32, 106) 0 0.0002%, rgb(113, 182, 255) 0 0.0003%, rgb(231, 248, 17) 0 0.0004% ) 60% 60%/100px 100px, repeating-conic-gradient( rgb(221, 29, 249) 0 0.0001%, rgb(32, 30, 49) 0 0.0002%, rgb(172, 172, 172) 0 0.0003%, rgb(44, 31, 49) 0 0.0004% ) 40% 40%/5000px 5000px;

   background-blend-mode: screen;
}

main {
  max-width: 801px;
}

a {
  font-weight:bold;
  text-decoration: none;
  color: inherit;
}
strong {
  color: white;
  background: #000;
}

h1 {
  text-align: center;
}

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


/* CONTAINERS */

.flex-container {
  display: grid;
  grid-template-columns: 2fr repeat(2, 1.5fr) 1fr 1.5fr;
  grid-template-rows: auto auto auto;
  grid-gap: 2%;
  padding-bottom: 3%;

}
.header {
  grid-area: 1 / 2 / 2 / 4;
  background: #fff;
  border: 4px solid #000;
  padding: 1% 3%;
  border-radius: 5px;
}

.container {
  background: #fff;
  grid-area: 2 / 2 / 4 / 4;
  border: 4px solid #000;
  padding: 1% 3%;
  border-radius: 5px;
}

.flex-container {
  grid-template-columns: auto auto auto auto auto;
  grid-template-rows: auto auto auto;
}
.header {
  grid-area: 1 / 2 / 2 / 5;
}
.container {
  grid-area: 2 / 2 / 3 / 5;
}
.nav {
  grid-area: 3 / 2 / 4 / 5;
}

/* SUPER COOL NO JS FILTERING */
/* FILTERS */
.filters {
  text-align: center;
  margin-bottom: 2rem;
}

.filters * {
  display: inline-block;
}

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

.filters label:hover {
  background: magenta;
  color: white;
}


/* FILTERED ELEMENTS*/
.files {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
  list-style-type: none;
}

.files .file {
  background: gainsboro;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem;
}
.files img {
  margin-right: 5px;
}

.files .tags * {
  font-size: 0.75rem;
  display: inline-block;
  padding: 0.3rem 0.3rem;
  border-radius: 0.6rem;
  line-height: normal;
  transition: all 0.1s;
  background: #5100FF;
  color: white;
}


/* FILTERING RULES   */
[value="All"]:checked ~ .filters [for="All"],
[value="boring_dystopia"]:checked ~ .filters [for="boring_dystopia"],
[value="sexuality"]:checked ~ .filters [for="sexuality"],
[value="documentary"]:checked ~ .filters [for="documentary"],
[value="film"]:checked ~ .filters [for="film"],
[value="stephane_breton"]:checked ~ .filters [for="stephane_breton"],
[value="pierre_carles"]:checked ~ .filters [for="pierre_carles"],
[value="tech"]:checked ~ .filters [for="tech"]
{  background: #DEB600;
  color: white;
}
[value="All"]:checked ~ .files [tag-category] {
  display: block;
}
[value="boring_dystopia"]:checked ~ .files .file:not([tag-category~="boring_dystopia"]),
[value="sexuality"]:checked ~ .files .file:not([tag-category~="sexuality"]),
[value="documentary"]:checked ~ .files .file:not([tag-category~="documentary"]),
[value="film"]:checked ~ .files .file:not([tag-category~="film"]),
[value="stephane_breton"]:checked ~ .files .file:not([tag-category~="stephane_breton"]),
[value="pierre_carles"]:checked ~ .files .file:not([tag-category~="pierre_carles"]),
[value="tech"]:checked ~ .files .file:not([tag-category~="tech"])
{  display: none;
}

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