:root{
	/* --colorFontDarkMode: rgb(29, 29, 29); */
	--colorFontDarkMode: #2A2438;
	--colorHeaderDarkMode:#5C5470;
	--colorFooterDarkMode:#352F44;
	--animation-duration:1s;
	--colorinputDarkMode:white;
	/*
	#DBD8E3
	#5C5470
	#352F44
	#2A2438
	*/

}

*{
	font-family: 'Lato', sans-serif;
}

.headerMoi {
	height: 4rem;
	margin-top: 0;
	margin-left: 20px;
    left: 0;
	position: absolute;

	animation-duration: 2s;
	animation-name: apparition;
	animation-fill-mode: forwards; 
	/* animation-timing-function: cubic-bezier(1, 0.33, 0.02, -0.04); */
	
}
@keyframes apparition {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
  }

header{
	display: flex; 
	justify-content: center;
	/* flex-direction: column-reverse; */
	z-index: 1000;

	background-image:linear-gradient(#a9a9a999, #a9a9a933);
	height: 70px;
    width: 100vw;
    top: 0px;
	box-shadow: 0 .5em 10px 0px rgba(135, 130, 130, 0.4);
	
}

nav{
	margin: 1em  0  0  0 ;
	text-align: center;

}

li{

    list-style: none;
	display: inline-flex;
	margin-left: 20px;
	font-size: 30px;
	/* font-family: 'Roboto', sans-serif; */

}

ul li a, p{

	text-decoration: none;
	color:black;
	transition: 1s;

}

ul li a:hover{

	text-decoration: underline black;
    color: inherit;

}

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

.pageAcceuil{

	background-color: whitesmoke;/*whitesmoke*/
	/* padding: 50px 0 50px 0; */
	/* padding: 4em 0 4em 0; */
	position: relative;
 	width: 100%;
	min-height: calc(100vh - 100px);

}

.moi{

	width: 25rem;
	height: 25rem;
	border-radius: 47%;
	text-align:center;
	margin:auto;
	display:flex;

	animation-duration: 2s;
	animation-name: glissement;
	animation-fill-mode: forwards; 
	animation-timing-function: cubic-bezier(1, -0.01, 0.54, 1.39);
	
}
@keyframes glissement {
	from {
	  transform: translateX(var(--random-start, 10vw)) translateY(var(--random-start2, 10vw));
	}
	to {
	  transform: translateX(0) translateY(0); 
	}
  }
  

h1{
	font-size: 40px;

}

h1, h2{
	margin-top: 3vh;

	text-align: center;

}

@media only screen and (max-width: 800px) { 

	header{
		height: auto;	
		flex-direction: column;
	}
	/* <li>
		<p>|</p>
	</li> */
	li > p{
		/* visibility: hidden; */
		display: none;
	}
	li{
		display: block;
	}
	/* nav{
		margin: 1em  1em  0  0 ;
		text-align: right;
	} */
}


/* footer */



@keyframes gradientAnimation {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

footer {
    background-color: #5a5959bb;

    /* background-color: #333; */
	/* background-image: linear-gradient(#f5f5f5, #333333); */
	/* background: radial-gradient(at top, #f5f5f5, #333333); */

	color: white;
    padding: 20px 0;
    text-align: center;
}

.footer-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.social-icons a {
    margin: 0 10px;
}

.social-icons img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s;
}

.social-icons img:hover {
    transform: scale(1.1);
}

.contact-info p {
    margin: 5px 0;
}

.contact-info a {
    color: white;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

footer div:nth-child(2){
	margin-top: 5%;
}


/* SOUS PAGE : SKILL & PROJECT*/


.card-container{
	margin-top: 3vh;
	margin-bottom: 3vh;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-content:center;
	justify-content: space-evenly;
	/* flex-direction: column; */
}

.card{
	/* background-image: linear-gradient(#a9a9a999, #a9a9a933); */
	border-radius: 10px;
	flex-basis: 20%;
	padding: 10px;
	/* box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; */
	box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
	/* transform : scale(1);  */
	 /* A VOIR POURQUOI CA REAGI COMME CA */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center; 
}
.card:hover{
	transition: 200ms;
	scale: 1.04;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
.card img{	
	height: 150px;
	margin-top: 10px;
	object-fit: contain; 
}
.card p{	
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	
}

.card:hover p{	
	-webkit-line-clamp: inherit;
}

div h3{
	margin-top: 1em;
}

div p{
	margin: 0.3em;
	margin-bottom: 1em;
}

/* SOUS PAGE MEDIA QUERY : SKILL & PROJECT*/

@media only screen and (max-width: 768px) { 

	.card{	
		flex-basis: 40%;
	}
}
@media only screen and (max-width: 569px) { 

	.card{	
		flex-basis: 30%;
	}
}
@media only screen and (max-width: 569px) { 

	.card{	
		flex-basis: 90%;
	}
}



/* SOUS PAGE : ABOUT ME */
#aboutMe {    
	display: flex;
	flex-direction: row;
    /* justify-content: space-evenly; */
    /* padding: 0 10px; */
    flex-wrap: wrap;
    /* align-content: center; */
    /* align-items: center; */
}

#aboutMe > img {
    /* background-color: red; */
    width: 20vw;
	margin-right: 5vw;
	margin-bottom: 5vw;
}
#aboutMe h2 {
	text-align:left;
	margin-left: 1em;
}

