/* 
FEUILLE DE STYLE 
INDEX.HTML
*/

/*
POUR TOUS LES ELEMENTS
*/
*{
    cursor: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-color: transparent;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
    display: none;
}

html{
    max-width: 100vw;
}

.bg_black{
    background-color: #35355a;
}

.bg_white{
    background-color: #d9ceff;
}

.font_black{
    color: black;
}

.font_white{
    color: white;
}

a {
    text-decoration: none;    
}

a, a:hover, a:visited, a:active {
    color: inherit;
    text-decoration: none;
   }

/*COLORS*/
.cyan{
    color: cyan;
}

.purple{
    color: rgba(142, 73, 229, 1);
    fill: rgba(142, 73, 229, 1);
    stroke: #8E49E5;
}

.purple_svg{
    stroke: #8E49E5;
}

.white_svg{
    stroke: white;
}

.black_svg{
    stroke: black;
}

/* .purple{
    color: rgba(142, 73, 229, 1);
    fill: rgba(142, 73, 229, 1);
    stroke: #8E49E5;
}

.purple_svg{
    stroke: #8E49E5;
} */

.black{
    color: black;
}

/*FONTS*/
@font-face {
    font-family: Azert-Mono;
    src: url('assets/fonts/Azert-Mono.ttf');
}

@font-face {
    font-family: Ginger;
    src: url('assets/fonts/Ginger.ttf');
}

@font-face {
    font-family: JapStyle;
    src: url('assets/fonts/JapaneseStyle.ttf');
}

@font-face {
    font-family: Futura;
    src: url('assets/fonts/futur.ttf');
}

.Azert-Mono{
    font-family: "Azert-Mono";
}

.Futura{
    font-family: "Futura";
}

.Ginger{
    font-family: "Ginger";
}

.sans-serif{
    font-family: sans-serif;
}

body{
    overflow-x: hidden;
}

#root{
    transition: all 1s ease;
}

#home{
    z-index: 2;
    font-size: 14px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    stroke: none;
    background-color: transparent;
    width: 50px;
    height: 50px;
    transition: all 1s ease;
}

#home:hover{
}


.floating {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes floating {
    0% {
        transform: translate(-50%,-50%) scale(1, 1);
    }
    50% {
        transform: translate(-50%,-50%) scale(2, 2);
    }
        100% {
        transform: translate(-50%,-50%) scale(1, 1);
    }
}

/*
    Pointeur
*/

#pointer{
    background-color: rgba(142, 73, 229, 1);;
    padding: 4px;
    position: fixed;
    border-radius: 10px;
    transform: translate(-50%,-50%);
    z-index: 5;
    pointer-events: none;
}

#pointer2{
    border: solid 1px rgba(142, 73, 229, 1);;
    padding: 20px;
    position: fixed;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
    pointer-events: none;
}

/*
HEADER QUI CONTIENT LE MENU A TOGGLE
*/

#header{
    position: fixed;
    top: 60px;
    width: 100vw;
    padding: 0px 5vw;
    z-index: 3;
}

/*
LE MENU A TOGGLE
*/

.menu{
    float: right;
    background: transparent;
    width: 100px;
    height: 100px;
    z-index: 10;
}

#menu_content a:hover{
    color: white;
}

#menu_second{
    position: relative;
    padding-bottom: 5px;
}

.bar_menu{
    transform: rotate(0deg);
    transition-duration: 1000ms;
}

/*ANIMATION -> KANJI*/
.menu_first_toggled{
    transform: rotate(360deg);
}

.menu_second_toggled{
    transform: translate(-15px) rotate(-62deg) ;
}

.menu_third_toggled{
    transform: translate(14px,-17px) rotate(-68deg) ;
}

/*NOUVELLE DIV DU MENU HAMBURGER*/
#menu_content {
    font-size: 40px;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#menu_content a{
    color: rgba(142, 73, 229, 1);
    text-decoration: none;
    padding: 30px;
    font-family: 'Ginger';
    font-size: 70px;
    border-bottom: 2px solid rgba(142, 73, 229, 1);
    width: 300px;
    text-align: center;
}

/*
UNE SECTION = entierté du screen
*/

section{
    height: 100vh;
    width: 100vw;
}

