@font-face
{
font-family: "Font1";
src: url("../fonts/BG.woff2") format("woff2");
}

@font-face
{
font-family: "Font2";
src: url("../fonts/JMH.ttf") format("truetype");
}

:root
{
--color1: #1f090b;
--color1-rgba: rgba(31, 9, 11, 0.8);
--color2: #cdcdcd;
--color2-rgba: rgba(205,205,205, 0.5);
--color2-rgba2: rgba(205,205,205, 0.9);
--color3: #b3b1b4;
--color3-rgba: rgba(179, 177, 180, 0.9);
--color4: #b21017;
--color4-rgba: rgba(178, 16, 23, 0.9);
--color5: #ffffff;
--color5-rgba: rgba(255, 255, 255, 0.5);
--color6: #666666;/*#a2a19e*/
--color6-rgba: rgba(225, 206, 175, 0.5);
--color6-rgba2: rgba(225, 206, 175, 0.9);
}

body
{
margin: 0;
padding: 0;
font-family: "Font1";
background-image: url("../images/fond.jpg");
}

header
{
background-color: var(--color5-rgba);
}

a:hover
{
color: var(--color1);
text-decoration: none; 
}

a:visited
{
color: var(--color1);
text-decoration: none; 
}

a:link
{
color: var(--color1);
text-decoration: none; 
}

#container
{
display: flex;
width: 98vw;
height: 98vh;
box-sizing: border-box;
margin-left: 1vw;
margin-top: 1vh;
}

	/*vertical*/
	@media screen and (orientation: portrait)
	{
		#container
		{
		flex-direction: column;
		justify-content: space-around;
		}
		
		header
		{
		width: 98vw;
		height: 20vh;
		background-image: url("../images/logoH.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		}
	}
	/*horizontal*/
	@media screen and (orientation: landscape)
	{
		#container
		{
		flex-wrap: wrap;
		flex-direction: row-reverse;
		}
		
		header
		{
		width: 20vw;
		height: 92vh;
		background-image: url("../images/logoW.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		}
	}