body {
    background-color: black;
    background-image: url("../img/bg1_mini.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    color: silver;
    display: flex;
    
    margin: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.3em;
}

@media screen and (min-width:1050px) {
    body {
        background-color: black;
        background-image: url("../img/bg1.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        background-size: cover;
        color: silver;
        display: flex;
        
        margin: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 1.3em;
    }
}
/* p {
    font-size: 1.2em;
} */

.divWindow a:link {
    color: #669999;
}

.divWindow a:visited {
    color: #6f6396;
}

.divWindow a:hover {
    color: rgb(189, 176, 66);
}

.divWindow a:active {
    background-color: white;
}

.divWindow a {
    color: white;
}

.divWindow {
    opacity: 0.9;
    justify-content: center;
    margin: 0;
}

.headSub h1 {
    display: inline-block;
    font-size: 2em;
    margin: 0;
    margin-left: 10px;
    margin-right: 10px;
}

.headSub h2 {
    display: inline-block;
    font-size: 1.5em;
    margin: 0;
    margin-left: 10px;
    margin-right: 10px;
}

.windowHead {
    padding-bottom: 0;
    padding-top: 10px;
}

.headSub {
    display: inline-block;
    border: 2px solid silver;
    border-bottom: 0;
    border-radius: 15px 15px 0px 0px;
    background-color: #061539;
    color: #7887AB;
    box-shadow: 5px 0px 5px 2px rgba(0, 0, 0, 0.63);
}

.windowBody {
    background-color: #061539;
    color: #7887AB;
    border: 2px solid silver;
    border-radius: 0px 15px 15px 15px;
    box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.63);
    min-width: 150px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
}

.windowBody_4 {
    background-color: #061539;
    color: #7887AB;
    border: 2px solid silver;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.63);
    /* min-width: 400px; */
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
}

.sig {
    text-align: right;
}

.MainSectionStyle {
    width: 100%;
    min-height: 100vh;
    
    max-width: 100vw;
    
    /* ignore scrollbar bug */
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.MainSectionStyle > div {
    max-width: 85vw;
}

.NoDisplay {
    display: none;
}

#maindiv {
    /* height: 100vh; */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    /* ignore scrollbar bug */
}

/*//////////
// Header //
//////////*/

header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    z-index: 999;
    /* position: fixed; */
    /* position: absolute; */
    width:100vw;
    /* color: white; */
    margin: 0px;
    max-width: 100vw;
    position: fixed;
    top: 0px;
    left: 0px;
    color: white;
    text-shadow: 2px 2px black;
    opacity: 0.75;
}

.header_bg1 {
    background-color: rgba(127, 255, 212, 1);
    background-image: url("../img/3d_line_tech_cut.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-bottom: 5px outset darkgreen;
}

.NoDisplay {
    display: none;
}

#TitlePortefolio {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: large;
    /* margin-left: 10px;
    margin-top: 10px; */
    margin: 10px;
    font-size: 1.2em;
    /* color: white; */
}

header span {
    /* font-size:1.1em; */
}
.BurgerIcon {
    font-size: 2em;
    margin-right: 10px;
}

#NavMenu {
    width: 100vw;
    margin-right: initial;
    margin-right:10px;
}

#NavMenu ul {
    display: flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
    align-items: center;
    padding-left: 0px;
    /* width: 100%; */
    height: 100%;
    margin: 0px;
    color: white;
    text-shadow: 2px 1px black;
}

#NavMenu ul li {
    list-style: none;
    /* padding: 10px; */
    /* font-family: 'Poppins', sans-serif; */
    font-weight: 900;
    height: 100%;
    text-decoration: none;
    width: 100%;
    /* text-align: center; */
    /* color: white; */
    
}

#NavMenu ul li:hover {
    /* color: black; */
    /* text-shadow: 0px 0px white; */
    /* background-color: #615192; */
    background-color: rgb(8, 216, 147,0.7);
    text-decoration: underline;
}

#NavMenu a {
    

    display: inline-block;
    width: 100%;
    height: 100%;
    margin:10px;
    font-size: 1.15em;
    text-decoration: inherit;
}

/* unvisited link */

a:link {
    color: inherit;
    
}

/* visited link */

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

/* mouse over link */

/* a:hover {
    text-decoration: underline;
} */

/* selected link */

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

@media screen and (min-width:1050px) {
    #BurgerMenu {
        display: none;
    }
    #NavMenu {
        display: initial;
        visibility: initial;
        width: auto;
        margin-right: 10px;
    }
    #NavMenu ul {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        height: 100%;
    }
}

/*/////////
// Intro //
/////////*/

.windowBody_Intro {
    background-color: #061539;
    color: #7887AB;
    border: 2px solid silver;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.63);
    /* min-width: 400px; */
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    text-align: center;
    font-size: 1.1em;
}

/*//////////////
// Compétence //
//////////////*/

