@charset "utf-8";

@font-face {
  font-family: exp;
  src: url('../fonts/expanse.woff2');
}
@font-face {
  font-family: gaya;
  src: url('../fonts/gayatri.woff2');
}
@font-face {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

*{
    box-sizing: border-box;
}

html{
	width: 100vw;
	overflow-x: hidden;
}

body{
	background-color: #0C1421;
	margin: 0;
	padding: 0;
	height: 100vh;
	color: white;
}

a{
	color: #576f92;
	text-decoration: none;
}
a:hover{
	color: white;
}

header{
	height: 10vh;
}

.carte{
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	height: 90vh;
}

.carte canvas{
	border: 1px solid #2E3A4D; 
}

img{
	width: 100%;
}
p{
	margin: 0;
}
input{
	background-color: transparent;
	border: none;
	height: 1em;
}
input:focus-visible, input:hover, select:hover{
	outline: none;
	border-bottom: 1px solid black;
}

/*utils*/
.exp{
	font-family: exp;	
}
.gaya{
	font-family: gaya;		
}
.rel{
	position: relative;
}
.abs{
	position: absolute;
}
.topSp{
	margin-top: 5rem;
}

/*menu*/
.menu-top a, .menu-top a:visited{
	text-transform: capitalize;
}
.menu-top .current-menu-item a{
	color: white;
}






/*header*/
header{
	background-color: #304868;
}
header .logo{
	text-transform: uppercase;
	font-size: 1.32rem;
}
header .logo p:first-child{
	font-size: 2.5rem;
	line-height: 2.5rem;
}

/*clocks*/
.clock{
	width: 12%;
}
.clock .image{
	width: 85%;
}
.clock .nom{
	background-color: transparent;
}

/*job boards*/
.job-board{
	border-right: 1px solid #2D394B;
}
.job-board:last-child{
	border-right: none;
}
.job-board .logo{
	width: 35%;
}
.job-board .logo img{
	filter: invert(46%) sepia(7%) saturate(1999%) hue-rotate(177deg) brightness(89%) contrast(92%);
}
.job-board h1{
	font-size: 2rem;
}
.job .bordd{
	border: 1px solid #576f92;
}
.job .borddl{
	border-left: 2px solid white;
}
.job .diff{
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
.job .titre{
	height: auto;
	font-size: 1.5rem;
}
.job .pay{
	height: 50px;
	width: 50px;
}
.job .line{
	width: 50px;
	height: 1px;
}
.job .client .titre{
	margin-left: 100px;
	font-size: 1.2rem;
}


/******************/
/*feuille perso*/
/******************/
.sheet-bgr{
	background-image: url('../pics/fond.jpg');
	background-size: cover;
	height: 92vh;
	margin-left: -12px;
	margin-right: -12px;
}

.t-libre{
	font-size: 1.7rem;	
}
select{
	background-color: transparent;
	border: none;
}
.char .nom{
	min-width: 107px;
}
.blok{
	width: 280px;
}
.blok.large{
	width: 800px;
}
.valeur{
	color: black;
	background-color: white;
	padding-top: 2px;
	height: 40px;	
	text-align: center;
}
.double, .titre, .stat{
	height: 40px;
}
.double .right{
	left: -45px;
}
.nom{
	left: -27px;
	top: 1px;
	color: white;
	background-color: black;
	padding-top: 3px;
	padding-left: 1rem;
	padding-right: 2rem;
	height: 40px;
}
.nom.white{
	color: black;
	background-color: white;
}
.bg-w{
	background-color: white;
}
.double .valeur{
	left: -20px;
	top: 1px;
}
.hex.fin{
	right: 40px;
}
.hex .bord path {
/*  stroke: #646464;
  stroke-width: 1px;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;*/
  outline: 1px solid red;
  outline-offset: 2px;
}
.stat{
	margin-bottom: 2px;
	font-size: 1.5rem;
}
.stat .right{
	left: -65px;
}
.stat .hex.fin{
	right: 2px;
}
.stat input{
	width: 25px;
}
.stat .nom{
	padding-right: 0;
	padding-left: 0.5rem;
	width: 170px;
}
.stat .valeur{
	right: -35px;
	bottom: -2px;
	z-index: 99;
	background-color: transparent;
}
.stat .bonus{
	right: 77px;
	top: -21px;
}
.stat .bonus .valeur{
	left: -35px;
	top: 6px;
	font-size: 1.25rem;
}
input.hit-points, input.sanity{
	font-size: 1.2rem;
}

.hex.black i{
  color : black;
}
.hex.white i{
  color : white;
}
.hex.gris i{
  color : #E0E0E0;
}
.hex{
	width: 46px; /*larg 40 donc 40*1.547=46.188*/
	flex-basis: 46px;
	flex-shrink: 0;
}
.hex img{
	top: -2px;
}

/*main*/
.titre .nom{
	padding-right: 1rem;
	width: 167px;
}
/*class*/
.double .right.bgr{
	left: 199px;
}

/*skills*/
.skills .titre{
	left: 212px;
	top: 0;
}
.skills .titre .nom{
	width: 165px;
}
.skills .skills1{
	top: -21px;
}
.skills .skills2{
	left: 210px;
	top: 44px;
}
.skills .skills3{
	left: 420px;
	top: 22px;
}
.skills .stat input.nskill{
	width: auto;
}
/*focus*/
.foc{
	width: 85%;
}
.foc .cache{
	width: 64%;
	height: 5%;		
	left:18%;
	top: 18%;
	color: black;
	font-size: 1vw;	
}

/*colors*/
.bleuc{
	color: #576f92;
}
.bg-bleuc{
	background-color: #576f92;
}
.c-vert, .nom.c-vert{
	color: #3E7E4F;
}
.c-gris{
	color: #D8D8D8;
}


/*XS devices (portrait phones, less than 576px)*/
/*No media query for `xs` since this is the default in Bootstrap*/

/*SM devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

}
/*MD devices (tablets, 768px and up)*/
@media (min-width: 768px) {
.foc{
	width: 15%;
}
}
/*LG devices (desktops, 992px and up)*/
@media (min-width: 992px) {

}
/*XL devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}
/*XXL devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {

}