/*
WELCOME PAGE
*/

#section_1{
    height: 100vh;
    width: 100vw;
}

#section_1_content{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding-bottom: 50vh;
}

/*
Title1 : "Welcome to the portfolio Of Robin "
*/

#title1{
    display: flex;
    flex-flow: column wrap;
    font-size: 100px;
}

.title{
    text-transform: uppercase;
    width: auto;
    white-space: nowrap;
    font-family: "Ginger";
    letter-spacing: 0.03em;
}

#first_line{
    display: flex;
    justify-content: center;
}

#second_line{
    display: flex;
    justify-content: center;
}


/*
Ball est au bout de mon dessin et qui sera le commencement du svg
*/


#small_ball{
    position: fixed;
    top: 55%;
    left: 50%;
    padding: 150vw;
    opacity: 1;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    z-index: 4;
    background-color: rgba(142, 73, 229, 1);
    transition: all 1.3s ease;
}

#big_ball{
    position: absolute;
    top: 55%;
    left: 50%;
    border: 1px solid rgba(142, 73, 229, 0.2);
    color: rgba(142, 73, 229, 1);
    background-color: rgba(142, 73, 229, 0.2);
    border-radius: 100px;
    padding: 95px;
    transform: translate(-50%, -50%);
    transition-duration: 1000ms;
}

/* DESSIN qui va peut être chanher au fil du temps mais pr l'instant gojo*/
#img_container{
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    transition: background-image 1s ease;
    top: 36%;
    left: 46%;
    width: 900px;
    height: 900px;
}

.img_white{
    background-image: url("./assets/img/GojoWhite.png");
}

.img_black{
    background-image: url("./assets/img/GojoBlack.png");
}

/*PHRASES DE MON JOB ET DE CE QUE JE VEUX DEVENIR*/
#quick_description{
    position: relative;
    top: -18vh;
    left: 5vw;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    max-width: 44vw;
}

/* LES DIV QUI CONTIENNENT UN SVG (Line qui se draw avec le scroll)*/
.line_container{
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    text-align: center;
    width: 100vw;
}

.line_container svg{
    height: 100vh;
}

#line_container2{
    top: 100vh;
}

#line_container3{
    top: 200vh;
}

#line_container4{
    top: 300vh;
}


/*SECTION 2 - DESCRIPTIF DE MOI ET DES ECOLES QUE J'AI FREQUENTÉ*/

/*TITLE "WHO AM I ?" */

#title_2_middle{
    position: absolute;
    left: 50%;
    top: 138vh;
    font-family:"Azert-Mono";
    transform: translate(-50%, -50%);
    font-size: 40px;
}

/*TITLE "<ROBZ>"  */
#title_2_left {
    margin-left: 50px;
    top: 105vh;
    position: absolute;
    transition: 1s all ease;
}

#title_2_left span{
    font-family:"Azert-Mono";
    text-transform: uppercase;
    font-size: 100px;
}

/* TITLE "MY SCHOLARSIOP" */
#title_2_right {
    position: absolute;
    float: right;
    top: 127vh;
    right: 90px;
}

#title_2_right span{
    font-family:"Azert-Mono";
    text-transform: uppercase;
    font-size: 37px;
}

/*DESCRIPTION DE MA PERSONNE - AGE NOM HOBBIES ...*/
#player_card_container{
    width: 100%;
}

#player_card_left{
    font-family: 'Azert-Mono';
    left: 50px;
    position: absolute;
    width: 41vw;
    top: 148vh;
    /* background-color: rgb(43,44,44); */
    padding: 26px;
    border-radius: 16px;
    box-shadow: 10px 5px 5px grey;
}

/* DESCRIPTION DE MA SCOLARITÉ */
#player_card_right{
    font-family: 'Azert-Mono';
    float: right;
    right: 40px;
    position: absolute;
    width: 35vw;
    top: 135vh;
}

/* LA LISTE (UL LI) DE MES HOBBIES*/
#hobbies_list{
    margin-left: 40px;
}

#player_card_right > div{
    padding: 20px;
    margin: 20px;
    border-radius: 16px;
    box-shadow: 10px 5px 5px grey;
    /* background-color: rgb(43,44,44); */
}

#player_card_left div{ 
    padding-bottom: 20px;
}

