@charset "UTF-8";
.full-container--project {
  min-height: 100%;
}

.bg--project {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #027DEE;
  background-image: url("/svg/blueprint.svg");
  background-size: auto;
  background-position: top;
  background-repeat: repeat;
}

.container--filter {
  margin-block: 20px 0px;
  padding-inline: 20px;
}
.container--projects {
  width: 100%;
}

.title {
  color: #fff;
}
.title--project {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 40px auto 40px;
  padding: 0px 40px;
  text-align: center;
  font-weight: bold;
  font-size: 5em;
  background-color: rgba(0, 0, 0, 0.4);
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  border-radius: 10px;
}
@media (max-width: 576px) {
  .title--project {
    font-size: 12vw;
    margin-bottom: 5vw;
  }
}
.title--filter {
  color: black;
}
.title--filter-group {
  font-weight: 300;
  margin-bottom: 10px;
}

#filter-project .heading {
  background-color: white;
  padding: 10px;
  border-radius: 10px 10px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 5px;
       column-gap: 5px;
  box-shadow: 0px 2px 4px 0 #000;
  transition: 0.3s;
}
#filter-project .heading:hover {
  background-color: #7FFFD4;
}
#filter-project .heading h3 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0px;
  font-weight: 400;
  font-size: 1.5em;
}
#filter-project .heading svg {
  display: block;
  height: 20px;
}
#filter-project .input-group {
  background-color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  padding-inline: 20px;
}
#filter-project .footer {
  background-color: white;
  padding: 10px;
  border-radius: 0px 0px 20px 20px;
  border-top: 1px dashed #aaa;
  box-shadow: 0px 2px 4px 0 #000;
  transition: 0.3s;
}
#filter-project .footer:hover {
  background-color: #7FFFD4;
}
#filter-project .footer::before {
  content: "";
  display: block;
  text-align: center;
}
#filter-project { /* inactive */ }
#filter-project .input-group {
  max-height: 0px;
  padding-block: 0px;
  transition: 0.5s;
}
#filter-project .footer::before {
  content: "▼";
}
#filter-project.active .input-group {
  max-height: 2000px;
  padding-block: 20px;
  transition: 1.5s;
}
#filter-project.active .footer::before {
  content: "▲";
}

.search-bar__label {
  display: block;
  color: white;
  font-weight: 300;
  margin-bottom: 10px;
}
.search-bar__input {
  display: block;
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  font-weight: 300;
  font-size: 1em;
  transition: 0.3s;
  outline: none;
}
.search-bar__input:-moz-placeholder-shown {
  border: 1px dashed #fff;
  background-color: transparent;
  box-shadow: 0px 2px 4px 0 transparent;
  transform: translateY(0%);
  caret-color: #F7C675;
}
.search-bar__input:-ms-input-placeholder {
  border: 1px dashed #fff;
  background-color: transparent;
  box-shadow: 0px 2px 4px 0 transparent;
  transform: translateY(0%);
  caret-color: #F7C675;
}
.search-bar__input:placeholder-shown {
  border: 1px dashed #fff;
  background-color: transparent;
  box-shadow: 0px 2px 4px 0 transparent;
  transform: translateY(0%);
  caret-color: #F7C675;
}
.search-bar__input:not(:-moz-placeholder-shown) {
  color: black;
  font-weight: bold;
  border: 2px solid #F7C675;
  background-color: #F7C675;
  box-shadow: 0px 4px 10px 2px rgba(247, 198, 117, 0.4);
  transform: translateY(-10%);
  caret-color: black;
}
.search-bar__input:not(:-ms-input-placeholder) {
  color: black;
  font-weight: bold;
  border: 2px solid #F7C675;
  background-color: #F7C675;
  box-shadow: 0px 4px 10px 2px rgba(247, 198, 117, 0.4);
  transform: translateY(-10%);
  caret-color: black;
}
.search-bar__input:not(:placeholder-shown) {
  color: black;
  font-weight: bold;
  border: 2px solid #F7C675;
  background-color: #F7C675;
  box-shadow: 0px 4px 10px 2px rgba(247, 198, 117, 0.4);
  transform: translateY(-10%);
  caret-color: black;
}
.search-bar__input:not(:focus)::-moz-placeholder {
  color: #999;
}
.search-bar__input:not(:focus):-ms-input-placeholder {
  color: #999;
}
.search-bar__input:not(:focus)::placeholder {
  color: #999;
}
.search-bar__input:focus {
  color: black;
  font-weight: bold;
  border: 2px solid #F7C675;
}

