@import "dope_menu_bar.css";

:root {
    --text-primary  : rgb(26, 26, 26);
    --text-secondary: rgb(75, 75, 75);
    --bg-primary    : rgb(255, 255, 255);
    --bg-secondary  : whitesmoke;
    --bg-third      : #4691f6;
    font-size       : 12px;
    font-family     : Arial, Helvetica, sans-serif;
}

body {
    display       : flex;
    flex-direction: column;
    margin        : 0;
}


.container {
    position        : relative;
    overflow        : auto;
    width           : 100vw;
    height          : 95vh;
    scroll-snap-type: y mandatory;
}

.container .section {
    position             : relative;
    width                : 100%;
    height               : 100%;
    background-blend-mode: multiply;
    scroll-snap-align    : start;
    display              : grid;
    grid-template        : 50px 1fr 80px / 150px 1fr 150px;


}

.container .section:nth-child(1) {
    background           : var(--bg-secondary);
    /*ACCUEIL*/
    background-size      : cover;
    background-attachment: fixed;
}

.container .section:nth-child(2) {
    background           : var(--bg-secondary);
    /*CV*/
    background-size      : cover;
    background-attachment: fixed;
}

.container .section:nth-child(3) {
    background           : var(--bg-secondary);
    /*IA*/
    background-size      : cover;
    background-attachment: fixed;
}

.container .section:nth-child(4) {
    /*DATA*/
    background           : var(--bg-secondary);
    background-size      : cover;
    background-attachment: fixed;
}

.container .section:nth-child(5) {
    /*JV*/
    background           : var(--bg-secondary);
    background-size      : cover;
    background-attachment: fixed;
}

.container .section:nth-child(6) {
    /*CONTACT*/
    background           : var(--bg-secondary);
    background-size      : cover;
    background-attachment: fixed;
}

.contenu {
    grid-row     : 2/3;
    grid-column  : 2/3;
    display      : grid;
    grid-template: 1fr 1fr 1fr / 1fr 1fr;
}

.container .section .contenu h2 {
    background : var(--bg-primary);
    color      : var(--text-primary);
    font-weight: bold;
    display    : inline-block;
    padding    : 10px 5px;
    font-size  : 2rem;
}


/*-------------- ACCUEIL ----------*/
.container .section :nth-child(2) h2 {
    background : none;
    color      : var(--text-primary);
    font-weight: normal;
    display    : inline-block;
    margin-top : 10px;
}

.sub_slide1 {
    grid-row   : 1/2;
    grid-column: 1/3;
    text-align : center;

    animation      : apparition_left 0.6s ease-out forwards;
    animation-delay: 0.2s;
    opacity        : 0;
}

.sub_slide2 {
    grid-row   : 2/3;
    grid-column: 1/3;
    text-align : center;

    animation      : apparition_right 0.7s ease-out forwards;
    animation-delay: 0.5s;
    opacity        : 0;
}

.sub_slide3 {
    grid-row       : 3/4;
    grid-column    : 1/3;
    text-align     : center;
    display        : flex;
    justify-content: space-around;

    animation      : apparition_left 0.7s ease-out forwards;
    animation-delay: 1s;
    opacity        : 0;
}


.sub_slide1 h2 {
    position: relative;
}


.sub_slide2 h2 {
    position: relative;

}

.sub_slide3 h2 {
    position: relative;

}

/*-------------- IA --------------*/

.IA_Slide1 {
    /* Tensorflow JS */
    grid-row      : 2/3;
    grid-column   : 2/3;
    box-sizing    : content-box;
    background    : none;
    display       : flex;
    flex-direction: row;
    align-content : space-between;
}

.IA_Slide1 button {
    border-color : var(--bg-third);
    color        : var(--bg-third);
    background   : none;
    box-shadow   : 0px 0px 20px 1px rgba(0, 0, 0, 0.405);
    border-radius: 50px;
    width        : 120px;
    height       : 50px;
    font         : 20px bold;
    margin       : 50px;
}

#webcam-container {
    width      : 250px;
    height     : 300px;
    margin-left: 50px;
}

#label-container {
    font  : 20px var(--bg-third);
    margin: 50px;
}

