/*Default Styles*/
* { 
	margin: 0; 
	padding : 0; 
	box-sizing: border-box;
}
header {
	font-family: Roboto;
	overflow: hidden;
}

body {
	font-family: Roboto;
	overflow: hidden;
	width: 100vw;
}

button:active,
button:focus {
	opacity: 1;
}

button:hover {
    cursor: pointer;
    opacity: 0.8;
}

input:hover {
	opacity: 1;
}

/*html tag style*/
main,
html {
	width: 100vw;
	height: 100vh;
	margin: 0;
	overflow: hidden;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

	/*Header Styles*/
	.HeaderDiv {
		background-color: #3B3B3B;
		display: grid;
		grid-template-columns: 3.6em 1fr auto;
		height: 3.6em;
		width: 100%;
		padding-left: 0.2em;
	}
		
		.HeaderDivIcon {
			display: block;
			aspect-ratio: 1 / 1;
			height: 100%;
		}

		.HeaderDivTitle {
			font-family: 'Charm';
			width: auto;
			padding: 0.6em 0 0 1em;
		}

		.HeaderDivAccount {
			display: grid;
			grid-template-columns: 1fr 3.6em;
			height: 100%;
		}

			.HeaderDivAccountName {
				font-family: 'Charm';
				height: 100%;
				width: auto;
				padding: 1.1em 0.8em 0 1em;
				text-align: right;
				-webkit-user-select: none; /* Safari */
				-ms-user-select: none; /* IE 10 and IE 11 */
				user-select: none; /* Standard syntax */
			}

			.HeaderDivAccountIcon {
				aspect-ratio: 1 / 1;
				height: 3.2em;
				margin: auto 0.8em auto auto;
				border-style: solid;
				border-width: 0.2em;
				border-color: black;
				border-radius: 50%;
			}

		.HeaderDivAccount:hover {
			background-color: #525252;
		}
		
	/*Main Window Styles*/
	.BodyDiv {
		margin-top: 0;
		width: 100%;
		height: calc(100% - 3.6em);
		border-style: solid;
		border-width: 0.2em;
		border-color: #3B3B3B;
		background-color: #525252;
	}