/****************************************************************************/
/*************************    Left bar   ***************************/
/****************************************************************************/

div#projectLeftBar {
    position:fixed;
    top: 0px;
    left: 0px;
    /* width:50px; */
    min-width:3vw;
    width:3vw;
    height:100%;
    display:flex;
    flex-direction: column;
    margin: 2vh 0 2vh 0;
    /* margin: 15px 0 15px 0; */
    /* background-color:fuchsia */
}
/****************************************************************************/
/*************************    Back to main page   ***************************/
/****************************************************************************/
header#backToMainPageHeader{
    margin-left:0.8vw;
    width:3vw;
    height:3vw;
}

a#backToMainPageLink {
    position:absolute;
    display: inline-block;
    padding: 0.1vw;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    height:2vh;
    width:2vh;
    z-index:99999;
}

/****************************************************************************/
/**************************   Dark / light mode    **************************/
/****************************************************************************/

body.is-dark a#backToMainPageLink {
    border: solid wheat;
    /* border-width: 0 5px 5px 0; */
    border-width: 0 0.3vw 0.3vw 0;
}
body.is-light a#backToMainPageLink {
    border: solid #111111;
    /* border-width: 0 5px 5px 0; */
    border-width: 0 0.3vw 0.3vw 0;
}


body.is-dark main.project {
    scrollbar-color: #800000 wheat;
   
    /* color:#800000 */
}
body.is-light main.project {
    scrollbar-color: #800000 #111111;
}
body.is-light .tabletDisplay img {
    border:1px solid wheat;
}
body.is-dark .tabletDisplay img {
    border:1px solid #111111;
}


body.is-dark iframe.demo {
    border:5px solid wheat;
}

body.is-light iframe.demo {
    border:5px solid #111111;
}

/****************************************************************************/
/**************************       SCROLL BAR       **************************/
/****************************************************************************/
html, body {
    overflow-y: hidden;
}
#innerFrame {
   padding: 0 2vw 0 2vw;
   width:inherit;
}
 main{
    overflow-y: scroll;
}
/* ::-webkit-scrollbar {
    width: 40px;
  } */
  
  /* Track */
  /* ::-webkit-scrollbar-track {
    background: gray;
  } */
  
  /* Handle */
  /* ::-webkit-scrollbar-thumb {
    background: #888;
  } */
  
  /* Handle on hover */
  /* ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  } */

/****************************************************************************/
/**************************   Page Architecture    **************************/
/****************************************************************************/
header#pageHeader {
    z-index:300;
    position: absolute;
    top:45px;
    bottom:45px;
 }

 /* div#titleContainer {
    height:inherit;
    width: inherit;
    display:flex;
    align-items: center;
} */
header#pageHeader h1{
    display:inline-block;
    white-space:nowrap;
    overflow: hidden;
    padding:0;
    margin:0;
    vertical-align: top ;
    max-width:90vw;
    width:inherit;
    height:100%;
    text-align: center;
    writing-mode:vertical-lr;
    transform: rotate(180deg);
    /* text-size-adjust: auto; */
    font-size:  2.5vh;
}
/****************************************************************************/
/******************************        MAIN       ***************************/
/****************************************************************************/

main.project.vertical.simple {
    /* top: 100px; */
    position:absolute;
    left:0;
    top:0;
    right:0;
    width:inherit;
    height:90vh;
    display:flex;
    flex-direction: column;
    overflow-y:scroll;
    /* padding-right:60px; */
    /* padding-left:60px; */
    padding-right:5vw;
    padding-left:5vw;
    overflow-x:hidden;
}
/****************************************************************************/
/**************************   section.projectPage   *************************/
/****************************************************************************/

main.vertical.simple  section.projectPage {
    display:flex;
    align-items: center;
    justify-content: center;
    height:fit-content;
    width:inherit;
    align-content: center;
    flex:auto;
    /* margin: 200px 0px 200px 0px; */
    margin: 12vh 0px 12vh 0px;
 }

/* reverses the flex direction for every element. */
main.project.vertical.simple  > section.projectPage:nth-child(odd) {
    flex-direction: row;
}
main.project.vertical.simple  > section.projectPage:nth-child(even) {
    flex-direction: row-reverse;
}

/****************************************************************************/
/******************   section.image and section.text   **********************/
/****************************************************************************/
main.vertical.simple section.projectPage section.image {
    width:100%;
    margin:40px;
}


main.project.vertical.simple  section.projectPage .text {
    width:100%;
    margin:40px;
    padding:0 40px 0 40px;
    display: flex;
    flex-direction:column;
    align-content: center;
    align-items: center;
    /* padding: 0vh 5px 5vh 5px; */
}


