:root{
  --main-border-width: 0.15vw;
}

@font-face{
	font-family:'Murmure';
	src: url('le-murmure.ttf') format('truetype');
}

@font-face{
	font-family:'Compagnon';
	src: url('compagnon.otf') format('truetype');
}

body{
	margin:0;
}
a:link {
    color: black;
    font-weight:normal;
}
a:visited {
    color: black;
    font-weight:normal;
}
a:active {
    color: black;
    font-weight:normal;
}
a:hover {
    color: yellow;
    font-weight:normal;
}
.parent{
	/*background-color:brown;*/
	height:70vh;
	width:55vw;
	margin-left:22.5vw;
	margin-top:15vh;
	border:solid black var(--main-border-width);
	display: grid;
	grid-template-columns: 1fr 1.5fr 2fr;
	grid-template-rows: 0.7fr 2fr 1fr 3fr 2fr 0.7fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	overflow:hidden;
}

.div1{
	grid-area: 1 / 1 / 2 / 2;
	border:solid black var(--main-border-width);
}

.div2{
	grid-area: 1 / 2 / 2 / 3;
	border:solid black var(--main-border-width);
	display: flex;
	justify-content:center;
}

.div3{
	grid-area: 1 / 3 / 2 / 4;
	border:solid black var(--main-border-width);
}

.prenom{
	grid-area: 2 / 1 / 5 / 2;
	border:solid black var(--main-border-width);
	display: flex;
	justify-content:center;
}

.presentation{
	grid-area: 5 / 1 / 6 / 2;
	border:solid black var(--main-border-width);
	padding:1vh;
	font-size:120%;
	font-family:'Compagnon';
}

.design:hover{
	color:yellow;
}

.div6{
	grid-area: 2 / 2 / 3 / 3;
	border:solid black var(--main-border-width);
}

.div7{
	grid-area: 3 / 2 / 5 / 3;
	border:solid black var(--main-border-width);
	display:flex;
}

.vide1{
	flex:1 1 20%;
	border-right:solid black var(--main-border-width);
}
.carres{
	flex:1 1 80%;
	border-left:solid black var(--main-border-width);
	display:flex;
	justify-content:center;
	background-image:url("carres.svg");
	background-repeat:no-repeat;
	background-size: 160% 160%;
	background-position: center;
}

.cv{
	grid-area: 5 / 2 / 6 / 3;
	border:solid black var(--main-border-width);
	padding:1vh;
	font-family:'Murmure';
	font-size:450%;
	text-align:center;
}

.cv:hover{

}

.lien{
	text-decoration:none;
}

.diagonale{
	background-image:url("diagonale.svg");
	background-repeat:no-repeat;
	background-size: 160% 150%;
	background-position: center;
	grid-area: 2 / 3 / 4 / 4;
	border:solid black var(--main-border-width);
	padding:0;
	overflow:hidden;
}
@keyframes anim {
  10%	{	transform: translate(0px, 0px); background:yellow; }
  20%	{	transform: translate(80px, 35px); background:yellow; }
  30%	{	transform: translate(85px, 20px); background:yellow; }
  40%	{	transform: translate(90px, 15px); background:yellow; }
  50%	{	transform: translate(0px, 0px); background:yellow; }
  60%	{	transform: translate(-80px, -35px); background:yellow; }
  70%	{	transform: translate(-85px, -20px); background:yellow; }
  80%	{	transform: translate(-90px, -15px); background:yellow; }
  100%	{	transform: translate(0px, 0px); background:yellow; }

}
.cercle {
    width: 7vw;
    height: 7vw;
    border-radius: 7vw;
    background: yellow;
    margin-left:calc(50% - 3.7vw);
    margin-top:calc(1.3vw + 0.6vh);
}
.cercle:hover {
	animation: 1s linear 1s infinite alternate anim;
}
.projets{
	grid-area: 4 / 3 / 5 / 4;
	border:solid black var(--main-border-width);
	padding:1vh;
	font-size:120%;
	font-family:'Compagnon';
}

