:root 
{
	--bg-color: #33322f;
	--main-color: #F0EFEB;
	--secondary-color: #c0bfbb;
	--tertiary-color: #006987;
}

header
{
	font-family: 'Open Sans', sans-serif;
	background: var(--main-color);
	padding-left: 12px;
	margin-bottom: 1%;
	text-overflow: clipped;
	white-space: nowrap;
  	overflow: hidden;
}

body
{
    background: var(--bg-color);
	background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
	width: 100%;
	min-width: 500px;
	max-width: 1500px;
	margin:auto;
}

h1
{
	font-size: 3em;
	font-variant: small-caps;
	color: var(--bg-color);
	margin-top:5px;
	margin-bottom:5px;
	margin-right:10px;
	text-align: left;
}

h2
{
	font-family: 'Open Sans', sans-serif;
	color: var(--bg-color);
	font-size: 2em;
	font-variant: small-caps;
	margin:0px;
}

h3
{
	font-family: 'Open Sans', sans-serif;
	color: var(--secondary-color);
	font-size: 1.5em;
	font-variant: small-caps;
	padding:0px;
	background: var(--tertiary-color);
	margin-top:0px;
	text-align:center;
}

img
{
	border-style:none;
}

.Flag:hover
{
	cursor: pointer;
}

.Preview
{
	max-width: 100%;
}

.Projects
{
	vertical-align: top;
	text-align: center;
}

.Projects Article
{
	display: grid;

	grid-auto-columns: 235px;
}

.Projects Article h2
{
	grid-area: 1 / 1 / span 1 / span 5;
}

.Projects SubArticle
{
	background: var(--secondary-color);
	block-size: 200px;
	display: block;
	margin: 5px;
	align-content: center;
}

.Projects SubArticle:active
{
	background: var(--bg-color);
}

.Projects SubArticle:hover
{
	background: var(--tertiary-color);
}

.Projects SubArticle:hover h2
{
	color: var(--secondary-color);
}

.Projects h2
{
	margin:0px;
}

.Projects h2:hover
{
	margin:0px;
}

.Skills
{
	width: 100%;
	padding:0px;
	list-style-type: none;
}

.Skills article
{
	display:inline-block;
	vertical-align: top;
	text-align: justify;
	font-size: 1.0em;
	width: 31%;
	background: var(--secondary-color);
	padding-top:0%;
	padding-bottom:1%;
	padding-left:0%;
	padding-right:0%;
}

.Skills ul
{
	padding-right:5%;
}

.SubArticle
{
	text-align: justify;
	font-size: 1.0em;
	width: 100%;
	background: var(--secondary-color);
	margin-bottom:2%;
	padding-top:0%;
	padding-bottom:1%;
	padding-left:0%;
	padding-right:0%;
}

.SubArticle p
{
	padding-left:1%;
	padding-right:1%;
}

.SubArticle ul
{
	margin-top:0%;
	margin-bottom:0%;
	margin-left:1%;
	margin-right:1%;
}

.Bandeau img
{
	width:100%;
	padding: 0%;
	margin:0%;
	border-style:none;
}

.Screenshot img
{
	float: right;
	width: 100%;
	min-width:40px;
	max-width:1600px;
}

nav
{
	display: inline-block;
	position: fixed;
	vertical-align: top;
	
	width: 19%;
	height: 100%;
	min-width:200px;
	max-width:280px;
	
	text-align: center;
	overflow:hidden;
	font-size: 1.5em;
	font-family: 'Open Sans', sans-serif;

	background: var(--main-color);
	
	z-index: 2;
}

nav h2
{
	color: var(--bg-color);
}

nav ul
{
    list-style-type: none;
	padding: 0px;
}

nav a
{
	display: inline-block;
	color: var(--bg-color);
	text-decoration: none;
	margin-bottom: 12px;
}

nav a:hover
{
	background: var(--tertiary-color);
	color: var(--secondary-color);
	padding-left:12px;
	padding-right:12px;
}

.Activated
{
	background: var(--secondary-color);
	color: var(--bg-color);
	padding-left:12px;
	padding-right:12px;
}

/* .Activated:hover
{
	background: var(--secondary-color);
	padding-left:12px;
	padding-right:12px;
} */

.AboutMe
{
	width: 65%;
	margin:auto;
	padding: 5px;
	
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.6em;
	
	background: var(--secondary-color);
}

.AboutMe a:hover
{
	background: var(--tertiary-color);
	color: var(--secondary-color);
}

.AboutMe h2
{
	color: var(--bg-color);
	padding: 5px;
}

ol
{
	list-style-type: none;
}

section
{
	text-align: justify;
	float: right;
	width: 80%;
}

article
{
	background: var(--main-color);
	
	text-align: justify;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9em;
	overflow:hidden;
	
	padding: 1%;
	margin-top: 0px;
	margin-bottom: 1%;
	margin-left: 0px;
	margin-right: 0px;
	z-index: 1;
	color: var(--bg-color);
}

article a
{
	color: var(--bg-color);
}

iframe
{
	float: right;
	z-index: 0;
	
	margin-left: 2%;
}

canvas
{
    display: block;
    margin: auto;
}

.webgl-content {float: right; width: 80%; min-width:40px; max-width:1600px;}

.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('Projets/TemplateData/progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%;}

.webgl-content .logo.Dark {background-image: url('Projets/TemplateData/progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('Projets/TemplateData/progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('Projets/TemplateData/progressFull.Dark.png');}

.webgl-content .footer .fullscreen {float: right;}

#unity-container.display: block;
#unity-container { background: #000000 }
#unity-container.unity-desktop { left: 50%; top: 50%; width: 100%; height: 720px }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: #231F20; position: relative; width: 100%; height: 100% }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: relative; left: 50%; top: 50%; transform: translate(-7%, -110%); display: block; width: 100%; height: 100% }
#unity-logo { width: 154px; height: 130px; background: url('Projets/TemplateData/progressLogo.Dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('Projets/TemplateData/progressEmpty.Dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('Projets/TemplateData/progressFull.Dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('Projets/TemplateData/webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('Projets/TemplateData/fullscreen.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }