:root {
  --color-checked: rgba(0, 204, 0, .7);
  --color-checked-border: rgba(12, 21, 39, 1);
  --color-unchecked: rgba(0, 0, 0, 1);
  --color-unchecked-border:10, 10, 10, 1;
}

#container-filter{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  grid-gap: 0.2rem;
  padding-top: 0.5rem;
}

.selection-box{
  border: 2px solid var(--color-link);
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}

.centered-text{
  text-align: center;
}

.checked{
  /* background-color: var(--color-checked); */
  background-color: var(--color-secondary-text);
  transition-duration: var(--search-transition-speed);
}

.unchecked{
  background-color: var(--color-unchecked);
  transition-duration: var(--search-transition-speed);
}

#container-portfolio{
  padding-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.2rem;
}

#filter-toggle{
	border: 2px solid var(--color-link);
	border-radius: 5px;
    cursor: pointer;
	background-color: var(--color-unchecked);
	transition-duration: var(--search-transition-speed);
}

#filter-toggle:hover{
	background-color: var(--color-secondary-text);
	transition-duration: var(--search-transition-speed);
}

#master-toggle{
    display: flex;
    flex-direction: row;
    flex: space-between;
}
#master-toggle div{
    flex: 1;
    margin: 0.25em;
    background-color: var(--color-unchecked);
    transition-duration: var(--search-transition-speed);
}
#master-toggle div:hover{
    background-color: var(--color-secondary-text);
    transition-duration: var(--search-transition-speed);
}

.p-item{
  border: 2px solid var(--color-link);
  border-radius: 5px;
}

.p-item-label{
  text-align: center;
  font-family: var(--font-header);
}

.p-item a img{
  width: 100%;
  border-radius: 5px;
}

.p-item-desc{
  display: flex;
  justify-content: space-between;
}

.p-item-desc a{
  text-align: center;
  color: white;
  flex: 1;
}

.hidden {
	display: none !important;
	visibility: hidden;
	transition: visibility var(--search-transition-speed);
}

.unhidden {
	display: grid;
	visibility: visible;
	transition: visibility var(--search-transition-speed);
}

@media only screen and (min-width: 600px) {
  #container-portfolio{
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.5rem;
  }
}