.player_black{
    background-color: rgb(189 173 255);
}

.player_white{
    background-color: rgb(211, 152, 152);
}

/* SECTION 3 - MES SKILLS*/

/*TITRE "SKILLS" */
#title_3_middle{
    position: absolute;
    left: 50%;
    top: 231vh;
    font-family:"Azert-Mono";
    transform: translate(-50%, -50%);
    font-size: 40px;
}

/* DIV QUI CONTIENT LES 2 RUBANS DE MES SKILLS*/
#skills_container{
    color: white;
    font-family: "Ginger";
    position: absolute;
    transform: translate(-50%);
    text-align: center;
    font-size: 30px;
    position: absolute;
    top:250vh;
    font-size: 65px;
}

.ruban_skills{
    white-space: nowrap;
}

.ruban_skills span{
    display: inline-block;
    transition: all 0.2s;
    transition-timing-function: linear;
}

#ruban_skills_1{
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    position: absolute;
    top: 5vh;
    width: 120vw;
    transform: rotate(10deg);
    border: 3px solid rgba(142, 73, 229, 1);
    left: -10vw;
}

#ruban_skills_2{
    margin: 0 auto;
    box-sizing: border-box;
    position: absolute;
    top: 19vh;
    width: 120vw;
    transform: rotate(-15deg);
    border: 3px solid rgba(142, 73, 229, 1);
    left: -10vw;
    
}


#ruban_skills_1 span {
    display: inline-block;
    width: max-content;
}

#ruban_skills_2 span {
    display: inline-block;
    width: max-content;
}
  

/*LA OU LE SVG SE FINI */
#final_ball{
    position: relative;
    top: 97%;
    background-color: rgba(142, 73, 229, 1);;
    padding: 15px;
    width: 25px;
    height: 25px;
    left: 50%;
    transform: translate(-50%);
    border-radius: 20px;
}

/* SECTION 4 - PROJECTS */

/* TITLE  "PROJECTS" EN ENORME POUR CHANGER  */
#title_4_middle{
    position: relative;
    text-align: center;
    top: 30px;
    font-size: 220px;
}


/* DIV QUI REPRESENTE UN PROJET ET QUI CONTIENT UN A HREF VERS UNE PAGE POUR DECRIRE LE PROJET*/
.project{
    position: relative;
    top: 20px;
    font-size: 50px;
    font-family:"Ginger";
    margin: 40px;
    padding-bottom: 20px;
    border-bottom: solid 1px rgba(142, 73, 229, 1);
    left: 5vw;
    width: 80vw;
}

.project > span{
    transition: all 0.3s ease;
}

#section_4 a :hover{
    color: rgba(142, 73, 229, 1);
}

.project span{
    padding: 4px;
}

/* SECTION 5  */

#title_5_middle{
    position: relative;
    text-align: center;
    top: 30px;
    font-size: 200px;
}

#content_section_5{
    position: absolute;
    left: 50px;
    top: 433vh;
    height: 40vh;
    width: 100vw;
}

#mail_me{
    font-size: 90px;
}

#txt_links{
    font-size:40px
}

#content_section_5_left{
    position: absolute;
    left: 10vw;
    height: 40vh;
    width: 50vw;
}

#content_section_5_left div:hover{
   color: rgba(142, 73, 229, 1);
}

#content_section_5_left div{
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-family: sans-serif;
}

#content_section_5_right{
    padding-left: 50px;
    justify-content: center;
    height: 100%;
    position: absolute;
    right: 10px;
    width: 40vw;
    /* transition: all 1s ease; */
    transition: border 1s ease;
}

.content_section_5_right_white{
    border-left: white 10px solid;
}

.content_section_5_right_black{
    border-left: black 10px solid;
}

#content_section_5_right ul{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    list-style-type:none;

}

#content_section_5_right ul > li {
    line-height: 2.5em;
}

#content_section_5_right ul li :hover {
    color: rgba(142, 73, 229, 1);
}

#divider{
    position: relative;
    top: 30vh;
}

/* #divider svg{
   
} */

#resume{
    text-align: center;
    display: block;
    position: relative;
    top: 163px;
    left: -50px;
    transition: background-color 1s ease;
}

