@font-face{
    font-family: "Fredoka";
    src: url("font/Fredoka/Fredoka-VariableFont_wdth,wght.ttf");
}
html {
  scroll-behavior: smooth;
  font-family: "Helvetica Neue";
}
body {
    
}

main {
    padding: 0% 10%;
background-color: #EBEBEB;
}

header {
	padding-top: 50px;
	width: 100%;
	height: 200px;
	background-color: #D4F2F5;
    text-align: center;
	}

header h1 {
    font-family: "Fredoka";
    font-size: 400%;
    transition-duration: 0.3s;
    color:#0094A0;
    text-decoration: none;
}
header h1:hover {
    transform:scale(1.1);
    transition-duration: 0.2s;
}

nav{
	display: flex;
    background-color: #0094A0;
    width: 100%;
    height: 80px;
    z-index: 10;
}
nav ul {
	display: flex;
	justify-content: center;
	padding: 0;
}
nav ul li{
	margin:28px 10px;
	display: inline; /*enlève les puces*/
}
nav ul li ul {
    display: none;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    padding: 0px 18px;
}
nav ul li a{
    background-color: white;
    border-radius: 10px;
    font-weight: bold;
	padding: 16px 47px;
    color: #05474E;
}
nav ul li ul li {
	padding-top: 18px;
	text-align: center;
	margin: 25px 10px 0px 10px;
}
nav ul li ul li a{
padding: 16px 25px;
background-color: #FEE4F0;
}
nav ul li a:hover {
    text-decoration: none;
    color: #022A2E;
    background-color: #c2f3fc;
}
nav ul li:hover ul{
    display: flex;
    /*hheh*/
}

#acc{
    height: auto;
}
#acc #contenant-acc {
	display: flex;
	justify-content: center;
	padding-top: 40px;
}
.acc-title {
	margin-bottom: 80px;
}
.acc-title div h2{
    color: #09575f;
    font-weight: bold;
    margin: 10px auto;
}
.acc-title div h3{
    color: #09575f;
    margin: 0 auto;
}
.acc-title #photo{
	display: block;
    margin-left: auto;
    margin-right: auto;
	margin-top: 30px;
}
.acc-title #photo2{
	display: block;
	width: 25%;
    margin-left: auto;
    margin-right: auto;
}
.acc-title div {
	text-align: center;
	margin: 50px;
	margin-top:40px;
}


#apr{
    height: auto;
}
#apr #contenant-apr {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 40px;
}
.bvn {
	display: flex;
	padding: 20px 20px 80px 20px ;
	justify-content: center;
}
.bvn div h2{
    display: flex;
    color: #09575f;
    font-weight: bold;
}
.bvn #photo{
	height: 450px;
}
.bvn div {
	width: 500px;
	margin: 0 60px 0 60px;
}

.contact {
text-align: center;
	padding: 20px 0;
}

.contact h2 {
color: #09575f;
    font-weight: bold;
}

#cv_dl_contenant {
	width: auto;
	height: auto;
	padding-top: 10px;
	text-align: center;
}
#cv_dl{
	text-decoration: none;
	color: #09575f;
	background-color: white;
	font-family: "Fredoka";
	font-size: 200%;
    text-align: center;
    padding: 10px 20px;
	border-radius: 10px;
}
#cv_dl:hover {
	background-color: lightgrey;
}
#contenant-exp{
padding: 20px;
padding-top: 40px;
}
.exp-head{
	color:#09575f;
	width: 60%;
	height: auto;
	padding: 20px;
	margin: 0 auto;
}
.exp-head h2{
	font-weight: bold;
}
.exp-box{
	width: 60%;
	height: auto;
	padding: 20px;
	margin: 20px auto;
	border-style: solid;
	border-color: lightgrey;
	border-width: thin;
	background-color: white;
}

.exp-date{
	color:#636363;
	font-weight: 600;
}
.exp-date b{
	color:#636363;
	font-weight: bold;
}

.exp-title{
	color:#09575f;
}

#butterfly{
	top: 300px;
	left: 30%;
}
#cv-exp{
}

