/*font-family: 'Open Sans', sans-serif;
font-family: 'Rubik', sans-serif;
font-family: 'Lobster', cursive;
font-family: 'Pacifico', cursive;
font-family: 'Acme', sans-serif;
font-family: 'Permanent Marker', cursive;*/

@font-face {
  font-family: BadlyStamped;
  src: url("../assets/BadlyStamped.ttf");
}

@font-face {
  font-family: typwrng;
  src: url("../assets/typwrng.ttf");
}

@font-face {
  font-family: RraType;
  src: url("../assets/vVWweRraType!.ttf");
}
/* ------------------------------------------- */
/* Main things */

html {
	scroll-behavior: smooth;
}

body{
	background-color:black;
	color:white;
	font-family: 'Open Sans', sans-serif;
	margin:0px;
	padding:0px;
}

footer{
	display: flex;flex-direction: row;justify-content: center;
}

div{
	padding:1px;
	margin-top:-1px;
	/* Changer ICI pour voir les gouttes ! */
	/* opacity:1; */
}

cite{
	font-weight: normal;
	font-family: monospace;
}

.startHidden{
	display:none;
}

.hidden{
	display:none;
}

.bgt{
	background-color: rgba(0,0,0,0);
}


.noselect {
	user-select:none;
	outline:0;
}

button:focus {
	outline:0;
	-webkit-tap-highlight-color: transparent;
}

.page{
	/*min-height:100vh;*/
	/*border-bottom:2px dashed grey;*/
}

.mobile-sidebar-button{
	position:fixed;
	top:0px;
	left:0px;
	z-index:9012;
	border-bottom-right-radius:30px;
}

#mobile_sidebar{
	z-index:9013;
}

#pc-sidebar{
	background-color: rgba(0,0,0,0);
}

#pc_sidebar_spaceholder{
	width:200px;padding-top;
}

#pageMe-spaceholder{
	width:100%;height:4vh;
}

#pageMe-desc{
	width:100%;
}

#pageMe-desc-text{
	max-width:650px;font-family: 'McLaren', cursive;
}

#avatar{
	width:40vh;height:40vh;position:relative;left:50%;transform: translateX(-50%);top:50%;
}
/* ------------------------------------------- */
/* Custom scrollbars generated using http://webkit-scroll-gen.sourceforge.net/ */

div::-webkit-scrollbar {
  width: 23px;
  height: 23px;
}
div::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
div::-webkit-scrollbar-thumb {
  background: #808080;
  border: 0px none #ffffff;
  border-radius: 100px;
}
div::-webkit-scrollbar-thumb:hover {
  background: #666666;
}
div::-webkit-scrollbar-thumb:active {
  background: #484848;
}
div::-webkit-scrollbar-track {
  background: #ffffff;
  border: 0px none #ffffff;
  border-radius: 0px;
}
div::-webkit-scrollbar-track:hover {
  background: #ffffff;
}
div::-webkit-scrollbar-track:active {
  background: #ffffff;
}
div::-webkit-scrollbar-corner {
  background: transparent;
}

body::-webkit-scrollbar {
  width: 23px;
  height: 23px;
}
body::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
body::-webkit-scrollbar-thumb {
  background: #808080;
  border: 0px none #ffffff;
  border-radius: 100px;
}
body::-webkit-scrollbar-thumb:hover {
  background: #666666;
}
body::-webkit-scrollbar-thumb:active {
  background: #484848;
}
body::-webkit-scrollbar-track {
  background: #ffffff;
  border: 0px none #ffffff;
  border-radius: 0px;
}
body::-webkit-scrollbar-track:hover {
  background: #ffffff;
}
body::-webkit-scrollbar-track:active {
  background: #ffffff;
}
body::-webkit-scrollbar-corner {
  background: transparent;
}

/*-------------------------------------------- */
/* Custom slider found on https://codepen.io/noahblon/pen/OyajvN */

input[type=range] { 
    margin: auto;
    -webkit-appearance: none;
    position: relative;
    overflow: hidden;
    height: 30px;
    width: 200px;
    cursor: pointer;
    border-radius: 0; /* iOS */
}