#resume > span{
    border-radius: 23px;
    font-size: 25px;

    color: black;
    background-color: whitesmoke;
    padding: 15px;
    transition: all 1s ease;
}

#resume > span:hover{

    color: white;
    background-color: black;
    padding: 15px;
}

/* SUPPERFLUE */

#supperflue{
    height: 50vh;
    overflow: hidden;
}

/*
RESPONSIVE 5 PALIERS 
1200px
950px
769px
500px
350px
*/
@media (max-width: 1200px){
    /*SECTION 1*/
    #img_container{
        width: 600px;
        top: 40%;
        left: 43%;
    }
    #title1{
        font-size: 85px;
    }
    #header {
        top: 50px;
        padding: 0px 3vw;
    }

    /*SECTION 2*/

    #player_card_left {
       
    }

    #player_card_right {
        right: 10px;
    }

    #title_2_right {
        right: 25px;
    }

    #title_2_right span{
        font-size: 30px;
    }

    /*SECTION 4*/
    #title_4_middle{
        font-size: 200px;
    }

    /*SECTION 5*/
    #title_5_middle{
        font-size: 170px;
    }


    /* ART PORTFOLIO  */
    #flex_art{
        flex-direction: column;
    }
}

@media (max-width: 950px){
    /*SECTION 1*/
    #img_container{
        width: 510px;
        top: 42%;
        left: 42%;
    }
    #title1{
        font-size: 65px;
    }
    #section_1_content {
        padding-bottom: 45vh;
    }

    /*SECTION 2*/
    #player_card_right {
        top: 145vh;
        width: 45vw;
    }   
    #title_2_left{
        font-size: 40px;
        margin-left: 0;
        margin-bottom: 50px;
        z-index: 3;
        transition: all 1s ease;
    }


    #title_2_right {
        right: 10px;
        top: 142vh;
    }

    #title_2_right span{
        font-size: 24px;
    }

    /*SECTION 4*/
    #title_4_middle{
        font-size: 150px;
    }

    /*SECTION 5*/
    #title_5_middle{
        font-size: 100px;
    }

    #content_section_5_left div{
        font-size: 50px;
    }

    #content_section_5_left{
        left: 5vw;
        height: 23vh;
    }

    #content_section_5_right{
        right: 70px;
        width: 40vw;
    }

    #content_section_5_right{
        height: 50%;
    }

    #divider svg{
        top : -123px;
    }

    #resume{
        top: 0px;
    }
}

@media (max-width: 769px){
    /*SECTION 1*/
    #img_container{
        top: 46%;
        left: 42%;
        width: 373px;
    }
    #title1{
        font-size: 55px;
    }
    #quick_description{
        font-size: 20px;
        top: -25vh;;
    }

    /*SECTION 2*/
    #player_card_right {

    }

    #title_2_left{
        font-size: 40px;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        z-index: 3;
    }

    #title_2_left span {
        font-size: 50px;
        padding: 5px;
        z-index: 2;
    }

    #title_2_middle{
        font-size: 30px;
    }

    #line_container2{
        z-index: 1;
    }

    #title_2_right span{
        font-size: 20px;
    }
    /*SECTION 3*/
    #skills_container{
        font-size: 35px;
    }


    #content_section_5_left div{
        font-size: 40px;
    }

    #content_section_5_left{
        left: -8vw;
    }

    #content_section_5_right{
        right: 70px;
        width: 40vw;
    }

    #content_section_5_right > ul{
        font-size: 30px;
    }

    #content_section_5_right{
        border-left: 3px solid;
    }
}

@media (max-width: 650px){
    /*SECTION 1*/
    #img_container{
        top: 48%;
        left: 42%;
        width: 306px;
    }
    #title1{
        font-size: 42px;
    }

    #menu_first svg{
        height: 10px;
        width: 40px;
    }
    #menu_second svg{
        height: 10px;
        width: 50px;
    }
    #menu_third svg{
        height: 10px;
        width: 40px;
    }
    #menu_second{
        padding-bottom: 0px;
    }

    /*SECTION 2*/
    #player_card_left {
        left: 35px;
    }

    #player_card_right {
        width: 55vw;
        right: -15px;
    }

    #player_card_right div{
        font-size: 14px;
    }

    #player_card_left div{
        font-size: 14px;
    }

    #title_2_right span{
        font-size: 15px;
    }

    #hobbies_list{
        margin-left: 10px;
    }

    /*SECTION 3*/
    #title_4_middle{
       font-size: 100px;
    }

    .project{
        font-size: 35px;
    }

    /*SECTION 5*/
    #title_5_middle{
        font-size: 80px;
    }

    #content_section_5_right > ul{
        font-size: 20px;
    }

    #mail_me{
        font-size: 30px;
    }
}


