@font-face {
    font-family: titleFont;
    src: url(./assets/SmoochSans-VariableFont_wght.ttf);
}

:root{
    --textColor: rgb(237, 237, 237);
    --textColorPlaceHolder: rgb(237, 237, 237, 0.4);
    --bgColor: rgba(23, 23, 23, 0.96);
    --textColorNav: rgb(237, 237, 237);
    --bgColorNav: rgb(23, 23, 23);
    --strongColor: rgb(0, 95, 159);
    --bgImg: url(./assets/portfolio-bg.jpg);
    --darkLightMode: url(./assets/light_mode_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg);
    --arrowDown: url(./assets/keyboard_arrow_down_24dp_EDEDED_FILL0_wght400_GRAD0_opsz24.svg);
    --arrowUp: url(./assets/keyboard_arrow_up_24dp_EDEDED_FILL0_wght400_GRAD0_opsz24.svg);
    --menu: url(./assets/menu_24dp_EDEDED_FILL0_wght400_GRAD0_opsz24.svg);
    --externalLinkImg: url(./assets/ungroup_24dp_EDEDED_FILL0_wght400_GRAD0_opsz24.svg);
}

.lightMode {
    --textColor: rgb(23, 23, 23);
    --textColorPlaceHolder: rgba(23, 23, 23, 0.2);
    --bgColor: rgba(172, 175, 199, 0.797);
    --textColorNav: rgb(23, 23, 23);
    --bgColorNav: rgb(172, 175, 199);
    --strongColor: rgb(0, 39, 65);
    --bgImg: url(./assets/portfolio-bg-lightmode.webp);
    --darkLightMode: url(./assets/dark_mode_24dp_171717_FILL0_wght400_GRAD0_opsz24.svg);
    --arrowDown: url(./assets/keyboard_arrow_down_24dp_171717_FILL0_wght400_GRAD0_opsz24.svg);
    --arrowUp: url(./assets/keyboard_arrow_up_24dp_171717_FILL0_wght400_GRAD0_opsz24.svg);
    --menu: url(./assets/menu_24dp_171717_FILL0_wght400_GRAD0_opsz24.svg);
    --externalLinkImg: url(./assets/ungroup_24dp_171717_FILL0_wght400_GRAD0_opsz24.svg);
}

#background-video {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    }

#switchMode {
    background-image: var(--darkLightMode);
    height: 24px;
    width: 24px;
}

strong {
    font-weight: bold;
    color: var(--strongColor);
}

body {
    margin: 0;
    padding: 0;
    padding-top: 5vh;
    font-family: titleFont;
    display: flex;
    flex-direction: column;
}


header {
    height: 5vh;
    background-color: var(--bgColorNav);
    color: var(--textColorNav);
    position: fixed;
    top: 0px;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1vw;
    font-size: 2rem;
    font-family: titleFont;
    min-height: 30px;
}

nav {
    padding-right: 2vw;
    display: flex;
    gap: 3vw;
    justify-content: space-around;
    align-items: center;
}

nav div:nth-child(1) {
    display: flex;
    gap: 3vw;
}

#switchMode:hover {
    cursor: pointer;
    animation: horizontalTilt 0.1s 0.1s;
}

header a {
    color: var(--textColorNav);
    text-decoration: none;
}

header a:hover {
    animation: horizontalTilt 0.1s 0.1s;
}

header a:visited {
    color: var(--textColorNav);
    text-decoration: none;
}


#offTitleAnim::after {
    content: "Développeur WEB";
    animation: change-text 3s infinite;
    margin-left: 0.2vw;
    font-size: 2rem;

}

.arrowDown {
    background-image: var(--arrowDown);
    width: 24px;
    height: 24px;
    scale: 3;
    opacity: 0.33;
    margin-bottom: 1vh;
    animation: arrowTilt 5s infinite;
}

.arrowUp {
    background-image: var(--arrowUp);
    width: 24px;
    height: 24px;
    scale: 3;
    opacity: 0.33;
    margin-top: 1vh;
    animation: arrowTilt 5s infinite;
}

h2 {
    text-align: center;
    margin: 0;
    margin-bottom: 1vh;
}



/* --------------------------------------------------------------------- */
/* FIN du CSS HEADER + BACKGROUND */
/* --------------------------------------------------------------------- */

#profil {
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2vh;
}

 #profil > div {
    
    background-color: var(--bgColor);
    padding-bottom: 1vh;
    padding-top: 2vh;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    
}

