/* Reinitialisation */

*{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
/*..............*/

/* référence */
:root{
--bg-color: #1f1f21;
--text-color: #fff;
--main-color: #ffae00;
--main-color2:#ab1414;
--main-color3:#13a5b5;

--big-font: 7rem;
--p-font: 1.1rem;
}

/* styliser body */
body{
background: var(--bg-color);
color: var(--text-color);
font-family: "Titillium web", sans-serif;
font-weight: 200;
font-style: normal;

}
/* section header */
nav{

top: 0;
right: 0;
width: 100%;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px 15%;
background: transparent;
transition: all ease .45s;
}
.logo{
color: var(--text-color);
font-size: 41px;
 font-weight: 600;
}
.logo span{
color: var(--main-color);
}
.Name{
color: var(--main-color);
}
.navbar{
display: flex;
}
.navbar a{
font-size: var(--p-font);
font-weight: 500;
color: var(--text-color);
margin: 0 25px;
transition: all ease .50s;
}
.navbar a:hover{
color: var(--main-color);
}

/* section main */

.img-border{
width: 60%;
border-radius: 50%;
margin-left: 30%;

.container-main{
display: flex;
justify-content: space-around;
width: 800px;
}

.main-text h2{
font-size: 3rem;
color: var(--main-color);
}

.main-text p{
font-size: var(--p-font);
font-weight: 400;
color: #c3c3c3;
line-height: 30px;
margin-bottom: 30px;
}
.main-link1{
display: inline-block;
padding: 25px;
padding-block: 20px;
background: var(--main-color);
color: black;
border-radius: 100%;
font-size: small;
font-weight: bold;
transition: all 0.6ms ease-in-out;
border: 2px solid var(--main-color);
}
.main-link1:hover{
transform: translateY(-5px);
background: transparent;
color: var(--main-color);
}
.main-link2{
display: inline-block;
padding: 15px;
padding-block: 20px;
background: var(--main-color2);
color: black;
border-radius: 100%;
font-size: small;
font-weight: bold;
transition: all 0.6ms ease-in-out;
border: 2px solid var(--main-color2);
margin-left: 25px;
}
.main-link2:hover{
transform: translateY(-5px);
color: #141414;
background: transparent;
color: var(--main-color2);
}
.main-link3{
display: inline-block;
padding: 15px;
padding-block: 20px;
background: var(--main-color3);
color: black;
border-radius: 100%;
font-size: small;
font-weight: bold;
transition: all 0.6ms ease-in-out;
border: 2px solid var(--main-color3);
margin-left: 25px;
}
.main-link3:hover{
transform: translateY(-5px);
color: #141414;
background: transparent;
color: var(--main-color3);
}
.main{
display: flex;
justify-content: space-around;
width: 300px;
margin-left: 2px;
}

/* section footer */
footer{
position: absolute;
bottom: 3rem;
display: flex;
justify-content: space-between;
width: 70%;
border-top: 1px solid white;
left: 15%;
font-size: 0.8rem;
color: var(--text-color);
}

.tel{
margin: 14px;
padding: 14px;
}
.tel p{
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
width: 25px;
color: var(--text-color);
font-size: 15px;
margin: 0 7px;
transition: all 0.6s ease-in-out;
background: transparent;
padding-left: 30px;
}
.tel p:hover{
transform: translateY(-10px);
}
.tel span{
color: var(--text-color);
 font-size: 0.9em;
}
.tel span:hover{
color: var(--main-color);
}
.Email{
margin: 14px;
padding: 14px;
}
.Email p{
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
width: 25px;
color: var(--text-color);
font-size: 15px;
margin: 0 7px;
transition: all 0.6s ease-in-out;
}
.Email p:hover{
transform: translateY(-10px);
}
.Email span{
color: var(--text-color);
font-size: 0.9em;
}
.Email span:hover{
color: var(--main-color);
}
.Suivez-moi{
margin: 14px;
padding: 14px;
}
.copyright{
margin: 14px;
padding: 14px;
}
.copyright span{
font-size: x-small;
color: cyan;
font-weight: bold;
}
.Suivez-moi i{
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
width: 25px;
 color: var(--text-color);
font-size: 15px;
transition: all 0.6s ease-in-out;
}
.Suivez-moi i:hover{
transform: translateY(-10px);
}

.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
}

.conteneur-1{
display: flex;
margin-left: 15%;
}
.conteneur-2{
margin-left: 20%;
}
.border-envoyer{
border-radius: 100%;
width: 50%;
background: var(--main-color);
margin-top: 20px;
}
#border-cv{
border-right: 2px solid white;
padding-right: 32%;
}
.border-contact{
border-right: 2px solid white;
padding-right: 30%;
}