:root
{
--color-1: #000000;
--color-2: #99afaf;
--color-3: #ffffff;
}

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

.
{
box-sizing: border-box;
}

body
{
font-family: "Font1";
padding: 0;
margin: 0;
color: var(--color-1);
}

#container
{
display: flex;
scrollbar-width: none;
}

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

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

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

.menu
{
display: flex;
justify-content: center;
align-items: center;
border: 3px solid var(--color-1);
text-align: center;
background-color: var(--color-menu);
}

.version
{
color: var(--color-2);
display: flex;
}

form
{
display: flex;
border: 1px solid var(--color-2);
scrollbar-width: none;
flex-direction: column;
justify-content: space-around;
align-items: center;
}

#toolBar
{
display: flex;
position: fixed;
top: 1vh;
left: 2vw;
}

.icon
{
display: flex;
justify-content: center;
align-items: center;
margin-left: 1vw;
border: 1px solid var(--color-1);
}

.textToolBar
{
display: flex;
justify-content: center;
align-items: center;
padding: 1px;
color: var(--color-3);
background-color: var(--color-1);
}

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

		#container
		{
		width: 96vw;
		height: 93vh;
		margin-left: 2vw;
		margin-top: 2vh;
		flex-wrap: wrap;
		overflow-y: auto;
		align-items: center;
		justify-content: center;
		}
		
		.menu
		{
		width: 50vw;
		height: 30vh;
		font-size: 4.5vh;
		}
		
		.version
		{
		justify-content: end;
		align-items: center;
		width: 96vw;
		height: 3vh;
		font-size: 2vh;
		margin-left: 2vw;
		}
		
		form
		{
		width: 96vw;
		height: 88vh;
		overflow-y: auto;
		}
		
		input, textarea
		{
		background-color: var(--color-2);
		width: 90%;
		color: var(--color-3);
		}
		
		input
		{
		height: 5vh;
		}
		
		textarea
		{
		height: 10vh;
		}
		
		label
		{
		font-size: 3vh;
		width: 90%;
		text-align: left;
		padding-left: 1vw;
		}
		
		#toolBar
		{
		align-items: center;
		justify-content: flex-end;
		width: 96vw;
		height: 5vh;
		}
		
		.icon
		{
		height: 4vh;
		width : 4vh;
		font-size: 1.5vh;
		}
		
		.textToolBar
		{
		width: 70vw;
		font-size: 2.6vh;
		}
	}
	
	/*mode paysage*/
	@media screen and (orientation: landscape)
	{
		#container
		{
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
		overflow-y: auto;
		}
	}