/* // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 800

.rethink-sans-<uniquifier> {
  font-family: "Rethink Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */

*, body {
    margin: 0;
    padding: 0;
    font-family: "Rethink Sans", sans-serif;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    width: 100vw;
    position: relative;
}

#body {
    background-color: #1b1b1a;
    transition: .5s;
}

header {
    width: 100vw;
    position: fixed;
}

header {z-index: 999;}

#menu {
    position: fixed;
    right: 5vw;
    top: 15vw;
}

h1 {
    color: white;
    font-size: 2rem;
}

h2 {
    color: #FFE4C4 ;
    font-weight: 600;
}

/* Premiere div */
.hello {
    width: 70vw;
    margin-top: 15vw;
    margin-left: 5vw;
}

#photo {
    width: 75vw;
    margin-top: 5vw;
    border-radius: 15px ;
}

/* deuxieme div */
.about {
    margin-top: 15vw;
    width: 100%;
}

.about div:nth-child(1){
    display: flex;
    justify-content: end;
}

#propos {
    margin-right: 1em;
}

#aboutInfo {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    display: flex;
    justify-content: center;
}

#aboutInfoBloc {
    color: white;
    background-color: #353333;
    list-style: none;
    width: 90%;
    height: 15em;
    position: relative;
    display: grid;
    grid-template-columns: 5% 1fr 5% ;
    grid-template-rows: 5% 17% 1fr 65% 1fr ;

    margin-top: 1em;
}

#aboutInfoBloc p {
    font-size: 10pt;
    grid-area: 4/2;
}

#aboutInfoBloc h3 {
    font-weight: 400;
    grid-area: 2 / 2;
}

#aboutBout {
    bottom: 1em;
    position: absolute;
    right: 1em;
    width: 2rem;
    transition: .5s;
}


/* Troisieme div */

.real {
    margin-top: 5em;
}

.real h2 {
    text-align: center;
}

.projets {
    display: flex;
    justify-content:center ;
    flex-direction: column;
    align-items: center;
    margin-top: 3em;
    color: white;
}

.projectName {
    font-size: 1.3rem;
}

#projet1 {
    width: 90%;
    background-color:#353333;
}

#projet1_1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1em;
}

#projet1_1 div {
    background-color: #1B1B1A;
}

.projectType {
    width: 100px;
    height: 35px;
    text-align: center;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#projet1_2 {
    display: flex;
    justify-content: space-around;
}

#projet1_2 img {
    width: 45%;
    border-radius: 20px;
}

#projet1_2 div {
    width: 40%;
    font-size: 8pt;
    text-align: justify;
    display: flex;
    align-items: center;
}

#projet1 div:nth-child(3){
    width: 100%;
    display: flex;
    justify-content: end;
}

#projet1 div:nth-child(3) img {
    margin-right: 1em;
    margin-bottom: 1em;
}

#projet2 {
    width: 100%;
    margin-top: 3em;
    display: flex;
    justify-content: end;
}

#projet2Bloc {
    width: 80%;
    background-color:#353333;
    margin-right: 1.5em;
    border-radius: 30px;
}

.projetTitle {
    align-items: center;
    margin-left: 1.5em;
    margin-top: 0.6em;
    width: 100%;
}

.projetTitle div {
    background-color: #1B1B1A ;
}

.projectType2 {
    width: 60px;
    height: 25px;
    text-align: center;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5em;
}

.projectName2 {
    font-size: 1.4rem;
}

.TypeName {
    font-size: 0.6rem;
}

.projetContent {
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 2em;
}

.projetContent div {
    width: 45%;
    font-size: 0.75rem;
    text-align: justify;
}

.projetContent img {
    width: 35%;
}

.arrow {
    width: 90%;
    height: 3.5em;
    display: flex;
    justify-content: end;
    align-items: center;
}

.arrowIMG {
    height: 2em;
}

#projet3 {
    width: 100%;
    margin-top: 2.5em;
}

#projet3Bloc {
    width: 83%;
    background-color:#353333;
    margin-left: 1.5em;
    border-radius: 30px;
}

.saeContent {
    gap: 1em;
}

#sae105 {
    width: 50%;
}

#saeP {
    width: 40%;
    font-size: 0.75rem;
}

.projetContent2 {
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 1em;
}

/* competences */

#compTitle {
    padding: 1em;
    margin-top: 40px;
}

h4 {
    color: white;
    font-size: 2rem;
}

#comp {
    /* background-color: #342D2D; */
    width: 100%;
    height: 98vw;
    position: relative;
    margin-top: 1.5em;
}

.droite,.gauche { position: absolute; }

.droite {
    text-align: right;
    right:-0.5em; 
    opacity: 0; 
}

.gauche {
    left: -0.5em;
    opacity: 0; 
    bottom: 1em;
}

.droite h4 {
    margin-top: 0.2em;
}

.gauche h4 {
    margin-bottom: 0.2em;
}

.competence div:nth-child(3) {
    color: white;
    margin-left: 1.7em;
    margin-top: 0.8em;
    font-size: 8pt;
}

#comp2 { top: 1.5em ; }
#comp3 { top: 3em; }
#comp4 { top: 4.5em ; }

#comp5 { top: 5.5em; }
#comp6 { top: 7em; }
#comp7 { top: 8.5em; }


/* contact */

.contact {
    width: 100%;
    margin-top: 4em;
    background-color: #0b0a0a;
}

#contact {
    width: 100%;

    display: flex;
    position: relative;
}

#contact_info {
    position: relative;
    width: 50%;
}

.contactIcon {
    display: flex;
    position: relative;
    gap: 10px;
    align-items: center;
    height: 35px;
}

#contactBLOC{
    width: 90%;
    position: absolute;
    left: 1em;
    top: 2em;
    display: flex;
    flex-direction: column;
    transform: scale(0.85);
}

.icon {
    width: 20px;
}

.iconP {
    color: white;
    font-size: 12px;
    font-weight: 400;

}

.locate {
    width: 17px;;
}

#contact_info div {
    display: flex;
}

#formulaire {
    width: 50%;
}

form {
    position: relative;
    margin-top: 3em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#mail {
    background-color: unset;
    border: none;
    border-bottom: #433F3F 2px solid;
    border-radius: 1px;
    color: white;
    outline: none;
    font-size: 10px;
    width: 12em;
}

#message {
    height: 10em;
    margin-top: 1em;
    background-color: #433F3F;
    border: none;
    border-radius: 10px;
    width: 85%;
    outline: none;
    color: white;
    font-size: 10px;
    padding: 0.7em;
}

#sub {
    align-self: end;
    margin: 1.5em;
    background: none;
    color: #565151;
    border: none;
    border: #433F3F 1px solid;
    padding: 0.4em;
    width: 8em;
    border-radius: 40px;
    font-size: 0.8rem;
}

.formulaire input[type="email"]::placeholder {
    position: absolute;
    right: 0;
}


/* LE MENU */

.menu {
    position: fixed;    
    height: 90%;
    width: 100%;
    background-color: rgb(75, 71, 71,0.85);
    z-index: 999;
    top: 5vh;
    right: -25em;
    border-top-left-radius: 50em;
    border-bottom-left-radius: 50em;
    display: none;
    justify-content: end;
    align-items: center;
}

#onglet {
    text-align: end;
    margin-right: 1em;
    margin-top: 1em;
}

#onglet h4 {
    font-size: 3rem;
    margin-bottom: 1em;
}

#onglet h4 a {
    text-decoration: none;
    color: white;
}

#menu2 {
    margin-bottom: 2em;
    width: 2.5em;
}