/*some fonts*/
@font-face {
    font-family: montserrat;
    src: url(../fonts/montserrat/Montserrat-Regular.ttf);
}

@font-face {
    font-family: slabo;
    src: url(../fonts/slabo_27px/Slabo27px-Regular.ttf);
}

@font-face {
    font-family: cormorant;
    src: url(../fonts/cormorantGaramond/CormorantGaramond-SemiBold.ttf);
}

/*CSS Globals*/
h1, h2, p {
    padding: 5vh 5vw 0 7vw;
    font-family: cormorant;
    color: #EEF0F2;
}

p {
    font-size: 1.2em;
    text-align: justify;
}

/*Page d'accueil*/
#portrait {
    background: url(../images/portrait2Rogner.jpg), no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
}

nav > ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: end;
    color: #EEF0F2;
}

.nav-child {
    font-family: cormorant;
    margin-top: 2vh;
    margin-right: 3vw;
    font-size: 1.2em;
    color: #EEF0F2;
}

/*.nav-underline{
    width: 0;
    border: solid #EEF0F2 1px;
}*/

#presentation {
    padding-left: 7vw;
    padding-top: 20vh;
    height: 100vh;
}

#presentation > h1 {
    font-size: 5em;
}

#presentation > p {
    width: 25vw;
}


/*Qui suis-je ?*/
#about {
    height: 100vh;
    background-color: #EEF0F2;
}
#about > h1, #about > p {
    color: #1C1C1C;
}
#about > p {
    padding-left: 12vw;
    padding-right: 15vw;
    font-size: 1.5em;
}

.big-img {
    height: 40vh;
    width: auto;
}

.little-img {
    height: 10vh;
    width: auto;
}

#UL {
    position: relative;
    left: 25vw;
    top: 10vh;
}
#ULL {
    position: relative;
    left: -9vw;
    top: -18vh;
}

#TLN {
    position: relative;
    top: 25vh;
    left: 20vw;
}
#TLNL {
    position: relative;
    left: 13vw;
    top: -8vh;
}

.lieuEtude {
    display: inline-block;
}

/*Lieu de travail*/
#workspace {
    background: url(../images/desktopWork.jpg), no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 70vh;
}
#grayBloc {
    margin-left: 10vw;
    height: 100%;
    width: 20vw;
    background-color: #EEF0F2C0;
}
#grayBloc > h1 {
    font-weight: normal;
    padding-left: 3.5vw;
    padding-right: 3.5vw;
    color: #1C1C1C;
}
#grayBloc > p {
    padding: 10vh 3.5vw 0 3.5vw;
    font-size: 1.5em;
    color: #1C1C1C;
}

/*Mes projets*/
#portfolio {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #1C1C1C;
    padding-bottom: 10vh;
}

#portfolio > h1 {
    align-self: flex-start;
}

#projets-grid {
    margin-top: 10vh;
    display: grid;
    grid-template-columns: 40vw 40vw;
    grid-template-rows: auto auto;
}

.projet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 5vh;
}

.projet > img {
    height: 40vh;
    width: auto;
}

.projet > h2 {
    text-align: center;
    padding-left: 5vw;
    padding-right: 5vw;
}

/*Contact*/
#contact {
    background-color: #EEF0F2;
    padding-bottom: 5vh;
}

.contact-element {
    color: #1C1C1C;
}

.contact-element > a {
    text-decoration: underline;
    color: #1C1C1C;
}

.contact-element > a:hover {
    color: rgb(104, 104, 104);
}

/*Pied de page*/
footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 5vh;
    background-color: #1C1C1C;
}

footer > p {
    display: inline;
    padding: 0;
    padding-left: 2vw;
    margin-right: 20vw;
}