:root
{
--bgColor: #000000;
--textColor: #654321;
}

@keyframes showHide
{
	from {opacity: 0;}
	to {opacity: 1;};
}

@keyframes hide
{
	from {opacity: 1;}
	to {opacity: 0;};
}

@keyframes show
{
	0% {opacity: 0;}
	90% {opacity: 0;}
	100% {opacity: 1;};
}

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

body
{
font-family: "Font1";
padding: 0;
margin: 0;
overflow: hidden;
}

#container
{
display: flex;
flex-direction: column;
box-sizing: border-box;
/*margin-left: 1vw;
margin-top: 1vh;*/
width: 100vw;
height: 100vh;
/*max-height: 98vh;*/
}

.title
{
font-size: 2vw;
color: var(--textColor);
}

#buttonBox
{
display: flex;
justify-content: space-around;
align-items: center;
}

.button
{
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: 1px solid black;
}

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

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

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



/*mode paysage*/
@media screen and (orientation: landscape)
{

	body
	{
	background-position: right;
	}
	
	#container
	{
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	overflow-y: auto;
	}
}

/*mode portrait*/
@media screen and (orientation: portrait)
{

	body
	{
	background-position: bottom;
	}
	
	#container
	{
	overflow-y: auto;
	align-items: center;
	}
	
}