:root {/*
  --sombre: black;
  --gris: rgb(145, 145, 145);
  --violet: black;*/
  --margin: 15px;
  --margin-bottom:25px;
}


@font-face {
    font-family: 'Fredoka';
    src: url('Fredoka-SemiBold.eot');
    src: url('Fredoka-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('Fredoka-SemiBold.woff2') format('woff2'),
        url('Fredoka-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fredoka';
    src: url('Fredoka-Regular.eot');
    src: url('Fredoka-Regular.eot?#iefix') format('embedded-opentype'),
        url('Fredoka-Regular.woff2') format('woff2'),
        url('Fredoka-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



body{
	padding: 0px;
	margin: 0px;
	font-family: 'Fredoka'; 
	letter-spacing: 0,3px;
	font-size: .65em;
	color: black;
	background-color: rgba(246, 198, 210, 100);

	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}


::-moz-selection {
  color: var(--violet);
  background: transparent;
}

::selection {
  color: var(--violet);
  background: transparent;
}

h1, h2, h3{
	font-size: inherit;
	font-style: inherit;
	color: inherit;
	font-weight: inherit;
}

img{
	vertical-align: middle;
}

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


/* MENU */

#information {
	background-color: blueviolet;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 99999;

}

#portrait {
	position: fixed;
	float: right;
	width: 100%;
	right: 400px;
	display: flex;
	top:140px;
	justify-content: right;

}

#portrait img{
	width: 25%;


}

#nom {
	position: fixed;
	left: 0;
	right: 0;
	display: flex;
	justify-content: left;
	z-index: 99;
	font-size: 2.0em;
	font-weight: 600;
}


#nom h1{

	margin-left: 30px;
	margin-top:  10px;
	letter-spacing: 0,9px;
	font-size: 2.8em;
	color: white;

}


.versbio, .versportfolio, .verscontact, .nom {
	cursor: pointer;
}



a:hover {
    color: rgb(255, 132, 0, 1.0);
}

.nom span{
	color: rgb(150, 150, 150);
}

#menu{
	position: fixed;
	bottom: 0 !important;
	left: 0;
	right: 0;
	height: 30%;
	/*background-color: blueviolet*/
}


#bio {
	position: fixed;
	bottom: 5.2em;
	left: 0;
	right: 0;
	display: flex;
	margin-left: 30px;
	font-size: 2.0em;
}

#bio h1{

	margin-right: 10px;
	margin-top: 0px;
	letter-spacing: 0,9px;
	font-size: 2.0em;
	color: white;

}


#portfolio {
	position: fixed;
	bottom: 2.6em;
	left: 0;
	right: 0;
	display: flex;
	margin-left: 30px;
	font-size: 2.0em;
}

#portfolio h1{

	margin-right: 10px;
	margin-top: 0px;
	letter-spacing: 0,9px;
	font-size: 2.0em;
	color: white;

}

#contact {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	margin-left: 30px;
	font-size: 2.0em;
}

#contact h1{

	margin-right: 10px;
	margin-top: 0px;
	letter-spacing: 0,9px;
	font-size: 2.0em;
	color: white;

}






/*MEDIA QUERIES*/

/*4*/
@media all and (min-width: 1951px){

}

/*3*/
@media all and (min-width: 1441px) and (max-width: 1950px){



}

/*2*/
@media all and (min-width: 641px) and (max-width: 1440px){

#portrait {
	top:100px;

}


.blocbio{
	width: 100%;
	height: calc(30vh);
	position: fixed;
	bottom: 0;
	left: calc(85vh)!important;
	right: 0;
	/*background-color: rgba(246, 198, 210, 100);*/
	cursor: url("../assets/cursor_close.png") 6 6, w-resize;
	/*transform: translate(0px, 0px);*/
	transition: all .4s;
}


.blocbio h2, .blocbio h3{
	cursor: initial;
	width: 800px;
	max-width: 100%;
	margin-top: 5.2vh!important;
	font-size: 1.55em !important;
	align-self: center;

	color: white;
}

.blocbio h2, .blocbio h3{
	color: white;
}







.blocportfolio{
	width: 100%;
	height: calc(30vh);
	position: fixed;
	bottom: 0;
	left: calc(45vh);
	right: 0;
	/*background-color: rgba(246, 198, 210, 100);*/
	cursor: url("../assets/cursor_close.png") 6 6, w-resize;
	/*transform: translate(0px, 0px);*/
	transition: all .4s;
}


.blocportfolio h2, .blocportfolio h3{
	color: white;
	font-size: 2.2em;
	margin-top: calc(5vh) !important;
	cursor: initial;
}







.bloccontact{
	width: 100%;
	height: calc(30vh);
	position: fixed;
	bottom: -130px;
	left: calc(45vh);
	right: 0;
	/*background-color: rgba(246, 198, 210, 100);*/
	cursor: url("../assets/cursor_close.png") 6 6, w-resize;
	/*transform: translate(0px, 0px);*/
	transition: all .4s;
}