#cv-exp p a{
    text-decoration: none;
    color: #ACDCE0;
}
.cv-div {
	width: 60%;
	height: auto;
	padding: 20px;
	margin: 5% auto;
	border-style: solid;
	border-color: grey;
	border-width: thin;
	border-radius: 10px;
}

#portfolio{
    background-color: white;
    padding:40px 80px;
}
#title {
	text-align: center;
    font-family: "Fredoka";
    margin: 0 auto;
    color: #09575f;
    font-size: 250%;
    font-weight: normal;
    margin-bottom: 20px; 
}

#portfolio #ligne{
	text-align: center;
	margin: 0 auto;
	width: 50%;
}
#portfolio #cont{
	text-align: center;
}
.center{
	width: 100%;
	text-align: center;
}
.moitié{
	width:49%;
}
#portfolio #cont .contenant-preview{
	display: inline-block;
	justify-content: center;
	vertical-align: middle;
}
#portfolio #ligne div{
	display: inline-block;
	margin: 10px 20px;
    cursor: pointer;
}
#portfolio .contenant-preview{
	
	margin: 20px;
}
#portfolio .contenant-preview .preview{
	transition-duration: 0.3s;
	height: 200px;
	width: 270px;
    border-radius: 15px;
}
.colo{
	display: none;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 15px;
	height: 100%;
	width: 100%;
}
.box-tag{
text-align: center;
height: auto;
padding: 19% 0;
}
 .tag-title{
 	color: #b5e6eb;
 	font-weight: bold;
 	cursor: pointer;
 }
 .tag-date{
 	color: white;
 }
.tag{
 	color: #b5e6eb;
 }
.tag p {
	display: inline;
    margin: 0 5px 0 5px;
    transition-duration: 0.3s;
}

.tag p:hover {
	color:white;
    transition-duration: 0.2s;
}
#portfolio .contenant-preview .preview:hover {
    transform:scale(1.1);
    transition-duration: 0.2s;
}
#portfolio .contenant-preview :hover .colo{
    display: block;
}
#portfolio #ligne div:hover {
    transform:scale(1.1);
    transition-duration: 0.2s;
}

#competences {
	background-color: white;
	height: auto;
}
#competences h2 {
	font-family: "Fredoka";
	padding: 5% 0% 0% 10% ;
	display: flex;
}
.contenant-comp {
	display: flex;
	flex-wrap: wrap;
	padding: 1% 5%;
	justify-content: center;
}
.logiciel {
	width: 370px;
	display: flex;
	padding: 20px;
	margin: 20px;
	background-color: white;
	border-style: solid;
	border-color: lightgrey;
	border-width: thin;
	border-radius: 10px;
}
.logiciel img {
	width: 66px;
	height: 66px;
}
.logiciel h3 {
	margin-left: 15px;
	margin-bottom: 0;
	font-family: "Fredoka";
}
.logiciel p {
	margin-left: 15px;
}
.logiciel div ul li{
	color: grey;
}

#dessins{
    background-color: white;
    height: auto;
    margin: 0 auto;
}

.contenant{
    padding:10px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.contenant .description{
	background-color: #FEE4F0;
    padding: 20px 30px;
    margin: 30px auto;
    width: 90%;
    height: auto;
    border-radius: 10px;
}
.contenant .description h4{
	font-family: "Fredoka";
	font-size: 200%;
}
.mosaique {
    max-width: 100%;
    margin: 0 auto;
}
#webbel2 img {
	width: 49%;
	height: auto;
}

#xun {
	float: left;
	width: 21%;
	height: auto;
}
#xdeux{
	float: left;
	width: 79%;
	height: auto;
}
#xtrois {
	float: left;
	width: 20%;
	height: auto;
}
#xquatre {
	float: left;
	width: 40%;
	height: auto;
}
#xcinq {
	float: left;
	width: 20%;
	height:auto;
}
#xsix {
	float: left;
	width: 21%;
	height: auto;
}
#xsept {
	float: left;
	width: 40%;
	height: auto;
	margin-left: 10%;
}
#xhuit {
	float: left;
	width: 20%;
	height: auto;
}
#aun {
	float: left;
	width: 21%;
	height: auto;
}
#adeux{
	float: left;
	width: 79%;
	height: auto;
}
#atrois {
	float: left;
	width: 60%;
	height: auto;
}
#aquatre {
	float: left;
	width: 40%;
	height: auto;
}
#acinq {
	float: left;
	width: 40%;
	height:auto;
}
#asix {
	float: left;
	width: 21%;
	height: auto;
}
#asept {
	float: left;
	width: 40%;
	height: auto;
	margin-left: 10%;
}
#ahuit {
	
	width: 50%;
	height: auto;
}


