/*body::-webkit-scrollbar
{
    display: none;
}*/
main
{
    width: 100%;
    height: auto;
}
header
{
    margin-bottom: 45px;
}
main>section{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 20px;
}
main>section>ul
{
    width: 35vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 10px 0px 20px 0px;
    padding: 0;
    list-style-type: none
}
/* header #pageName
{
    font-size: 9vw;
    color: green;
    font-style: italic;
} */
#sorting
{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.75vh;
}
ul button
{
    padding: 2px 10px 2px 10px;
    transition: letter-spacing 0.25s,
    border 0.5s,
    border-radius 0.25s ease-out,
    background-color 0.25s;
    border-radius: 20px;
}
ul .nonActiveFilter
{
    border: 2px solid white;
    background-color: white;
    letter-spacing: auto;
}
ul .activeFilter
{
    background-color: var(--rouge);
    border-radius: 6px;
    border: none;
}
ul button.activeFilter:hover
{
    background-color: var(--rouge);
    border: none;
    letter-spacing: auto;
    color: black;
}
ul button:hover
{
    letter-spacing: 0.025vw;
    border: 2px solid var(--rouge);
    border-radius: 6px;
    color : var(--rouge);
    background-color: black;
}
#gridContainer
{
    box-sizing: initial;
    margin: 0;
    padding: 0;
    display:grid;
    grid-template-columns: 35vw 35vw;
    grid-column-gap: 5vw;
    grid-row-gap: 5vw;
    grid-auto-rows: 21vw;
}
.gridItem
{
    transition: opacity .5s ease-out, width .5s ease-out;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border : 2px solid #C4C4C4;
    animation: fade-in-down 1s ease backwards;
}

.visible
{
    opacity: 1;
    width: 35vw;
}
.hidden
{
    opacity: 0;
    width: 0;
}

.gridItem>section:first-of-type
{
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: 35vw;
    background-repeat: no-repeat;
    transition: background-size 1s,filter 1s;
}
.gridItem:hover>section:first-of-type
{
    background-size: 40vw;
    filter:blur(2px);
}
.gridItem:hover .description
{
    opacity: 1;
}
.gridItem:hover .gridFilters
{
    opacity: 1;
}


.description
{
    height: 100%;
    width: 100%;
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.8));
    opacity: 0;
    transition: opacity 1s;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    position: absolute;
}
.description h3
{
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5vh;
    padding: 0;
    margin:1vh;
    text-align: center;
}
.description p
{
    font-family: 'Oxygen', sans-serif;
    font-size: 2vh;
    margin: 0;
    padding: 1vh;
    border-top: 2px solid var(--rouge);
}

.gridFilters
{
    position: absolute;
    align-self: flex-end;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    box-sizing: content-box;
    padding-right: 1.5vh;

    font-family: 'Oxygen', sans-serif;
    font-style: italic;
    font-size: 1.5vh;
    
    transition: opacity 1s;
    opacity: 1;
}

.gridFilters p
{
    padding-left: .5vh;
    margin-bottom: 5px;
    color: rgb(220, 220, 220);
    align-self: flex-end;
    width: auto;
}

.gridFilters p::first-letter
{
    text-transform:uppercase;
}
/* .description p:last-child
{
    border-top: 2px solid blue;
    align-self: end;
} */

footer
{
    position: relative;
}

@keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
  }

  
@media (max-width: 1450px){
    main>section>ul
    {
        width: 45vw;
    }
    /* ul button
    {
        font-size: 1.5vw;
    } */

}

@media (max-width: 1300px){
    main>section>ul
    {
        width: 55vw;
    }
    header #pageName
    {
        font-size: 11vh;
    }
    
}

@media (max-width: 980px){
    /*body::-webkit-scrollbar
    {
        display: initial;
    }*/
    /*body
    {
        width: 113%;
    }*/
    main
    {
        min-height: 100vh;
    }
    header
    {
    margin-bottom: 0px;
    }
    header menu
    {
        height: 100%;
        top : 0;
    }
    header #pageName
    {
        font-size: 11.25vw;
    }
    header>div #descContent p
    {
        margin: 0;
    }
    main>section>ul
    {
        width: 38vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap : 10px;
        justify-content: space-around;
        margin: 5vw 0px 10vw 0px;
        padding: 0;
        list-style-type: none
    }
    ul .activeFilter
    {
        border-radius: 0.5vw;
    }
    ul button
    {
        font-size: 3vw;
        border-radius: 2.5vw;
    }
    #gridContainer
    {
        grid-template-columns: 85vw;
        grid-auto-rows: 35vw;
        height: auto;
        transition: height 1s;
    }
    .gridItem
    {
        box-sizing: border-box;
        top : 0px; /* pour que la transition fonctionne il doit y avoir une valeur de base*/
        border: 4px solid white;
    }
    .visible
    {
        transition:
        opacity .3s,
        visibility 0s 0s, 
        top 0.9s,
        max-height 1s;

        max-height: 100%;
        visibility: visible;
        width: auto;
    }
    .visible .description
    {
        opacity: 1;
    }
    .hidden
    {
        transition:
        opacity 1s,
        visibility 0s 1s, 
        top 0.9s,
        max-height 1s;
        width: auto;
        max-height: 0%;
        opacity: 0;
        visibility: collapse;
    }
    .hidden .description
    {
        opacity: 0;
    }
    .gridItem>section:first-of-type
    {
        background-size: 85vw;
    }
    .gridItem:hover>section:first-of-type
    {
        background-size: 85vw;
        filter:none;
    }
    .gridItem:hover .description
    {
        
    }
    .description
    {
        opacity: 1;
        background: rgba(0, 0, 0, 0.3);
    }
    .description h3
    {
        font-size: 5vw;
    }
    .hidden .description
    {
        transition: opacity 0.3s ease;
        opacity: 0;
    }
    .visible .description
    {
        transition: opacity 0.5s ease 0.2s;
        opacity: 1;
    }
    .gridFilters
    {
        opacity: 1;
    }
    footer
    {
        margin-top: 3vh;
    }
}