::-webkit-slider-runnable-track {
    background: #ddd;
}

::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; /* 1 */
    height: 40px;
    background: #fff;
    box-shadow: -100vw 0 0 100vw dodgerblue;
    border: 2px solid #999; /* 1 */
}

::-moz-range-track {
    height: 40px;
    background: #ddd;
}

::-moz-range-thumb {
    background: #fff;
    height: 40px;
    width: 20px;
    border: 3px solid #999;
    border-radius: 0 !important;
    box-shadow: -100vw 0 0 100vw dodgerblue;
    box-sizing: border-box;
    color:rgb(255,0,255);
}

::-ms-fill-lower { 
    background: dodgerblue;
}

::-ms-thumb { 
    background: #fff;
    border: 2px solid #999;
    height: 40px;
    width: 20px;
    box-sizing: border-box;
}

::-ms-ticks-after { 
    display: none; 
}

::-ms-ticks-before { 
    display: none; 
}

::-ms-track { 
    background: rgb(255,0,0);
    color: transparent;
    height: 40px;
    border: none;
}

::-ms-tooltip { 
    display: none;
}

/* ------------------------------------------- */
/* Sidebar stuff */

.w3-sidebar{
	background-color:black !important;
}

.sidebar{
	overflow-x:hidden;
	border-radius:0px 0px 30px 30px;
	border:3px solid white;
	background-color:black;
	color:white;
	min-height:5vh;
}

.sidebar-wrapper{
	height:95vh;
}

.sidebar-item{
	background-color:rgba(255,255,0,0);
	opacity: 0.5;
	cursor:pointer;
	transition: opacity 0.5s;
	font-family: 'Permanent Marker', cursive;
	user-select: none;
	z-index:9000;
}

.sidebar-item:hover{
	opacity: 1;
}

.sidebar-item:active{
	font-weight: bolder;
}

.sidebar-button{
	background-color:rgba(0,0,0,0);
	border-radius:0px 0px 30px 30px;
	/*position:absolute;
	bottom:5px;*/
	z-index:9001;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.sidebar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
.sidebar {
  -ms-overflow-style: none;
}

.icon{
	width:33%;
}

.copy-icon{
	margin-left:5px;
}

.CV-icon{
	color:rgb(90,90,255);
}

/* ------------------------------------------- */
/* Page ME */

#pageMe{

}

.spcard{
	position:static;
}

/* ------------------------------------------- */
/* Cookie Footer */

#cookieFooter{
	position:fixed;
	bottom:0px;
	left:0px;
	z-index:9420;
	width:100%;
	max-height:200px;
	background-color: grey;
	border:2px dashed yellow;
}

#cookieFooter img{
	float:left;
	margin:5px;
}

/* ------------------------------------------- */
/* Projects Hands Slideshow */

#slideShow{
	width: 100%;
	height: 80vh;
}

#clapper{
	max-width: 80vh;
	height: 100%;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	/*background-color: red;*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.slide{
	background-color: black;
	border:5px solid #673ab7;
	/*border:5px solid blue;*/
	border-radius:100%;
	width:fit-content;
	width:100%;
	height:80%;
}

#arrows{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top:10px;
	color:slateblue;
	font-family:Lobster;
	font-weight:bold;
}

.arrowDiv{
	position:relative;
	max-width:300px;
	padding-right:10px;
}

.arrowText{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}

.arrow{
	width:100%;
}

/* ------------------------------------------- */
/* Parcours Theatre */

.theatre-background{
	background-color: black;
	max-width:1000px;
	
}

.theatre{
	height:70vh;
	max-width:1000px;
	border-radius:50px 50px 0px 0px;
}

.theatre a{
	color:steelblue;
}

.theatre ul{
	font-family: 'Short Stack', cursive;
}

.curtains{
	/*background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.6) 33%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 100%);*/
	/*background-color:rgba(0,0,0,0); 30% 0.5  25% 0  35% 1*/ 
	
}

.curtains-left{
	position:absolute;
	/*width:10vw;*/
	top:25%;
	left:0;
	height:75%;
	width:19.2%;
	z-index:9012;
	background-color: rgba(0,0,0,0.7);
	border-bottom-right-radius: 30%;
}

