@charset "UTF-8";
html, body {
    margin:0; 
    padding:0;
}
html { scroll-behavior: smooth; }
*{
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body{
    background: rgb(64,61,83);
    background: -moz-linear-gradient(0deg, rgba(64,61,83,1) 0%, rgba(64,95,111,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(64,61,83,1) 0%, rgba(64,95,111,1) 100%);
    background: linear-gradient(0deg, rgba(64,61,83,1) 0%, rgba(64,95,111,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#403d53",endColorstr="#405f6f",GradientType=1); 
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
}

a:link, a:active{
    text-decoration: none;
    color: ivory;
}
a:hover, a:visited {
    text-decoration: none;
    color: #CFA7EE;
}

main{
    display:flex;
    width: 100%;
}

article{
    position: relative;
    width: 50vw;
    padding: 80px;
    overflow-y:scroll;
    max-height:100vh;
    scrollbar-color: #5FE3C4 #6B6868;
    scrollbar-width: thin;
}
article::-webkit-scrollbar {
    width: 5px;
}
  
/* Track */
article::-webkit-scrollbar-track {
    background: #6B6868;
}
  
/* Handle */
article::-webkit-scrollbar-thumb {
    background: #5FE3C4;
}
.unactive{
    opacity: 0.1 !important;
    transition: 1.2s;
}
.active{
    opacity: 1 !important;
    transition: 0.3s;
}

h1, h2, h3, h4, h5 {
    font-weight: normal;
    margin:0;
    padding: 0;
    line-height: 100%;
}

h1{
    font-family: 'Roboto-Thin', sans-serif;
    font-size: 4vw;
}

h2{
    font-family: 'Roboto-Light', sans-serif;
    font-size: 4vw;
    color: #6B6868;
}
h3{
    font-family: 'Roboto-Black', sans-serif;
    color: #6B6868;
}

.lightTxt{
    font-family: 'Roboto-Thin', sans-serif;
    letter-spacing: 0.2em
}
.blackTxt{
    font-family: 'Roboto-Black', sans-serif;
    letter-spacing: 3px;
}
.lightItalicTxt{
    font-family: 'Roboto-LightItalic', sans-serif;
    letter-spacing: 3px;
}

hr{ 
    border: 0; 
    height: 1px; 
    margin: 35px 0px;
}
hr.barMauve { background-image: linear-gradient(to right, #CFA7EE, #CFA7EE00, #CFA7EE00 ) }
hr.barGreen { background-image: linear-gradient(to right, #5FE3C4, #5FE3C400, #5FE3C400 ) }
hr.barPink { background-image: linear-gradient(to right, #EB6DA9, #EB6DA900, #EB6DA900 ) }
hr.barBlue { background-image: linear-gradient(to right, #0046CD, #0046CD00, #0046CD00 ) }

/* A */
#A{ 
    color:white;
    display: flex;
}
#Aplus{
    display:none;
    width: 100%;
    
    background: rgb(48,48,48);
    background: -moz-linear-gradient(0deg, rgba(48,48,48,1) 9%, rgba(51,51,51,0.7959384437368697) 62%, rgba(136,134,134,0) 100%);
    background: -webkit-linear-gradient(0deg, rgba(48,48,48,1) 9%, rgba(51,51,51,0.7959384437368697) 62%, rgba(136,134,134,0) 100%);
    background: linear-gradient(0deg, rgba(48,48,48,1) 9%, rgba(51,51,51,0.7959384437368697) 62%, rgba(136,134,134,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#303030",endColorstr="#888686",GradientType=1); 

    color: white;
    cursor: row-resize;
    z-index:100;
    text-align: right;
    padding:40px;
    margin-top:-50px;
}

#wrap { padding-bottom: 30px; }

#cv{
    width: 100%;
    height: 135%;
}
#skills{
    padding: 25px 0px;
}

#skills img {
    min-width: 7vmin;
    max-width: 15vmin;
    max-height: 7vmin;
    padding: 3px;
    vertical-align: middle;
    border-radius: 4px;
    background-color: rgba(125, 134, 134, 0.3);
    margin:0px 15px 25px 0px;
    cursor: help;
    transition: 0.3s;  
}

#skills img:hover { 
    background-color: rgb(204, 204, 204);
}

/* B */
#B{
    background: rgb(201,201,201);
    background: -moz-linear-gradient(0deg, rgba(201,201,201,1) 0%, rgba(255,255,255,1) 50%);
    background: -webkit-linear-gradient(0deg, rgba(201,201,201,1) 0%, rgba(255,255,255,1) 50%);
    background: linear-gradient(0deg, rgba(201,201,201,1) 0%, rgba(255,255,255,1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9",endColorstr="#ffffff",GradientType=1); 
    min-height: 100vh;
}

#B a:link, #B a:visited, #B a:active{
    text-decoration: none;
    color: #EB6DA9;
}
#B a:hover {
    text-decoration: none;
    color: #CFA7EE;
}

#gallery{
    margin-top: 50px;
}

.project{
    position:relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor:pointer;
    width: 100%;
    margin: 50px 0px;
}
.column{
    flex-direction: column;
    align-items: flex-start;
    margin: 100px 0px;
}

.visu{
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 1024px;
    transition: 0.3s;
}
.thumb{ 
    min-width: 33vmin;
    width:12vw;
 }
.visu img {
    width: 100%;
    min-width: 33vmin;
    box-shadow: 4px 4px 4px grey;
    
}
.titleProj{ 
    font-family: 'Roboto-Thin', sans-serif;
    font-size: 1.5vw;
    padding: 25px;
    word-break: break-word;
}
.txtProj { 
    display:none;
    font-family: 'Roboto-Light', sans-serif;
    font-size: 24px;
    padding: 0px 25px 25px 25px;
    word-break: break-word;
    border-bottom: 1px dotted black;
}
.visible {
    display: inline-block;
    max-width: 520px;
    transition: 1s;
    
}

@media screen and (max-width: 1024px) {
    body{ overflow: auto; }
    main{
        display:flex;
        flex-direction: column;
    }
    article{
        width: auto;
        padding: 20px;
        overflow: initial;
        max-height:none;
    }
    .unactive{
        opacity:unset !important;
       
    }
    .active{
        opacity:unset !important;
       
    }

    h1{
        font-size: 36px;
        line-height: 200%;
    }

    h2{
        font-size: 24px;
        line-height: 200%;
    }

    #Aplus{ display:block; }
    .wrap{
        overflow:hidden;
        max-height:calc(50vh - 80px);
        height: 0%;
        transition: 0.8s;
        padding:0 !important;
     }
     .full {
         max-height:1000vh;
         height:100%;
     }

     #skills img {
        min-width: 10vmin;
        max-width: 24vmin;
        max-height: 10vmin;
        margin:0px 1em 1em 0px;
    }


    /* B */
    #gallery{
        margin-top: 20px;
    }
    .project{
        margin: 25px 0px;
    }
    .titleProj{ 
        font-size: 18px;
    }
}