/* rotate the title on landscape screens */
@media only screen and (orientation : landscape) 
{
	div.header_container
	{
		transform: rotate(-90deg) translateX(calc(-350px * var(--size-scalar))) translateY(calc(-300px * var(--size-scalar)));
		width: calc(850px * var(--size-scalar)); 
		padding: 0; 
		margin: 0;
	}

	div.header_title
	{
		font-family: TitleFont;
		font-size: calc(100px * var(--size-scalar));
	}

	.header_name
	{
		font-family: TitleFont;
		font-size: calc(30px * var(--size-scalar));
		color: white;
	}

	div.header_table
	{
		/* width of container minus outline and minus padding x2 */
		width: calc(782px * var(--size-scalar));
		padding: calc(30px * var(--size-scalar));
		margin-left: calc(4px * var(--size-scalar));
		outline: solid calc(4px * var(--size-scalar)) #CCCCCC;
		font-family: RegularFont;
		font-size: calc(24px * var(--size-scalar));
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
	}

	div.header_icon_container
	{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		margin: auto;
		margin-right: 0;
	}

	img.header_icon
	{
		width: calc(38px * var(--size-scalar));
		height: calc(38px * var(--size-scalar));
		transform: rotate(90deg);
		margin-left: calc(16px * var(--size-scalar));
		/* turn blue 
		https://blog.union.io/code/2017/08/10/img-svg-fill/
		https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element
		/* filter: invert(.3) sepia(1) saturate(5) hue-rotate(175deg); */
		filter: invert(.3) sepia(0);
	}
}