.bloccontact h2, .bloccontact h3{
	cursor: initial;
	width: 800px;
	max-width: calc(100% - 200px);
	margin-top: calc(5vh) !important;
	font-size: 2.2em;
	align-self: center;

	color: white;
}

.bloccontact h2, .bloccontact h3{
	color: white;
}

}

/*1*/
@media all and (max-width: 640px){

	/*ACTIONS*/


.blocbio{

	width: 90% !important;
	position: fixed;
	height: 60vh !important;
	left: 20px!important;
	top: 20px;
	background-color: rgba(246, 198, 210, 100);
	overflow: hidden;
}

.blocbio h2, .blocbio h3{
	font-size: 1.5em !important;
	color: white;
}






.blocportfolio{
	width: 15vh !important;
	height: 10vh!important;
	position: fixed;
	bottom: 150px !important;
	left: 20px!important;
	transition: all .4s;
}


.blocportfolio h2, .blocportfolio h3{
	font-size: 1.5em !important;
	color: white;
}

.bloccontact{
	width: 60vh !important;
	height: 10vh!important;
	position: fixed;
	bottom: 150px !important;
	left: 26vh!important;
	transition: all .4s;

} 


.bloccontact h2, .bloccontact h3{
	font-size: 1.5em !important;
	color: white;
}









#nom {
	position: fixed;
	left: 0;
	right: 0;
	display: flex;
	justify-content: left;
	z-index: 99;
	font-size: 1.2em ;
	font-weight: 600;
}

#nom h1{

	margin-left: 20px;
	margin-top:  10px;
	letter-spacing: 0,9px;
	font-size: 2.8em;
	color: white;

}

#portrait {
	position: fixed;
	left: 0;
	right: 0;
	top: 80px !important;

	justify-content: center;

}
#portrait img{
	width: 80%;
}


#bio {
	position: fixed;
	bottom: 3.6em;
	left: 0;
	right: 0;
	display: flex;
	margin-left: 20px;
	font-size: 1.5em;
}

#bio h1{

	margin-right: 10px;
	margin-top: 0px;
	letter-spacing: 0,9px;
	font-size: 1.5em;
	color: white;

}


#portfolio {
	position: fixed;
	bottom: 1.8em;
	left: 0;
	right: 0;
	display: flex;
	margin-left: 20px;
	font-size: 1.5em;
}

#portfolio h1{

	margin-right: 10px;
	margin-top: 0px;
	letter-spacing: 0,9px;
	font-size: 1.5em;
	color: white;

}

#contact {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	margin-left: 20px;
	font-size: 1.5em;
}

#contact h1{

	margin-right: 10px;
	margin-top: 0px;
	letter-spacing: 0,9px;
	font-size: 1.5em;
	color: white;

}




}


/* À propos */
/* À propos */
/* À propos */

.inactive{
	/*transform: translate(0px, -10px);*/
	opacity: 0;
	pointer-events: none;
	transition: all .4s;
}


.blocbio{
	width: 100%;
	height: calc(30vh);
	position: fixed;
	bottom: 0;
	left: calc(90vh);
	right: 0;
	/*background-color: rgba(246, 198, 210, 100);*/
	cursor: url("../assets/cursor_close.png") 6 6, w-resize;
	/*transform: translate(0px, 0px);*/
	transition: all .4s;
}


.blocbio h2, .blocbio h3{
	cursor: initial;
	width: 800px;
	max-width: 100%;
	margin-top: calc(9vh);
	font-size: 1.65em;
	align-self: center;

	color: white;
}

.blocbio h2, .blocbio h3{
	color: white;
}







.blocportfolio{
	width: 100%;
	height: calc(30vh);
	position: fixed;
	bottom: 0;
	left: calc(50vh);
	right: 0;
	/*background-color: rgba(246, 198, 210, 100);*/
	cursor: url("../assets/cursor_close.png") 6 6, w-resize;
	/*transform: translate(0px, 0px);*/
	transition: all .4s;
}


.blocportfolio h2, .blocportfolio h3{
	color: white;
	font-size: 2.2em;
	margin-top: calc(16vh);
	cursor: initial;
}







.bloccontact{
	width: 100%;
	height: calc(30vh);
	position: fixed;
	bottom: -130px;
	left: calc(50vh);
	right: 0;
	/*background-color: rgba(246, 198, 210, 100);*/
	cursor: url("../assets/cursor_close.png") 6 6, w-resize;
	/*transform: translate(0px, 0px);*/
	transition: all .4s;
}

.bloccontact h2, .bloccontact h3{
	cursor: initial;
	width: 800px;
	max-width: calc(100% - 200px);
	margin-top: calc(9vh);
	font-size: 2.2em;
	align-self: center;

	color: white;
}

.bloccontact h2, .bloccontact h3{
	color: white;
}