section {
    margin: auto;
    /* background-color: whitesmoke; */
}

.AboutMe {
    /* max-width: 50%; */
	flex-basis: 50%;
	text-align: justify;
	display: flex;
	flex-direction: column;

}


.container-info{
	display:flex;
	gap: 10px;
	flex-direction: row;
	margin: auto;
}

.info-item{
	gap: 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cv > img{
	width:2em;
}

@media only screen and (max-width: 768px) { 

	.AboutMe{	
		flex-basis: 90%;
	}
	
	#aboutMe > img {
		width: 20vw;
		margin: auto;
		margin-bottom: 5vw;

		/* margin-left: calc((100vw - 20vw + 2%) / 2);
		margin-right: 2%; */
	}

}


/* PDF VIEWER */

#pdf-viewer{
	display:none;
	background-color:white;
	width:50vw;
	height:90vh;
	z-index:10;
	position: fixed;
	margin-left: calc((100vw - 50vw) / 2);
	margin-top: calc((100vh - 90vh) / 2);
	overflow: scroll;
	flex-direction: column; 
    align-items: end;
	
	padding:10px;
	border-radius: 10px;
	box-shadow: #26394d 0px 20px 30px 0;

}
#pdf-render{
	/* background-color:blue; */
	/* margin-top:20px; */
	width:100%;
	margin-bottom: 10px; 
}

#pdf-viewer img{
	width: 2em;
}

#pdf-viewer .close{
    margin-top: 5px;
    margin-right: 5px;
    cursor: pointer;
}
#pdf-viewer .downloadImg {
    margin-right: 5px;
    cursor: pointer;
}