.p1{
	border-bottom:solid grey 1px;
	padding-bottom:1vh;
}

.p2{
	border-bottom:solid grey 1px;
	padding-top:1vh;
	padding-bottom:1vh;
}

.p3{
	padding-top:1vh;
}

.p1:hover{

}

.p2:hover{

}

.p3:hover{

}

.lien{
	text-decoration:none;
}

.div11{
	grid-area: 5 / 3 / 6 / 4;
	border:solid black var(--main-border-width);
	display:flex;
}

.vide2{
	flex:1 1 40%;
	border-right:solid black var(--main-border-width);
}
.cercles{
	flex:1 1 60%;
	border-left:solid black var(--main-border-width);
	background-color: #ffffff;
	display:flex;
	flex-wrap:wrap;
}
.rond{
	flex:1 1 4.15vh;
	height:4.15vh;
	width:4.15vh;
	border-radius:10vh;
	border:var(--main-border-width) solid white;
	background-color:black;
	transition-duration:0.5s;
	transition-delay:0.5s;
	text-align:center;
}

.rond img{
	width:40%;
	padding:1vh;
}


.rond:hover{
	background-color:white;
	border:var(--main-border-width) solid black;
	transition-duration:0s;
	transition-delay:0s;
}

.accueil{
	padding:0.5vh;
	font-family:'Compagnon';
}

.tel{
	grid-area: 6 / 1 / 7 / 2;
	border:solid black var(--main-border-width);
	padding:1vh;
	text-align:left;
	font-family:'Compagnon';
}

.div13{
	grid-area: 6 / 2 / 7 / 3;
	border:solid black var(--main-border-width);
	background-color:black;
}

.div14{
	grid-area: 6 / 3 / 7 / 4;
	border-top:solid black var(--main-border-width);
	border-right:solid black var(--main-border-width);
	border-bottom:solid black var(--main-border-width);
	display:flex;
}

.mail{
	flex:1 1 60%;
	border-left:solid black var(--main-border-width);
	text-align:end;
	padding-right:1vh;
	padding-top:1vh;
	padding-bottom:1vh;
	font-family:'Compagnon';
}

.divp1 {
	grid-area: 2 / 1 / 3 / 2;
	border:solid black var(--main-border-width);
	padding:1vh;
	font-family:'Compagnon';
}
.divp2 {
	grid-area: 2 / 2 / 3 / 3;
	border:solid black var(--main-border-width);
	padding:1vh;
	font-family:'Compagnon';
}
.divp3 {
	grid-area: 2 / 3 / 6 / 4;
	border:solid black var(--main-border-width);
	display:block;
	overflow-y:scroll;
}
.divp3 img{
	width:90%;
	margin-bottom:1vh;
	margin-top:2vh;
	margin-left:2.5vh;
}

.divp4 {
	grid-area: 3 / 1 / 6 / 2;
	border:solid black var(--main-border-width);
	padding:1vh;
}
.divp5 {
	grid-area: 3 / 2 / 6 / 3;
	border:solid black var(--main-border-width);
	padding:1vh;
	font-family:'Compagnon';
	overflow-y:scroll;
}
img{
 vertical-align: top;   
}
@media screen and (max-width: 700px){
	.parent{
		/*background-color:brown;*/
		height:auto;
		width:auto;
		margin-left:3vw;
		margin-right:3vw;
		margin-top:10vh;
		margin-bottom:10vh;
		border:solid black var(--main-border-width);
		display: block;

	}
	.div1, .div3, .div6, .div7, .div13{
		display:none;
	}
	
	.rond img{
		width:20%;
		padding:1vh;
	}
	
	.prenom img{
		grid-area: 2 / 1 / 5 / 2;
		display: flex;
		justify-content:center;
		width:70%;
		padding:2vh;
	}
	
	.mail{
		flex:1 1 60%;
		text-align:end;
		padding-right:1vh;
		padding-top:1vh;
		padding-bottom:1vh;
		font-family:'Compagnon';
	}

}