/****************************************************************************/
/*********************       Section with video      ************************/
/****************************************************************************/
section.videoContainer {
    margin: 12vh auto 12vh auto;
    width:60%;

}
section.videoContainer video {
    width:100%;

}
section.videoContainer .tabletDisplay {
    /* real dimensions ipad 2 : 18.57cm / 24.12cm */
    margin: auto auto 0 auto;
    /* height:98%;
    width:98%; */
    border-radius: 4vw;
}
/****************************************************************************/
/*********************     Tablet display / image    ************************/
/****************************************************************************/
section.projectPage .tabletDisplay {
    /* real dimensions ipad 2 : 18.57cm / 24.12cm */
    margin: auto auto 0 auto;
    /* height:98%;
    width:98%; */
    border-radius: 4vw;
}
body.is-light section.projectPage .tabletDisplay, 
body.is-light section.videoContainer .tabletDisplay {
    /* border:40px solid #111111; */
    border:2.5vw solid #111111;
    background-color: #111111;
}
body.is-dark section.projectPage .tabletDisplay,
body.is-dark section.videoContainer .tabletDisplay {
    /* border:40px solid wheat; */
    border:2.5vw solid wheat;
    background-color: wheat;
}

.tabletDisplay img, .tabletDisplay video {
    /* border-radius: 20px; */
    border-radius: 2vw;
    max-width: 100%;
    height: auto;
    /* width:100%; */
    /* height:100%; */
    cursor:pointer;
}

/****************************************************************************/
/*******************************     text    ********************************/
/****************************************************************************/
section.projectPage .text p {
    padding-bottom:0;
    margin-bottom:0;
}
section.projectPage h2 {
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
}

section.projectPage p {
    font-family: "Noto Serif", serif;
}
section.projectPage a {
    font-weight:bold;
}
div.introduction {
    margin:auto;
}
div.goToResult {
    margin-top:5em;
    text-align: center;
    font-size:1.5em;
}

/** Complement portfolio .css */
section.projectPage ul.techs {
    display:inline-flex;
    font-size:1.2em;
    float:right;
  
}
section.projectPage ul:not(.techs) {
    display: flex;
    flex-direction: column;
    align-content: left;
    align-items: left;
    margin-bottom:0;
}
section.projectPage ul:not(.techs) li {
    flex-grow:1;
}
/****************************************************************************/
/******************************    DEMO  PAGE    ****************************/
/****************************************************************************/
main.project.demo{
    /* top:0;
    left:0;
    overflow:hidden;
    height:90vh;
    width:96%;
    display:flex; */
    position:absolute;
    left:0;
    top:0;
    right:0;
    width:inherit;
    height:90vh;
    display:flex;
    flex-direction: column;
    overflow-y:scroll;
    /* padding-right:60px; */
    /* padding-left:60px; */
}

iframe.demo {
    width:99%;
    height:100%;
    border-radius:10px;
    padding-bottom: 10px;
    background-color: white;
}



@media (max-width: 750px) {
    /* body::before{
        content: "mobile view";
    } */
    div#innerFrame {
        overflow: initial;
    }
    header#backToMainPageHeader {
        margin-left:10px;
    }
    main.project.vertical.simple, main.project.demo {
        padding: 0 0 0 5px;
    }
    main.project.vertical.simple section.projectPage {
        flex-direction: column;
        margin:0px;
        /* background-color: fuchsia; */
    }
    main.project.vertical.simple  > section.projectPage:nth-child(odd),
    main.project.vertical.simple  > section.projectPage:nth-child(even) {
        flex-direction: column;
    }
    main#mainContentAeon.project.vertical.simple  > section.projectPage:nth-child(odd),
    main#mainContentAeon.project.vertical.simple  > section.projectPage:nth-child(even) {
        flex-direction: column-reverse;
    }
    header#pageHeader h1{
     font-size:1.2em;
    }
    section.videoContainer {
        margin: 50px auto 50px auto;
        width: 98%;
    }
    section.projectPage .tabletDisplay{
        /* real dimensions ipad 2 : 18.57cm / 24.12cm */
        margin: auto 2vw auto 2vw;
        /* width: 300px; */
        /* height:200px; */
        /* border-radius: 30px; */
    }
    
    main.vertical.simple section.projectPage section.image{
        margin:40px 0 40px 0;
    }
    /* body.is-light section.projectPage .tabletDisplay {
        /* border:10px solid #111111; */
    /* } */
    /* body.is-dark section.projectPage .tabletDisplay { */
        /* border:10px solid wheat; */
    /*} */
    main.project.vertical.simple section.projectPage .text {
        margin: 30px 10px 30px 10px;
        padding: 0 15px 0 10px;
    }
    section.projectPage .text h2 {
        z-index: 9999999;
        font-family: "Noto Sans", sans-serif;
        position:sticky;
        top:0px;
        display:block;
        height:fit-content;
        width:100%;
        margin-top:0;
        font-weight:800;
    }
    section.projectPage .text div ~ div h2 {
        margin-top:2em;
    }

    div.goToResult {
        margin-top:2em;
        /* padding-bottom:4em; */
        text-align: center;
        font-size:1em;
    }
    section[id*=Page4] {
        padding-bottom:4em;
    }
    /* padding-bottom:4em; */
    /* section.projectPage:first-child{
        padding-top:30px;
    } */
    body.is-dark section.projectPage .text h2:focus {
        background-color: black;
    }
    body.is-dark section.projectPage .text h2 {
        background-color:#111111;
    }
    body.is-light section.projectPage .text h2 {
        background-color: wheat;
    }
}

p.bibl {
    padding-left:2em;
    padding-right:2em;
}