.IA_Slide2 {
    /*Text explicatif*/
    grid-row   : 2/3;
    grid-column: 1/2;
    box-sizing : border-box;
    text-align : right;
}


/*
.IA_Slide2 a {
    box-sizing     : border-box;
    text-decoration: none;
}

.IA_Slide3 {
    /*DataViz*
    grid-row   : 3/4;
    grid-column: 1/2;
    box-sizing : border-box;
    background : rgb(255, 255, 255);
}

.IA_Slide3 a {
    box-sizing     : content-box;
    text-decoration: none;
}

.IA_Slide3 img {
    width : 20%;
    height: 50%;
}

.IA_Slide4 {
    /* hashtag *
    grid-row   : 3/4;
    grid-column: 2/3;
}

.IA_Slide4 h2 {
    position: relative;
}

.IA_Slide3 h2 {
    position  : relative;
    text-align: center;
}

.wip {
    position : relative;
    font-size: 100px;
    color    : white;
}

.boxIA {
    position: relative;
    bottom : 195px;
    box-sizing      : border-box;
    height          : 100%;
    background-color: pink;
    opacity: 0;
    display: grid;
    align-content: center;
    font-size: 30px;
    text-align: left 100px;
}



.IA_Slide1:hover .boxIA{
    animation      : apparition_left_alpha 0.6s ease-out forwards;
    animation-delay: 0.2s;
    opacity        : 0;
}

.IA_Slide2:hover .boxIA{
    animation      : apparition_left_alpha 0.6s ease-out forwards;
    animation-delay: 0.2s;
    opacity        : 0;
}

.IA_Slide3:hover .boxIA{
    animation      : apparition_left_alpha 0.6s ease-out forwards;
    animation-delay: 0.2s;
    opacity        : 0;
}

*/
/*-------------- DATA ----------*/
.tableauPlaceholder {
    /* TABLEAU */
    grid-row   : 1/4;
    grid-column: 1/3;
    box-sizing : border-box;

}


/*-------------- CV ----------*/
.CV_Slide1 {
    /* Autres compétences */
    grid-row   : 3/4;
    grid-column: 1/2;
    box-sizing : border-box;
    display    : flex;
    flex-wrap  : wrap;
}

.CV_Slide1 h2 {
    margin-left: 25px;
}

.CV_Slide2 {
    /* Compétence code */
    grid-row   : 2/3;
    grid-column: 1/2;
    box-sizing : border-box;
    display    : flex;
    flex-wrap  : wrap;
}

.CV_Slide2 h2 {
    margin-left: 25px;
}

.CV_Slide3 {
    /* Bandeau Photo */
    grid-row       : 1/2;
    grid-column    : 1/2;
    box-sizing     : border-box;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-around;
    padding-top    : 20px;
}

.CV_slide3 p {
    position : relative;
    left     : -100px;
    top      : 50px;
    font-size: 20px;
    color    : var(--text-secondary);
}

.photo {
    width        : 250px;
    height       : 250px;
    border-radius: 200px;
    margin-left  : -50px;
    margin-top   : -20px;

}

.CV_Slide4 {
    /* hashtag */
    grid-row       : 1/2;
    grid-column    : 2/3;
    box-sizing     : border-box;
    display        : flex;
    justify-content: space-around;
}

.CV_Slide4 .Htag {
    position: relative;
    top     : 100px;
    width   : 200px;
    height  : 200px;

}

.CV_Slide4 .Htag h2 {
    position : relative;
    top      : -30px;
    left     : -50px;
    font-size: 150px;
    margin   : 5px;
}

.CV_Slide4 .lienCV {
    position  : relative;
    top       : 50px;
    width     : 150px;
    height    : 150px;
    background: var(--bg-third);
    margin    : 5px;
}

.CV_Slide4 .lienCV span {
    position: relative;
    top     : 65px;
}

.CV_slide5 {
    grid-row   : 2/4;
    grid-column: 2/3;
    box-sizing : border-box;
    display    : flex;
    flex-wrap  : wrap;
}

.progress {
    display       : flex;
    height        : 20px;
    width         : 600px;
    flex-direction: column;
    background    : var(--bg-primary);
    margin-bottom : 5px;
}

.progress-bar {
    height    : 20px;
    background: var(--bg-third);
}