#description {
    animation: popSecondElem 1s;
    display: flex;
    align-items: center;
}

#description > div:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
}


#profilPicture {
    border-radius: 200px;
}

#socialMedia {
    display: flex;
    align-items: center;
    width: 40%;
    animation: popFirstElem 1s;
}

#socialMedia img{
    height: 48px;
    width: 48px;
    
}

#langage {
    width: 30%;
    display: flex;
    animation: popThirdElem 1s;
}

#langage div img{
    height: 60px;
    width: 60px;
}

/* --------------------------------------------------------------------- */
/* FIN de la page profil */
/* --------------------------------------------------------------------- */

#cv {
    font-size: 1.6rem;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#formationBlock {
    width: 32%;
    height: 95%;
    border-radius: 20px;
    background-color: var(--bgColor);
    display: flex;
    flex-direction: column;
    align-items: center;
}



#formation {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    
}

#formation > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 33%;
    width: 95%;
}

#formation > div > div {
    padding-left: 1vh;
}

#formation > div:nth-child(1), 
#formation > div:nth-child(2) {
    border-bottom: 1px solid lightgrey;
}

#experiencesBlock {
    border-radius: 20px;
    width: 58%;
    height: 95%;
    background-color: var(--bgColor);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#experiences{
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    
}

#experiences > div{
    width: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-bottom: 1px solid lightgrey;
    padding-left: 1vh;
}

#experiences ul {
    display: none;
    list-style-type: "↳ ";
    margin-left: 1vh;
}

.expend {
    background-image: var(--arrowDown);
    width: 24px;
    height: 24px;
    scale: 2;
    opacity: 0.33;
    align-self: center;
}

.expend:hover {
    cursor: pointer;
    animation: arrowTilt 1s;
}

/* --------------------------------------------------------------------- */
/* FIN de la page cv */
/* --------------------------------------------------------------------- */

#projects {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#projects > div {
    width: 95%;
    height: 85%;
    border-radius: 20px;
    background-color: var(--bgColor);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#projects h2 {
    font-size: 3rem;
    margin-bottom: 2Vh;
}

.caroussel {
    position: relative;
    width: 90%;
    height: 80%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 20px;
}

.slide {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s;
}

.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.controls {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}

#toLeft, #toRight {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    font-weight: bold;
    padding: 10px;
    color: var(--textColor);
    opacity: 0.5;
}

#toLeft {
    left: 10px;
}

#toRight {
    right: 10px;
}

.slideSelector {
    display: flex;
    justify-content: center;
    gap: 10px;

    position: absolute;
    bottom: 10px;
    width: 100%;
    opacity: 0.5;
}

.slideSelector:hover, #toLeft:hover, #toRight:hover {
    opacity: 1;
}

#toLeft:hover, #toRight:hover {
    background-color: #d3d3d340;
}

.slideSelector .bubble {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--textColor);
    cursor: pointer;
    outline: 1px solid var(--bgColor);
}

.slideSelector .bubble:hover{
    transform: scale(1.2);
}

.slideSelector .bubble.active {
    background-color: var(--strongColor);
}

.externalLinkImg {
    background-image: var(--externalLinkImg);
    width: 24px;
    height: 24px;
}

.externalLinkImg:hover {
    animation: horizontalTilt 0.1s 0.1s;
    scale: 1.2;
}

.projectsDescription > div{
    display: none;
    width: 100%;
    gap: 1vw;
}

.projectsDescription {
    min-width: 50%;
    font-size: 2rem;
}


.slideDesc.active {
    display: flex;
    justify-content: center;
    align-items: center;
}




/* --------------------------------------------------------------------- */
/* FIN de la page projet */
/* --------------------------------------------------------------------- */

#contact {
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#contact > div {
    width: 95%;
    background-color: var(--bgColor);
    border-radius: 20px;
}

form {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    padding: 3vh;
}

form label {
    margin-left: 1vh;
}

form input {
    border-radius: 10px;
    height: 30px;
    margin-bottom: 2vh;
    background-color: var(--bgColor);
    border: 1px solid var(--textColor);
    color: var(--textColor);
    padding-left: 1vh;
}

#submitForm {
    height: 5vh;
}

form input::placeholder, form textarea::placeholder {
    color: var(--textColorPlaceHolder);
} 