.midSection1 {
    height: 10px;
    /* background-image: linear-gradient(to bottom, #07073d, #1a2860, #2f4984, #456ca8, #5d91cd); */
    border-style: groove;
    border-color: gray;
    background-color: gray;
    border-width: 4px;
}

#SectionComp {
    /* background-color: #5d91cd; */
    color: white;
    /* background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../rsc/img/blue_fall.png');
    background-size: cover; */
    background-color: rgba(122, 150, 137, 0.2);
    flex-direction: column;
}

#SectionComp h2 {
    text-align: center;
}

#SectionComp h3 {
    text-align: center;
    margin: 0px;
    padding: 0px;
}

.textMid {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
}

#SectionComp_MainDiv {
    min-height: 100vh;
   
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    max-width: 100%;
    align-items: center;
}

#SectionComp_MainDiv>div {
    margin-top: 5px;
}

#SectionComp_MainDiv p {
    text-align: center;
}

.Comp_Div_Main {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* align-items: center; */
    padding: 5px;
    width: 90vw;
    /* background-color: yellow; */
    /* border: 2px solid black; */
}

.Div_Main_Buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    flex: 1 0 25;
    height: 95%;
    
}

.Div_Main_Buttons>div {
    text-align: center;
    border: solid 2px;
    width: 150px;
    height: 35px;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-color: lightskyblue;
    color: black;
    border-color: deepskyblue;
    border-width: 0px 1px 2px 2px;
    cursor: pointer;
}

.Div_Main_Buttons>div:hover {
    /* background-color: gray; */
    background-color: rgb(189, 247, 228);
    border-color: rgb(150, 223, 199);
    color: black;
}

.comp_detail div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.comp_detail div:first-child span {
    border: 2px solid silver;
    border-radius: 3px;
    background-color: lightskyblue;
    padding: 3px;
    color: black;
    cursor: pointer;
}
.comp_detail div:first-child span:hover {
    background-color: rgb(189, 247, 228);
    border-color: rgb(150, 223, 199);
    color: black;
    
}
.comp_detail div:first-child span:first-of-type {
    visibility: hidden;
}

.comp_detail div:nth-child(2) {
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.Span_Important {
    font-weight: bold;
}

.info_hide {
    display: none;
}

.comp_detail {
    height: 100%;
}

/* .comp_detail * {
    text-align: center;
} */

@media screen and (min-width: 640px) {
    #SectionComp_MainDiv {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-wrap: wrap;
        flex: 1 0 45%;
        padding: 5px;
        /* background-color: yellow; */
        /* border: 2px solid black; */
    }
    .Comp_Div_Main {
        max-width: 600px;
        height: 400px;
    }
}

/*///////////////
// Réalisation //
///////////////*/

#SectionRealisation {
    /* background-color: limegreen; */
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../rsc/img/blue_digit1.jpg');
    background-size: cover;
    flex-direction: column;
}

#SectionRealisation h1 {
    color: white;
}

#SectionRealisation a {
    text-decoration: underline;
}

.SectionRealis_MainDiv {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}

.SectionRealis_MainDiv>div {
    margin-top: 5px;
}

.RealDiv {
    /* min-width: 30vw;
    max-width: 40vw; */
    margin: 5px;
}

.imgCard {
    max-width: 160px;
    max-height: 160px;
    background-color: white;
}

.DivReal_Img {
    display: flex;
    justify-content: center;
}

.Real_title {
    display: flex;
    justify-content: center;
}

@media screen and (min-width: 640px) {
    .SectionRealis_MainDiv {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-wrap: wrap;
        flex: 1 0 45%;
        padding: 5px;
        /* background-color: yellow; */
        /* border: 2px solid black; */
    }
    .RealDiv {
        min-width: 30vw;
        max-width: 40vw;
        margin: 5px;
    }
}

/*////////////
//  Contact //
////////////*/

.Icon_Size {
    font-size: 2em;
    height: 2.5em;
    width: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.MyCard1 {
    background-color: #D3D9E7;
    color: black;
    border: 2px solid black;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.63);
    min-width: 150px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.LastSectionStyle {
    /* width: 100%; */
    /* background-color: #4F628E; */
    background-image: url("../img/circuit-mini2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-top: 2px solid black;
    opacity: 0.95;
    min-height: 200px;
    width: 100vw;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: aqua;
    text-shadow: 2px 2px black;
}

.LastSectionStyle>div {
    margin: 10px 10px 10px 10px;
}

.LastSectionStyle a {
    color: inherit;
    width: 100%;
    text-align: center;
}

/* unvisited link */

.LastSectionStyle a:link {
    color: inherit;
    text-decoration: underline;
}

/* visited link */

.LastSectionStyle a:visited {
    color: inherit;
    text-decoration: none;
}

/* mouse over link */

.LastSectionStyle a:hover {
    color: inherit;
    background-color: lightblue;
    text-decoration: none;
    text-shadow: 0px 0px black;
    color:darkblue;
}

/* selected link */

.LastSectionStyle a:active {
    color: inherit;
    text-decoration: none;
}