html {
    font-size: 62.5%; /* 62.5% de 16px = 10px */
}

body {
    display: flex;
    background-color: #101214;
    margin: 0 0 10rem 0;
    font-family: 'Montserrat', sans-serif;
    animation: fadeIn .8s ease-in;
    

    /* .bg {
        animation:slide 3s ease-in-out infinite alternate;
        background-image: linear-gradient(-60deg, rgb(186, 47, 156) 50%, #09f 50%);
        bottom:0;
        left:-50%;
        opacity:.5;
        position:fixed;
        right:-50%;
        top:0;
        z-index:-1;
    } */
      
    .bg2 {
        animation-direction:alternate-reverse;
        animation-duration:4s;
    }
      
    .bg3 {
        animation-duration:5s;
    }

    #entete {
        display: flex;
        justify-content: space-around;
        width: 100%;
        z-index: 9999;
        position: fixed;
        top: 0;
        background-color: #1d1e20;
        color: #fffbf2;        
        /* Haut Droite Bas Gauche */
        padding: 1rem 0 1rem 0;
        
        #selfIntro {
            #name {
                color: #6d68ff;
                font-size: 4rem;
                font-weight: 700;
            }
            
            #job {
                font-size: 2rem;
            }
        }

        #socials{
            font-size: 2rem;
            color: #6d68ff;
            #link-logos{
                .social-logo {
                    width: 3rem;
                    height: 3rem;
                    margin-top: 1rem;
                    margin-right: 1rem;
                }

                .social-logo:hover {
                    filter: brightness(0) saturate(100%) invert(91%) sepia(67%) saturate(938%) hue-rotate(310deg) brightness(104%) contrast(102%);
                }
            }
        }
    }

    #self-presentation{
        display: flex;
        flex-direction: row;

        img{
            width: 5rem;
            height: 5rem;
            border-radius: 50%;
        }
    }
}


video {
    margin: 0;
    width: 100%;
    border-top-right-radius: 2.5rem;
    border-top-left-radius: 2.5rem;
}

#project-grid {
    margin-top: 11rem;
    display: grid;
    row-gap: 6rem;
    /* grid-template-columns: repeat(2, 2fr); LAYOUT 2 COL */
    grid-template-columns: repeat(3, 3fr);
    grid-template-rows: repeat(2, 2fr);
    align-items: stretch;
    padding: 0 5rem 0 5rem;

    .project-block {
        position: relative;
        top: 0;
        transition: top ease 0.5s;
        
        display: flex;
        flex-direction: column;
        background-color: #1d1e20;
        border-radius: 0.3rem;
        /* margin: 9rem; LAYOUT 2 COL */
        margin: 2rem;
        box-shadow: 0 50px 40px -20px black;
        outline: solid;
        outline-color: #fffbf24c ;
        outline-width: 3.5px;
        outline-offset: 5px;
        /* position -> relative : Pour le bien de l'animation left */
        position: relative;
        margin-bottom: 1rem;
        transition: 0.3s;
        height: 65vh;
        
        .video {
            display: flex;
            position: relative;
            filter: grayscale(0.4);
        }

        .previewImage {
            display: flex;
            position: relative;
            width: 100%;
            border-radius: 0.3rem 0.3rem 0 0;
        }
        .project-details {
            display: flex;
            background: rgba(0, 0, 0, 0.486);
            font-family: 'Quicksand';    
            color: #fffbf2;
            /* Haut Droite Bas Gauche */
            padding: 2rem;
            margin-top: -7.5rem;
            z-index: 5;
            width: -webkit-fill-available;
            .bloc-detail {
                display: flex;
                margin-right: 2rem;
                font-size: 1.6rem;
                .logo {
                    display: flex;
                    width: 2.5rem;    /* taille uniforme */
                    height: 2.5rem;
                    padding: 0.5rem;
                    margin-right: 0.5rem;
                    img {
                        max-width: 80%;
                        max-height: 80%;
                        object-fit: contain; 
                      }
                }
                .info {
                    display: flex;
                    align-items: center;
                }
            }
        }
    
        .project-description {
            color: #fffbf2;
            display: flex;
            flex-direction: column;
            padding: 2rem;

            .project-title {
                font-weight: 700;
                /* font-size: 4rem; */
                /* font-size: 3.5rem; */
                font-size: clamp(14px, 2cqi, 100cqi);
                white-space: nowrap;

                text-decoration: none;
                color: #6d68ff;

                &:hover {
                    text-decoration: underline;
                    text-decoration-thickness: 2px;
                    color: #9895fb;
                }
            }
            .project-post {
                /* font-weight: 500;
                font-size: 2.5rem; */
                font-weight: 500;
                font-size: 2rem;
                color: #ffca67;
            }
            .project-text {
                font-family: 'Quicksand';
                font-size: 1.6rem;
                color: #fffbf2;
                margin-top: 2.5rem;
                
                /* TODO: Regler margin */
            }       
        }
    }
        
    a {
        text-decoration: none;
    }

    .project-block:hover{
        /* transform: scale(1.1);
        transition: 0.5s; */
        outline-color: #fffbf2 ;
        top: -10px;
    }
    
    .project-block:hover > .video {
        filter: grayscale(0);
    }

    .left {
        animation: slideInFromLeft .8s;
    }
    
    .right {
        animation: slideInFromRight .8s;
    }
   
}


/* 
.centralBlock {
    background-color: #101214;
    border-radius: 25px;
    margin-top: 10%;
    margin-left: 17%;
    margin-right: 17%;
    padding-top: 7%;
    box-shadow: 0 50px 40px -20px black;

    outline: solid;
    outline-color: #fffbf2 ;
    outline-width: 3.5px;
    outline-offset: 5px;

    position: relative;

    animation: slideInFromTop .8s;
} */

@media (max-width: 1000px) {
    #project-grid {
      grid-template-columns: repeat(2, 2fr); /* une seule colonne */
      grid-template-rows: auto;   /* laisse les lignes se créer naturellement */
    }
}

@media (max-width: 700px) {
    #project-grid {
      grid-template-columns: 1fr; /* une seule colonne */
      grid-template-rows: auto;   /* laisse les lignes se créer naturellement */
    }
}


.bodyAnimateOut {
    transition: opacity .8s;
    opacity: 0;
}


.contentBlockAnimateOut {
    transition: right .8s;
    right: 200%;
}



@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* #region Animations*/

@keyframes slideInFromTop {
    0% { 
        bottom : 50%;
        opacity: 0%;
    }
    
    100% {
        bottom: 0%;
        opacity: 100%;
    }
}

@keyframes slideInFromLeft {
    0% { 
        right : 100%;
        opacity: 0%;
    }
    
    100% {
        right: 0%;
        opacity: 100%;
    }
}

@keyframes slideInFromRight {
    0% {
        left: 100%;
        opacity: 0%;
    }

    100% {
        left: 0%;
        opacity: 100%;
    }
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide {
    0% {
      transform:translateX(-25%);
    }
    100% {
      transform:translateX(25%);
    }
}

  @keyframes rotate {
    to {
      --angle: 360deg;
    }
}
/* #endregion */