#pdg {
  overflow: hidden; }
  #pdg .w-1 {
    width: 90%;
    max-width: 40rem;
    margin: 5rem auto 1rem; }
  #pdg > .hh {
    border-radius: 14px;
    background: #FFF !important;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    padding: 1rem 2rem; }
    #pdg > .hh .l {
      transform: scale(0);
      opacity: 0;
      transition: transform 0.5s ease-out, opacity 0.5s ease-out; }
      #pdg > .hh .l.anim-fl {
        transform: scale(1);
        opacity: 1; }
  #pdg > .vls {
    margin-top: 6rem;
    margin-bottom: 6rem;
    background: #FFF !important;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transform: rotate(-3deg);
    color-scheme: only light !important; }
    #pdg > .vls > div {
      margin: auto;
      width: fit-content;
      display: flex; }
      #pdg > .vls > div img {
        max-width: 40rem; }
  #pdg > .accr p {
    text-align: center;
    font-size: 2.4rem;
    line-height: 160%;
    color: #FFF;
    text-shadow: 1px 1px 4px black;
    font-style: normal;
    font-weight: 700;
    max-width: 45rem;
    width: 90%;
    margin: auto;
    opacity: 0;
    animation: fadeInUp 1.5s ease-out forwards 1.5s; }
    #pdg > .accr p > span {
      color: #F00;
      text-shadow: 1px 1px 4px black;
      display: inline-block;
      animation: float 1.5s ease-in-out infinite;
      animation-delay: var(--d); }
  #pdg > .clic {
    display: flex;
    justify-content: center; }
    #pdg > .clic > img {
      height: 10rem;
      width: 10rem;
      transform: rotate(320deg);
      opacity: 0;
      animation: fadeInClic 0.5s ease-out forwards 2s, clicAnim 1.5s ease-in-out infinite; }

#container-2 {
  background: linear-gradient(84deg, #FEFDEB 7.96%, #FFF1D6 29.31%, #ECEBD9 51.5%, #FFF3CD 68.91%, #FEFDEB 95.04%); }
  #container-2 > .content {
    padding-bottom: 10rem; }

#search {
  margin: 4rem auto 2rem;
  max-width: 30rem;
  width: 90%;
  position: relative; }
  #search input {
    padding: 1.3rem 2rem;
    width: 100%;
    border: 3px solid #DCDAB7;
    border-radius: 3rem;
    background-color: white;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); }
  #search img {
    height: 2.5rem;
    width: 2.4rem;
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%); }

#projects {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: center; }
  #projects > .p {
    height: 20rem;
    max-width: 40rem;
    width: 80%;
    margin: 1rem;
    border-radius: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem; }
    #projects > .p.no-gap {
      gap: 0.5rem; }
    #projects > .p::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      inset: 0;
      background-image: var(--img-url);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      filter: brightness(75%) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.4));
      z-index: 0;
      border-radius: 1rem; }
    #projects > .p > h2 {
      text-transform: uppercase;
      font-size: 2.5rem;
      text-align: center;
      margin: -3rem 1rem 0 1rem; }
    #projects > .p > hr {
      width: 5rem;
      border: 3px solid #bcbcbc;
      z-index: var(--z-text);
      margin-bottom: 1rem; }
      #projects > .p > hr.no-mb {
        margin-bottom: 0; }
    #projects > .p > p {
      font-size: 2rem;
      text-align: center; }
    #projects > .p > .list-participants {
      display: flex;
      flex-direction: column;
      gap: 0.2rem; }
      #projects > .p > .list-participants > p {
        font-size: 2rem;
        text-align: center;
        color: white;
        text-shadow: 1px 1px 4px black;
        font-weight: bolder;
        z-index: var(--z-text); }
    #projects > .p > h2, #projects > .p > p {
      color: white;
      text-shadow: 1px 1px 4px black;
      font-weight: bolder;
      z-index: var(--z-text); }
    #projects > .p > .btn {
      position: absolute;
      bottom: -3.5rem;
      left: 50%;
      transform: translateX(-50%); }

#detail-modal .modal-content {
  padding: 0;
  position: relative; }
  #detail-modal .modal-content .content {
    padding: 2rem 0.1rem 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem; }
    #detail-modal .modal-content .content > .desc {
      line-height: 2.3rem; }
  #detail-modal .modal-content .img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    height: 14rem; }
    #detail-modal .modal-content .img::before {
      content: "";
      position: absolute;
      inset: 0;
      height: 14rem;
      background-image: var(--img-url);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      filter: brightness(70%) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.4)); }
    #detail-modal .modal-content .img > p {
      color: white;
      text-shadow: 1px 1px 4px black;
      z-index: var(--z-text); }
      #detail-modal .modal-content .img > p:first-child {
        font-size: 2.4rem;
        text-transform: uppercase;
        font-weight: bolder; }
      #detail-modal .modal-content .img > p:last-child {
        font-size: 2rem; }

@keyframes float {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-3px); }
  100% {
    transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(-10px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes fadeInClic {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes clicAnim {
  0%, 100% {
    scale: 0.8; }
  50% {
    scale: 1; } }

@media (prefers-color-scheme: dark) {
  #pdg > .hh {
    background: #FFF !important; } }