@import "general.css";

projects
{
    --card-height:auto;
    --card-width: 27rem;
    height:auto;
}

projects
{
    display: block;
    padding:1rem;
    /*background-color: #0c0c25 !important;*/
}

projects h2, projects p
{
    margin-bottom:1rem;
    text-align: center;
    color:white;
}

projects-grid
{
    display: grid;

    margin:1rem;

    grid-template-columns: repeat(auto-fit, var(--card-width));
    grid-gap:1rem;

    justify-content: center;
    justify-items: center;
}

project-card
{
    transition: opacity 0.2s ease, transform 0.2s ease, display;
    opacity: 0;
    height:var(--card-height);
    width:var(--card-width);
    background-color: black;
    filter:saturate(0.9), brightness(0.92);
    object-fit: cover;

    display: none;
}

project-card.active
{
    transition: 0.2s;
    opacity: 1;
    color:transparent;

    display: block;
    object-fit: cover;

    filter:saturate(1.05), brightness(1);
}

project-card:hover
{
    transition:0.2s;
    transform: translateY(-15px);
}

@media (max-width: 550px)
{
    project-card
    {
        width: 18rem;
    }
}

@media (max-width: 320px)
{
    project-card
    {
        width: 14rem;
    }
}

/*#region Filter*/

projects-filter
{
    display: block;
    justify-self: center;
    justify-content: center;
    justify-items: center;
}

projects-filter button
{
    border:none;
    background: rgba(0,0,0,0.6);

    padding: 5px 20px;
    border-radius: 999px;
    font-size: 12px;
    backdrop-filter: blur(6px);

    color:white;
}

projects-filter button 
{
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: #000000;
  color: #ffffff;
  cursor: pointer;
  transition: 0.25s;
}

projects-filter button.active 
{
    background: white;
    color: rgb(22, 18, 96);
    animation : Apparition 2s linear;
}

/*#endregion Filter*/