.curtains-right{
	position:absolute;
	/*width: 10vw;*/
	top:25%;
	right:0;
	height:75%;
	width:19.2%;;
	z-index:9012;
	background-color: rgba(0,0,0,0.7);
	border-bottom-left-radius: 30%;
}

.curtains-up{
	position:absolute;
	top:0;
	left:0;
	height:25%;
	width:100%;
	z-index:9012;
	background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
}

#theatre-ground{
	height:65px;
	position:absolute;
	bottom:-5%;
	left:-5%;
	background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(50,25,0,1) 10%, rgba(50,25,0,1) 60%, rgba(0,0,0,0) 100%);width:110%;
}

.act{
	background-color:black;
	padding-top:20vh;
	padding-left:20%;
	padding-right:20%;
	padding-bottom:50px;

	display:table;
	margin-top:0vh;
	width:100%;
	min-height:75vh;
}

.act img{
	max-width:100%;

}

#act-buttons{
	padding:0;
}

.act-button{
	width:100%;
}

.act-pnud{
	border:none;
	border-radius: 5px;
	z-index:9020;
	position:absolute;
	color:white;
	cursor:pointer;
}
.act-pnud:hover{
	border:1px solid white;
}


.act-previous{
	top:50%;
	left:0;
	transform: translateY(-50%);
}

.act-next{
	top:50%;
	right:0%;
	transform: translateY(-50%);
}

.act-up{
	top:0%;
	left:50%;
	transform: translateX(-50%);
}

.act-down{
	bottom:0%;
	left:50%;
	transform: translateX(-50%);
}

.act-pn:active{
	background-color: grey;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.theatre::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
.theatre {
  -ms-overflow-style: none;
}


.w3-button{
	border-radius:5px !important;
}

.w3-button:active{
	background-color: rgba(0,0,0,0) !important;
}


.act p{
	font-size:large;

		font-family: 'Short Stack', cursive;
}

/* ------------------------------------------- */
/* Coin */

.coin{
	width:40vh;
	position: relative;
}

.coin-side{
	border-radius:100%;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:50%;
	transform: translateX(-50%);
	user-select: none;
}

.coin-tail{
	width: 0;
	width:content;
	display: hidden;
}

.coin-front{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity: 0;
}

.flex-center-column{
	display:flex;
	flex-direction: column;
	align-items: center;
}

/* ------------------------------------------- */
/* Colors */

.myBlue{
	color:rgb(67,143,194);
}

.myTeal{
	color:rgb(85,158,131);
}

.myOrange{
	color:rgb(194,110,85);
}

.myYellow{
	color:rgb(155,153,73);
}

.myRed{
	color:rgb(181,102,102);
}

.myPurple{
	color:rgb(150,100,150);
}

.myGreen{
	color:rgb(100,150,100);
}

.myGrey{
	color:rgb(150,150,150);
}

/* ------------------------------------------- */
/* Animated Background */

.dropStyles{
	/*margin:0;
	padding:0;
	display: flex;
	align-items: center;
	justify-content: center;*/
}

.dropStyleSquare{
	width:15vh;
	height:15vh;
	border: 1px solid grey;
	display:inline-flex;
	transition: font-size 0.35s, border 0.35s;
	border:3px solid black;
	border-radius:5px;
	position: relative;
}

.dropStyleSquare:hover{
	font-size:large;
	border:3px solid white;
}

.dropStyleSquare span{
	height:fit-content;
	position:absolute;
	background-color: grey;
	padding:2px;
	border-radius:15%;
	z-index: 2;
}

.dropStyleSquare img{
	width:100%;
	height:100%;
	position: absolute;
	top:-1px;
	z-index: 1;
}

.dropForegroundStyle{
	width:15vh;
	height:15vh;
	border: 1px solid grey;
	transition: font-size 0.35s, border 0.35s;
	border:3px solid black;
	border-radius:5px;
}

.dropForegroundStyle:hover{
	border:3px solid white;
}

.dropSlider{
	width:100% !important;
}

.selectedStyle{
	border:3px solid rgb(30,144,255) !important;
}