.skill {
    position: relative;
    top     : -40px;
    left    : 10px;
    padding : 20px;
}

.badges img {
    width       : 180px;
    height      : 180px;
    padding-left: 50px;
}

.skill span {
    color         : var(--bg-primary);
    font-size     : 20px;
    padding-bottom: 20px;
    z-index       : 1;
    position      : relative;
    top           : 21px;
}

.lienCV {
    text-align     : center;
    text-decoration: none;
    color          : var(--bg-primary);
}

/*-------------- JV ----------*/
.JV_Slide1 {
    /* Description */
    grid-row   : 2/3;
    grid-column: 1/3;
    box-sizing : border-box;
    margin     : 5px;
    display    : flex;
}

.JV_Slide1 p {
    flex-direction: row;
    color         : var(--text-secondary);
    font-size     : 20px;
    text-align    : left;
    padding       : 20px;
}

.JV_Slide2 {
    /* Gallery */
    grid-row   : 3/4;
    grid-column: 1/3;
    box-sizing : border-box;
    background : var(--bg-third);
    position   : relative;
    bottom     : 50px;
}

.JV_Slide3 {
    /* #JV */
    grid-row   : 1/2;
    grid-column: 2/3;
    box-sizing : border-box;
    color      : var(--text-primary);
    text-align : right;
    top        : 200px;
}

/* GALLERY */

.gallery {
    box-sizing     : border-box;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    margin         : 0 auto;
    padding        : 10px;
    box-shadow     : 0 1px 1px rgba(0, 0, 0, .1);
}

.gallery>div {
    position: relative;
    float   : left;
    padding : 5px;
}

.gallery>div>img {
    width     : 350px;
    transition: transform 0.1s ease-in-out;
    transform : scale(1, 1);
    /* hack */
}

.gallery>div:hover {
    z-index: 1;
}

.gallery>div:hover>img {
    transform : scale(1.8, 1.8);
    transition: transform 0.3s ease-in-out;
}

h1 {
    margin    : 40px 0;
    font-size : 24px;
    text-align: center;
}

/*-------------- CONTACT ----------*/
.contact_Slide1 {
    grid-row   : 1/3;
    grid-column: 1/3;
    box-sizing : border-box;
    text-align : center;
    position   : relative;
    top        : 100px;
    font-size  : 50px;
}

.contact_Slide2 {
    grid-row     : 3/4;
    grid-column  : 1/3;
    box-sizing   : border-box;
    background   : var(--bg-third);
    align-content: center;
}

/*------------- PAGE UNITY/FLASK ---------*/
.container .section_unity {
    background           : #3ba4b9;
    /*CV*/
    background-size      : cover;
    background-attachment: fixed;
    position             : relative;
    display              : grid;
    grid-template        : 50px 1fr 50px / 150px 1fr 150px;
}

.slide1 {
    grid-row   : 1/4;
    grid-column: 1/3;
    box-sizing : border-box;
    background : rgba(0, 0, 139, 0.219);
}

.tableauPlaceholder {
    max-width : 1800px;
    max-height: fit-content;
}

/*
.slide2 {
    grid-row     : 1/4;
    grid-column  : 1/2;
    box-sizing   : border-box;
    background   : rgb(5, 5, 220);
    align-content: center;
} */


/* ---------------------------- ANIMATION ------------------------- */

@keyframes apparition_top {
    from {
        opacity  : 0.5;
        transform: translateY(-10px);
    }

    to {
        opacity  : 1;
        transform: translateY(0px);
    }
}

@keyframes apparition_down {
    from {
        opacity  : 0.5;
        transform: translateY(10px);
    }

    to {
        opacity  : 1;
        transform: translateY(0px);
    }
}

@keyframes apparition_right {
    from {
        opacity  : 0.5;
        transform: translateX(20px);
    }

    to {
        opacity  : 1;
        transform: translateX(0px);
    }
}

@keyframes apparition_left {
    from {
        opacity  : 0.5;
        transform: translateX(-20px);
    }

    to {
        opacity  : 1;
        transform: translateX(0px);
    }
}

@keyframes apparition_left_alpha {
    from {
        opacity  : 0;
        transform: translateX(-20px);
    }

    to {
        opacity  : 1;
        transform: translateX(0px);
    }
}