*{
				box-sizing: border-box;
			}
			
			:root{
			--bar-bg-color: #dfe4ea;
			--article-bg-color: #f1f2f6;
			--text-color: #2f3542;
			--header-bg-color:#eef;
			--pre-color:darkgreen;
			--border: 1rem;
			--margin-el: 0.5rem;
			--padding-el: 0.5rem;
			}
			
			:root[theme='dark'] {
			--bar-bg-color: #2f3542;
			--article-bg-color: #57606f;
			--text-color: #ced6e0;
			--header-bg-color:black;
			--pre-color:yellow;
			}
			
			:root[theme='Business'] {
			--bar-bg-color: #455a64;
			--article-bg-color: #546e7a;
			--text-color: #fff;
			--header-bg-color: #37474f;
			--pre-color:darkorange;
			}
			:root[theme='redMoon'] {
			--bar-bg-color: #aaaa99;
			--article-bg-color: #555;
			--text-color: #fff;
			--header-bg-color: Darkred;
			--nav-color:var(--header-bg-color);
			--pre-color:Lightblue;
			}
			
			:root[theme='Erch'] {
			--bar-bg-color: #aa993a;
			--article-bg-color: green;
			--text-color: #fff;
			--header-bg-color: Darkgreen;
			--nav-color:var(--article-bg-color);
			--pre-color:black;
			}
			input[type=button] {
			color: var(--text-color);
			background: var(--header-bg-color);
			
			padding: 0.3rem;
			margin: 0.2rem;
			font-size: 1rem;
			}
			
			html, body, nav {
				padding: 0;
				margin: 0;
				font-family: verdana, arial, sans-serif;
			}

			body {
				color: #fff;
				font-size: 1.8em;
				padding: 1em;
				display: flex;
				flex-direction: column;
			}

			main {
				display: flex;
				flex-direction: column;
			}

			article {
				background-color: #546e7a;
				flex: 2 2 auto;
			
			}

			nav {
				flex: 1;
				background-color: #455a64;

			}
			aside {
			flex:2.6;
			background-color: #455a64;
			}

			nav {
				order: -1;
			}
			
			
			header {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				flex: 0 0 10em;
				background-image: url( https://lh3.googleusercontent.com/3SsCUh2Crz_j6xror6jC6ISY6uFSDHFCfypE32RISPT2uhPTVHE4Eqaa3udzldGqG3LlSO6_npqBla3BiZpZm2JENXzK7mPK88Vc2e8ilTsCny_6XDxE1a-ejxEE2dwsEDB0f8oUXbE=w2400 );
				background-repeat: round;
				color: #37474f;
			}
			
			
			.item>p, h1, h5, h2 {
				margin:0;
				margin-left:15px;
			}
			
			.item {
			
			border: 15px solid rgba(23,23,23,0.2);
			padding:20px
			margin:0;
			background-color:rgba(230,230,230,0.5);
			}

			 footer {
				display: flex;
				font-size:1rem;
				flex: 0 0 5em;
				background-color: #37474f;
				text-align:right;

			}
			
			footer div>p {
			margin:1px;
			}
			nav{
				
				top: 0;
				left: 0;
				right: 0;
				background-color: #455a64;			
			}
			nav a{
				color: #eee;
				display: inline-block;
			padding-right: 1em;
				text-decoration: none;
				font-family: Verdana;
				
			}
			nav a:hover{
			background-color: red;
			color: #f4f4f4;
			}
			
			ul a{
			color: #eee;
			display: inline-block;
			padding-right: 1em;
			text-decoration: none;
			font-family: Verdana;
			
			}
			ul a:hover{
			background-color: red;
			color: #f4f4f4;
			}
			
			table {
			border: 4px solid #ccc;
			border-spacing: 3px;
			margin:1rem;
			}
			
			td, th{
			border: solid 2px Darkred;
			}
			.collapsed{
			border-collapse: collapse;
			}
			.separated{
			border-collapse: separate;
			}
			input {
			font-size:1.5rem;
			}
			
			.decor {
			border-radius:var(--border);
			margin: var(--margin-el);
			padding: var(--padding-el);
			}
			
			table{
			width:95%;
			}
			main, article, header, nav, aside, footer {
			width:100%;
			}
			@media screen and (min-width: 900px) {
			 nav a {padding-bottom: 1em;}
				
				body{
					min-height: 100vh;
				}
				main {
					flex-direction: row;
					min-height: 100%;
					flex: 1 1 auto;
				}
				article {
				background-color: #546e7a;
				flex: 2 2 12em;
				padding: 1em;
				}
				
				.header {
				background-image: url(imaged/welder.jpg);
				}
			}