.tokens {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
}
.tokens__item {
  display: block;
  margin: 0px 10px 10px 0px;
}
.tokens__item__input {
  display: none;
}
.tokens__item__label {
  display: block;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 200;
  color: #fff;
  border: 1px dashed #aaa;
  background-color: transparent;
  box-shadow: 0px 2px 4px 0 transparent;
  transform: translateY(0%);
  transition: 0.3s;
}
.tokens__item__input:not(:checked) ~ .tokens__item__label:hover {
  border-width: 1px;
  border-color: solid;
  font-weight: bold;
}
.tokens__item__input:checked ~ .tokens__item__label {
  color: #333;
  font-weight: bold;
  border-width: 1px;
  border-style: solid;
  box-shadow: 0px 4px 10px 2px rgba(127, 255, 212, 0.4);
  transform: translateY(-10%);
}
.tokens__item__input:checked ~ .tokens__item__label::before {
  content: "✔ ";
}
.tokens--platform .tokens__item .tokens__item__input:not(:checked) ~ .tokens__item__label:hover {
  border-color: #FF6160;
  color: #FF6160;
}
.tokens--platform .tokens__item .tokens__item__input:checked ~ .tokens__item__label {
  border-color: #FF6160;
  background-color: #FF6160;
  box-shadow: 0px 4px 10px 2px rgba(255, 97, 96, 0.4);
}
.tokens--programming-language .tokens__item .tokens__item__input:not(:checked) ~ .tokens__item__label:hover {
  border-color: #FCFC5C;
  color: #FCFC5C;
}
.tokens--programming-language .tokens__item .tokens__item__input:checked ~ .tokens__item__label {
  border-color: #FCFC5C;
  background-color: #FCFC5C;
  box-shadow: 0px 4px 10px 2px rgba(252, 252, 92, 0.4);
}
.tokens--database .tokens__item .tokens__item__input:not(:checked) ~ .tokens__item__label:hover {
  border-color: #7FFFD4;
  color: #7FFFD4;
}
.tokens--database .tokens__item .tokens__item__input:checked ~ .tokens__item__label {
  border-color: #7FFFD4;
  background-color: #7FFFD4;
  box-shadow: 0px 4px 10px 2px rgba(127, 255, 212, 0.4);
}
.tokens--framework .tokens__item .tokens__item__input:not(:checked) ~ .tokens__item__label:hover {
  border-color: #00F3FB;
  color: #00F3FB;
}
.tokens--framework .tokens__item .tokens__item__input:checked ~ .tokens__item__label {
  border-color: #00F3FB;
  background-color: #00F3FB;
  box-shadow: 0px 4px 10px 2px rgba(0, 243, 251, 0.4);
}

.project-found {
  margin-block: 20px;
  padding: 10px 20px;
  font-size: 1.5em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  border-left: 4px solid #fff;
}
.project-found--empty {
  border-left: 4px solid red;
  color: #ae0a0a;
  font-weight: bold;
  background-color: rgba(255, 186, 186, 0.8);
}

.projects {
  margin-block: 40px 80px;
  padding-inline: 20px;
  width: 100%;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 40px;
  justify-content: center;
}
@media (max-width: 1320px) {
  .projects {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
@media (max-width: 980px) {
  .projects {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .projects {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
}
.projects__item--hide {
  display: none;
}