/* CONTACT US */
.contact{
	/* background-color: red; */
	/* background-image: linear-gradient(#a9a9a999, #a9a9a933); */
	border-radius: 10px;
	width: 50vw;
	height: 75vh;
	padding: 10px;
	margin: auto;
	margin-top: 2em;
	margin-bottom: 2em;
	/* box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; */
	box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
	/* transform : scale(1);  */
	 /* A VOIR POURQUOI CA REAGI COMME CA */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center; 
}
.contact:hover{
	transition: 200ms;
	scale: 1.001;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

fieldset{
	padding: 1em;
	width: 45vw;
	/* height: 65vh; */

}
legend{
	text-align: left;
	margin-left:10px ;
}
.form-input{
	display: flex;
	flex-direction: column;
	align-items: start;
	margin-top: .5em;
}
.form-input > textarea{
	width: 100%;
	padding: 3px;
	border: none;
	border-bottom: 1px solid #000; 
	background-color: transparent; 
	caret-color: black; 
	outline: none; 
	min-width: 100%;
	min-height: 10em;
	/* min-height: auto; */
	resize: none;
	/* overflow: hidden;  */
}
.form-input > input{
	width: 100%;

	padding: 3px;
	border: none;
	border-bottom: 1px solid #000; 
	background-color: transparent; 
	caret-color: black; 
	outline: none; 
	
}

/* .btn{
	border:solid red 15px;
	width: 515px;
	height: 183px;
	border-radius: 50%;
	position: relative;
}

.btn::after, .btn::before{
	width: 515px;
	height: 183px;
	border:solid red 11px;
	border-radius: 50%;
	display: block;
	content: "";
	position: absolute;
	left: -15px;
	right: -15px;
} */

.btn {
    width: 10vw;
    height: 2em;
	margin-top: 1em;
	border-color: #000;
    background-color: white;

}

.btn:hover {
    box-shadow: .3rem .3rem 0 #000;
	transition-duration: .2s;
    transform: translate(-.4rem, -.4rem);
} 
/* Bouton hover theme sombre (a revoir)  */
/* .btn:hover {
	color: white;
	border-color: #000000;
    background-color: rgb(169, 162, 188);

    box-shadow: .3rem .3rem 0 #dfcdfb;
	transition-duration: .2s;
    transform: translate(-.4rem, -.4rem);
}  */


/* 
.btn::before,
.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid black;
	border-radius: 64% 36% 66% 34% / 49% 67% 33% 51% ;

    box-sizing: border-box;
    pointer-events: none;
}
.btn::before{
	border-radius: 76% 24% 69% 31% / 30% 45% 55% 70%  ;

}

.btn:hover{    
	animation: shake 0.1s infinite alternate;

}

.btn::before:hover,
.btn::after:hover{
	animation: shake 0.1s infinite alternate;
}


.btn::after{
    animation-delay: 0.05s;
} */

/* @keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
} */

/* 
.btn span:nth-child(1){
	border-radius: 50% 50% 68% 32% / 45% 30% 70% 55% ;
}

.btn span:nth-child(2){
	animation-direction: reverse;
	border-radius: 26% 74% 33% 67% / 70% 37% 63% 30% ;
}

.btn span:nth-child(3){
	animation-duration: 2s;
	border-radius: 46% 54% 64% 36% / 31% 63% 37% 69% ;
} */
/* 
@keyframes animate {
	0%{
		transform: rotate(0deg);
	}
	0%{
		transform: rotate(360deg);
	}
	
	
} */

@media only screen and (max-width: 1024px) { 

	.contact{
		/* background-color: red; */
		/* background-image: linear-gradient(#a9a9a999, #a9a9a933); */
		width: 70vw;
	}
	fieldset{
		padding: 1em;
		width: 65vw;
	}
}

@media only screen and (max-width: 768px) { 

	.contact{
		/* background-color: red; */
		/* background-image: linear-gradient(#a9a9a999, #a9a9a933); */
		width: 90vw;
	}
	fieldset{
		padding: 1em;
		width: 85vw;
	}
}





/* BURGER */


.burger {
	width: 4rem;
    top: .4em;
	/* margin-right:-9em; */
    left: calc(100vw - 4em);
	position: absolute;

	animation-duration: 2s;
	animation-name: apparition;
	animation-fill-mode: forwards; 
	width: 200px;
}
.burger-img {
	width: 3em;
	height: auto;
	display: block;
}
.buttons {
	display: none;
	position: absolute;
	/* top: 3em; */
	right: 10em;
	/* top: 1em; */
	/* width: 100%; */
	/* height: 100%; */
	justify-content: left;
	align-items: left;
	gap: 10px;
	flex-direction: column;
	/* background: rgba(255, 255, 255, 0.8); */
	z-index: 1;
	padding: 10px;
	background-color: whitesmoke;
	border-radius: 20px;
}
/* .burger-img:hover{
	opacity: 0;
} */
.burger:hover .buttons,
.burger:focus-within .buttons {
	display: flex;
}

/* .button {
	padding: 10px;
	background-color: #2196F3;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
} */

.button {
	box-shadow:inset 0px 0px 15px 3px #ffffff;
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	background-color:#ffffff;
	border-radius:17px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	/* font-family: 'Lato', sans-serif; */
	font-size:15px;
	padding:6px 13px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.button:hover {
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;
}
.button:active {
	position:relative;
	top:1px;
}




/* DARK / white MODE */
body.dark-theme{
	background-color: var(--colorFontDarkMode);
	color: white;
}
body.white-theme{
	background-color: inherit;
}

p.dark-theme{
	color: white;
}
p.white-theme{
	color: inherit;
}


header.dark-theme{
	background-color: var(--colorHeaderDarkMode);
}

header.white-theme{
	background-color:inherit;
}


footer.dark-theme{
    background-color: var(--colorFooterDarkMode);
}


/* footer.white-theme{
    background-color: inherit;
} */

.form-input > input.dark-theme{
	color: var(--colorinputDarkMode);
	border-color:var(--colorinputDarkMode);
}

.form-input > input.white-theme{
	color:inherit;
	border-color:inherit;
}


.form-input > textarea.dark-theme{
	color: var(--colorinputDarkMode);
	border-color:var(--colorinputDarkMode);
}

.form-input > textarea.white-theme{
	color:inherit;
	border-color:inherit;
}