html{
    padding:0; margin: 0;
    width: 100%;
    overflow-x: hidden;
    background-color: #f3f3f3
}

main{
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20vh;
    display: flex;
    flex-direction: column;
    gap: 20vh;

}

content{
    padding-bottom: 5vh;
}

/* --------------- Header --------------- */

header{
    position: fixed;
    width: 96vw; height: 10vh;
    top:0;
    padding-top: 2vh;
    padding-left: 2vw;
    padding-right: 2vw;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

nav{
    width: max-content; height: auto;
    justify-content: space-between;
    gap:20px;
}

#menuDesktop {
    display: flex;
    flex-direction: row;
}

#menuMobile, #menuMobile-button{
    display: none;
}

.tag{

    height: fit-content; width: fit-content;
    padding: 4px 8px 4px 8px;
    background-color: white ;
}

@media (min-width: 321px) and (max-width: 799px) {

    #menuDesktop {
        display: none;
    }
    
    #menuMobile-button {
        display: flex;
        position: fixed;
        right:5vw; top : 5vh;
    }

    #menuMobile{
        position: fixed;
        display: flex;
        top:0;
        z-index: -1;
        height: 100vh;
        width: 100vw;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 24px;
        transition: .3s;
        transition-timing-function: ease-out;
        background-color: #3D3D3D;

    }

    .menuMobile-close{
        left: 100vw;
        display: none;
    }

    .menuMobile-open{
        display: flex;
        left:0;
    }
}


/* --------------- Footer --------------- */

.footer > content{
    display: flex;
    flex-direction: column;
    gap: 8vh;
    justify-content: space-between;
}

.footer > content > img{
    width: auto; height: 40vh;
    object-fit: cover;
}

.footer > content > div{
    display: flex;
    justify-content: space-between;
}


/* --------------- Section --------------- */

.section {
    width: 90vw;
    display: flex;
    flex-direction: column;
    gap: 8vh;
    animation: reveal linear;
    animation-timeline: view();
    animation-range-start: over 50%;
    animation-range-end: contain 0%;

}

.sectionTitle{
    border-bottom: 2px solid #3D3D3D;
    height: 5vh;
}


/* --------------- Call to action --------------- */

.CTA{
    width: fit-content;
    transition: 300ms;
    padding: 10px 20px 10px 20px;
    border: solid 1px;
    text-align: center;
}

/* CTA Large */

.large{
    padding: 20px 40px 20px 40px;
    border-color: #3D3D3D;
}

.large .label{
    font-size: 16px;    
}

.xlarge .label{
    font-size: 32px;  
    font-weight: 500;    

}

/* CTA primaire */

.primary{
    background-color: #3D3D3D;
}

.primary .label{
    color:#f3f3f3;
}

.primary:hover{
    background-color: #000000;
}

/* CTA secondaire */

.secondary{
    background-color: #EEEEEE;
    border-color: #EEEEEE;
}

.secondary .label{
    color:#3D3D3D;
}

.secondary:hover{
    background-color: #DDDDDD;
    border-color: #DDDDDD;
}

/* CTA tertiaire */

.tertiary{
    background-color: #f3f3f3;
    border-color: #f3f3f3;
}

.tertiary:hover{
    border-color: #3D3D3D;
}

/* CTA selctionné */

.selected{
    background-color: #EEEEEE;
    border-color: #3D3D3D;
}

.selected .label{
    color:#3D3D3D;
}

.selected:hover{
    background-color: #DDDDDD;
}

/* bar d'action */

.actions{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;

}

/* --------------- Carte de projet --------------- */

.projectCard{
    width: 34vw; height: auto;
    display: block;
    padding : 1vw ;
    gap: 1vw ;
    transition: background-color 300ms;
    animation: reveal linear;
    animation-timeline: view();
    animation-range-start: over 50%;
    animation-range-end: contain 30%;
}

.projectCard > .PC-header {
    padding-bottom: 1vw; 
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.projectCard > .PC-header > .PC-tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vw;
}