form textarea {
    font-family: roboto;
    height: 10vh;
    margin-bottom: 2vh;
    background-color: var(--bgColor);
    border: 1px solid var(--textColor);
    border-radius: 10px;
    padding: 1vh;
    color: var(--textColor);
}

.submitFormMsg {
    visibility: hidden;
}

.submitFormMsg p {
    margin-top: 0;
    
}

.submitFormMsg.active {
    visibility: visible;
    text-align: center;
    color: var(--strongColor);
    font-weight: bold;
}

.submitFormMsg.active p {
    animation: cameFromBot 2s;
}

/* --------------------------------------------------------------------- */
/* FIN de la page contact */
/* --------------------------------------------------------------------- */

@keyframes cameFromBot {
    0% {transform: translateY(+1000px);}
    33% { transform: translateY(0px);}
    43% { transform: translateY(-10px);}
    53% { transform: translateY(0px);}
    100% { transform: translateY(0px);}
}

@keyframes popFirstElem {
    0% {transform: translateX(-1000px);}
    33% { transform: translateX(0px);}
    43% { transform: translateX(10px);}
    53% { transform: translateX(0px);}
    100% { transform: translateX(0px);}
}

@keyframes popSecondElem {
    0% {transform: translateX(2000px);}
    33% {transform: translateX(2000px);}
    66% { transform: translateX(0px);}
    76% { transform: translateX(-10px);}
    86% { transform: translateX(0px);}
    100% { transform: translateX(0px);}
}

@keyframes popThirdElem {
    0% {transform: translateX(-1000px);}
    66% {transform: translateX(-1000px);}
    90% { transform: translateX(0px);}
    95% { transform: translateX(10px);}
    100% { transform: translateX(0px);}
}

@keyframes arrowTilt {
    0% { transform: translateY(0)}
    25% { transform: translateY(2px) }
    50% { transform: translateY(-2px) }
    75% { transform: translateY(2px) }
    100% { transform: translateY(0) }
  }

@keyframes horizontalTilt {
    0% { transform: translateX(0) }
    6% {transform: translateX(0)}
    25% { transform: translateX(2px) }
    50% { transform: translateX(-2px) }
    75% { transform: translateX(2px) }
    100% { transform: translateX(0) }
  }

@keyframes change-text {
    from   { content: " |"; }
    50% { content: ""}
    to { content: " |"; }
}

@media only screen and (max-width : 768px) {

    nav {
        display: flex;
        flex-direction: column-reverse;
    }

    nav>div:nth-child(1).inactive{
        display: none;
    }

    nav>div:nth-child(1).active {
        position: fixed;
        padding: 1vw;
        top: 5vh;
        right: 0px;
        display: flex;
        flex-direction: column;
        background-color: var(--bgColorNav);
    }

    nav>div:nth-child(2) {
        display: flex;
        flex-direction: row;
        gap: 1vw;
    }

    #menu {
        width: 24px;
        height: 24px;
        background-image: var(--menu);
    }

    #profil > div {
        width: 100%;
    }

    
    main {
        height: 95vh;
        margin-top: 5vh;

    }
    
    main > section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--textColor);
        padding-bottom: 2vh;
    }

        #profil > div:nth-child(2) {
        width: 100%;
        animation: popSecondElem 1s;
    }

    #profil {
        width: 100%;
    }

    #socialMedia {
        width: 100%;
        padding: 0px;
    }

    #langage {
        width: 100%;
        padding: 0px;
    }

    #cv {
        flex-direction: column;
    }

    #formationBlock {
        width: 100%;
        margin-bottom: 2vh;
    }

    #experiencesBlock {
        width: 100%;
    }

    #projects , #projects > div{
        width: 100%;
    }

    .controls > div {
        background-color: var(--bgColor);
    }


    .caroussel {
        width: 95%;
    }

    .arrowDown {
        display: none;
    }
    
    #description {
        flex-direction: column-reverse;
        align-items: center;
        padding-top: 2Vh;
    }

    #contact > div {
        width: 100%;
    }    

    #description p {
        text-align: center;
        margin: 0px 1vh;
    }
}

@media only screen and (min-width : 769px) {
    #menu {
        display: none;
    }

    main {
        height: 95vh;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        
    }
    
    main > section {
        height: 95vh;
        width: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--textColor);
        overflow: hidden;
    }

    #description {
        width: 90%;
    }
    
}

@media only screen and (min-width : 1920px) {
    main > section{
        width: 1900px;
        margin: auto;
    }
}