@media (max-width: 500px){
    /*SECTION 1*/
    #img_container{
        top: 48%;
        left: 42%;
        width: 306px;
    }
    #title1{
        font-size: 40px;
    }

    /*SECTION 2*/
    #player_card_left {
        left: 25px;
    }


    #title_2_middle{
        font-size: 25px;
    }

    /*SECTION 3*/
    #title_4_middle{
        font-size: 75px;
    }
     
    .project{
        font-size: 25px;
        left: 0px;
    }

    #content_section_5_left div{
        font-size: 30px;
    }
    #content_section_5_left{
        left: -15vw;
    }

    #content_section_5_right{
        right: 75px;
    }

    #content_section_5_right > ul{
        font-size: 15px;
    }
}

@media (max-width: 480px){
    /*SECTION 1*/
    #img_container{
        top: 49%;
        left: 40%;
        width: 230px;
    }
    #title1{
        font-size: 35px;
    }
    #quick_description{
        font-size: 14px;
        top: -29vh;
    }
}


/* 
FEUILLE DE STYLE 
project_name_project.html
*/


/* SECTION 1 DES PROJETS AVEC UNE IMAGE PLUS LE TITRE EN GROS DEVANT*/
.bochutp_site_img{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-image: url(./assets/img/test.png);
    opacity: 0.25;
}


.project_title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size:170px;
}

/* DEBUT DES INFORMATIONS AVEC LE TITRE DE LA SECTION 2 AINSI QUE LES TECHNOS SUR LA GAUCHE*/
.header_explaination_project{
    display: flex;
    flex-direction: row;
    margin-left: 50px;
}

#title_2_projects{
    position: relative;
    margin-left: 70px;
    margin-top: 30px;
    font-family: "Ginger";
    font-size: 45px;
    width: 60vw;
}


.techno_title{
    font-size: 50px;
    width: 30vw;
}

.techno_section{
    display: flex;
    flex-direction: column;
    margin-right: 100px;
}

.ul_span_techno{
    font-size: 20px; 
    position: relative;
    left: -40px;
}

.list_techno{
    position: relative;
    font-size: 15px;
    display: flex;
    flex-direction: row;
    justify-content : space-evenly;
}


/* N'IMPORTE QUEL DIV QUI PARLE DU PROJET POUR EXPLIQUER UN POINT*/
#content_project{
    position: relative;
    margin-left: 70px;
    margin-top: 20px;
    width: 65vw;
    margin-bottom: 30px;
}

#content_project ul{
    margin: 20px;
}

/* DES TITRE 2 DANS LA SECTION 2 DES PAGES DE PROJETS*/
#subtitle_project{
    position: relative;
    font-family:'Ginger';
    margin-left: 70px;
    margin-top: 20px;
    font-size: 40px;
}

/* DIV POUR AFFICHER LES DIFFÉRENTES COULEUR UTILISÉS */
.rect_color{
    height: 70px;
    width: 70px;
    margin: 30px;
}

.black_rect{
    background-color:  black;
}

.white_rect{
    background-color:  white;
}

.flex_colors{
    width: 90vw;
    display: flex;
    justify-content: center;
}

.colors_container{
    padding: 20px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    background-color: darkslateblue;
    position: relative;
    color: white;
    margin-top: 20px;
}

.colors{
    margin-right: 20px;
    margin-left: 20px;
}

/* VISUALS */

.vis_1{
    background-size: contain;
    background-repeat: no-repeat;
    height: 44vw;
    margin-top: 20px;
}

#vis_welcome_page{
    background-image: url(./assets/img/maq1.png);
}

#vis_copter{
    background-image: url(./assets/img/maq2.png);
}

#vis_admin_page{
    background-image: url(./assets/img/maq3.JPG);
}