.projectCard > img {
    width: 100%; height: 18vw;
    object-fit: cover;
}

/* var selection */

.selection{
    width: 40vw; height: auto;
}
.selection > img{
    width: 100%; height: 20vw;
}

@media (min-width: 321px) and (max-width: 799px) {
    .projectCard{
        width: 86vw; height: auto;
        padding : 2vw;
        gap: 2vw ;
    }

    .projectCard > img {
        width: 100%;
        height: 20vh;
        object-fit: cover;
    }

    .selection > img{
        height: 20vh;
    }

    .projectCard > .PC-header {
        padding-bottom: 2vw; 
    }

    .projectCard > .PC-header > .PC-tags {
        gap: 2vw;
    }
    

}

/* var colored */

.Arkiks:hover{
    background-color: rgba(25, 168, 240, 0.4);
}

.Beat:hover{
    background-color: rgba(39, 202, 167, 0.4);
}

.Callegari:hover{
    background-color: rgb(27, 40, 40, 0.4);
}

.FrenchTouch:hover{
    background-color: rgb(255, 74, 63, 0.4);
}

.Grabble:hover{
    background-color: rgba(244, 12, 96, 0.4);
}

.Starlight:hover{
    background-color: rgba(66, 37, 244, 0.4);
}

.Tian:hover{
    background-color: rgba(85, 102, 17, 0.4);
}

.Zeero:hover{
    background-color: rgba(36, 212, 113, 0.4);
}




/*
@keyframes AnimClick {
    0%{
        width: 2vw;
        height: 2vw;
    }
    30%{
        width: 1.5vw;
        height: 1.5vw;
    }
    60%{
        width: 2.5vw;
        height: 2.5vw;
    }
    100%{
        width: 2vw;
        height: 2vw;
    }
    
}
*/
@keyframes AnimClick {
    0%{
        padding:.25vw;
    }
    30%{
        padding:0vw;
    }
    60%{
        padding:.5vw;
    }
    100%{
        padding:.25vw;
    }
    
}

@keyframes AnimClick2 {
    0%{
        padding:.4vw 1vw .2vw 1vw;
    }
    30%{
        padding:.15vw .75vw 0 .75vw;
    }
    60%{
        padding:.65vw 1.25vw .45vw 1.25vw;
    }
    100%{
        padding:.4vw 1vw .2vw 1vw;
    }
    
}

.clicked{
    animation: AnimClick .5s forwards;
}

.clickedVoir{
    animation: AnimClick2 .5s forwards;
}




@media (min-width: 321px) and (max-width: 799px) {

    body{
        overflow-x : hidden;
        padding:0; margin: 0;
    }

    .tag{

        height: fit-content; width: fit-content;
        padding: 0.2vw 0.6vw 0.1vw 0.6vw;
        background-color: white ;
    }
    
    .footer > content{
        display: flex;
        flex-direction: column;
        gap: 8vh;
        justify-content: space-between;
    }
    
    .footer > content > img{
        width: auto; height: 20vh;
        object-fit: cover;
    }
    
    .footer > content > div{
        flex-direction: column;
        justify-content: space-between;
        gap: 4vh
    }
    header > .CTA {
        display: none;
    }

    header{
        height: 10vh;
        width: 100vw;

        padding-top: 5vh;
    }

    .cursor{
        background-color: rgb(0, 0, 0);
    }
    .cursor > h3 {
        opacity: 0%;
    }

    .actions{
        flex-direction: column;
        margin-left: 10vw;
        margin-right: 10vw;

    }
    
    .actions > .CTA{
        width: 100%;
    }
}

@keyframes reveal {
    from {
        scale: 0.9;
        transform: translateY(-50px);
        opacity: 0;
              
    }
    
    to{
        scale: 1;
        transform: translateY(0px);
        opacity: 1;
              
    }
}

@keyframes textReveal {
    from {
        transform: translateY(75px);
        opacity: 0;
    }
    
    to{
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes cursorPlace{
    from{
        z-index: 100;
    }
    to{
        z-index: 100;
    }
}