:root {
	--color: white;
	--bg_color_base: #626A7D;
	--ponct_color: #00D646;
	--conteneur: #333B50;
	--light_color: #BEC7D5;

	--body_width: 70vw;
	--height-container: 50vh;

	--transition: 0.3s;

	--a: calc(100vw / 6);
}
* {
	scroll-behavior: smooth;
	scroll-padding-top: 60px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* border: 1px solid black; */
}
*::selection {
    background-color: var(--bg_color_base);
}

@font-face {
    font-family: 'lulo-bold';
    src: url('/assets/fonts/lulo-clean-one-bold.ttf');
}
@font-face {
    font-family: 'avenir-light';
    src: url('/assets/fonts/avenir-light.ttf');
}
@font-face {
    font-family: 'avenir';
    src: url('/assets/fonts/avenir.otf');
}

c {
	color: var(--ponct_color);
}

span.underline {
	text-decoration: underline;
}

#number {
	color: var(--light_color);
}

div.spacer#container {
	height: calc(calc(var(--height-container) / 2) + 10vw);
	/* border: 1px solid black; */
}
div.spacer#no_container {
	height: 20vh;
	/* border: 1px solid black; */
}

a#active {
	color: var(--ponct_color) !important;
}
a#active:hover {
	transition: var(--transition);
	color: white !important;
}
a:active, a#active:active {
	color: var(--light_color) !important;
}

a#link {
	transition: var(--transition);
	text-decoration: none;
	color: var(--light_color);
}
a.arrow:after {
	content: '>';
	position: relative;
	font-family: 'avenir';
	margin-left: 0px;
	opacity: 0;
	transition: var(--transition);
}
a.arrow:hover:after {
	transition: var(--transition);
	margin-left: 15px;
	margin-right: -15px;
	opacity: 1;
}

body {
	color: var(--color);
	/* --w_body = width;
	--h_body = height; */
	/* border: 1px solid black; */
	height: 100vh;
	overflow: hidden;
}




/* PORTFOLIO */

.portfolio {
	position: relative;
  	z-index: 1;
	overflow: hidden !important;
	/* margin-top: 70px; */
	height: 100%;
	background-color: #3F445E;
}
div.portfolio div {
	position: absolute;
	/* border: 1px solid black; */
}


div#n7 {
	top: 0;
	left: 0;
	background: url("/images/portfolio/layouts.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
div#n0 {
	top: calc(var(--a));
	left: 0;
	background: url("/images/portfolio/auto-conso.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
div#n1 {
	top: 0;
	left: calc(2 * var(--a));
	background: url("/images/portfolio/snooker.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
div#n5 {
	top: 0;
	left: calc(4 * var(--a));
	background: url("/images/portfolio/recall.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
}
div#n2 {
	top: calc(1 * var(--a));
	left: calc(3 * var(--a));
	background: url("/images/portfolio/meteociel.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
div#n6 {
	top: calc(1 * var(--a));
	left: calc(5 * var(--a));
	background: url("/images/portfolio/onetennis.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
div#n3 {
	top: calc(2 * var(--a));
	left: 0;
	background: url("/images/portfolio/pentesting.png");
	background-position: left;
	background-repeat: no-repeat;
	background-size: cover;
}
div#n4 {
	top: calc(2 * var(--a));
	left: calc(1 * var(--a));
	background: url("/images/portfolio/wiki.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
div#n8 {
	top: calc(0 * var(--a));
	left: calc(3 * var(--a));
	background: url("/images/portfolio/saucier.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}




.x_a {
	width: var(--a);
}
.x_2a {
	width: calc(2 * var(--a));
}
.x_3a {
	width: calc(3 * var(--a));
}

.y_a, .y_a ~ a {
	height: var(--a);
	line-height: var(--a);
}
.y_2a, .y_2a ~ a {
	height: calc(2 * var(--a));
	line-height: calc(2 * var(--a));
}
.y_3a, .y_3a ~ a {
	height: calc(3 * var(--a));
	line-height: calc(3 * var(--a));
}
div.portfolio div a {
	display: block;
	width: 100%;
	cursor: pointer;
	text-align: center;
	color: transparent;
	text-decoration: none;
	font-family: 'avenir-light';
	text-transform: uppercase;
	transition: 0.2s;
	/* border: 1px solid blue; */
}
div.portfolio div a:hover, div.portfolio div a:active {
	color: var(--light_color);
	background-color: rgba(0, 0, 0, 0.6);
	transition: 0.2s;
}