#projets{
    background-color: white;
    height: 100%;
}

#bun {

	width: 49%;
	height: auto;
}
#bdeux{

	width: 49%;
	height: auto;
}
#btrois {

	width: 49%;
	height:auto;
}
#bquatre {

	width: 49%;
	height: auto;
}
#bcinq {

	width: 60%;
	height:auto;
}
#bsix {

	width: 40%;
	height: auto;
}
#bcommentaire {

	width: 100%;
}
#bsept {

	height: 235px;
}

#bhuit{

	height: 235px;
}
#bneuf{
	
	width: 33%;
	height: auto;
}
#bdix{
	
	width: 33%;
	height: auto;
}
#bonze{
	
	width: 33%;
	height: auto;
}
#bdouze{
	width: 33%;
	height: auto;
}
#btreize{
	
	width: 33%;
	height: auto;
}

#bquatorze {
	float: left;
	width: 40%;
	height: auto;
	padding-right: 5%
}
.bquinze {
	float: left;
	width: 55%;
	height: auto;
}

#stages{
    background-color: white;
    height: 100%;
}

#cun {
	float: left;
	width: 25%;
	height: auto;
}
#cdeux{
	float: left;
	width: 25%;
	height: auto;
}
#ctrois {
	float: left;
	width: 25%;
	height:auto;
}
#cquatre {
	float: left;
	width: 16%;
	height: auto;
}
#ccinq {
	float: left;
	width: 16%;
	height:auto;
}
#csix {
	float: left;
	width: 16%;
	height: auto;
}
#ccommentaire {
	float: left;
	width: 100%;
}
#csept {
	float: left;
	width: 25%;
}
#chuit {
	float: left;
	width: 50%;
}
.cneuf {
	float: left;
	width: 25%;
}
.ctreize {
	float: left;
	width: 50%;
}
#ecole{
    background-color: white;
    height: 100%;
}

#dun {
	float: left;
	width: 50%;
	height: auto;
}
#ddeux{
	float: left;
	width: 65%;
	height: auto;
}
#dtrois {
	float: left;
	width: 35%;
	height:auto;
}
#dcommentaire {
	float: left;
	width: 100%;
}
#dquatre {
	float: left;
	width: 90%;
	height: auto;
}
#dcinq {
	float: left;
	width: 80%;
	height:auto;
}
#dsix {
	float: left;
	width: 30%;
	height: auto;
}
#dsept {
	float: left;
	width: 10%;
	height: auto;
}
#dhuit {
	float: left;
	width: 25%;
	height: auto;
}
#dneuf {
	float: left;
	width: 30%;
	height: auto;
}
.social {
	background-color: white;
}
.social ul {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}
.social ul li{
	position: relative;
	list-style: none;
	margin: 10px;
}
.social ul li a{
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin:10px;
	text-decoration: none;
	font-size: 20px;
	border-radius: 50%;
	box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2),
				 2px 2px 5px rgba(0,0,0,0.2);
	transition: 0.5s;
	border-radius: 50%;
}
.social ul li a:hover{
	transform:translateY(-20px);
	box-shadow:  inset -1px -1px 2px rgba(10,0,0,0.2),
				 2px 24px 10px rgba(0,0,0,0.2);
}
.social ul li a .fa{
	position: relative;
	color:#fff;
	z-index: 1;
}
.social ul li:nth-child(1) a{
	background: #1877f2;
}
.social ul li:nth-child(2) a{
	background: #1da1f2;
}
.social ul li:nth-child(3) a{
	background: #c43535;
}
.footer {
	background-color: white;
}
.mention {
	text-align: center;
	padding: 0 10px 10px 10px;
	background-color: white;
}