:root {
	--text1: 1.0vh Verdana, sans-serif;
	--text2: 1.2vh Verdana, sans-serif;
	--text3: 1.5vh Verdana, sans-serif;
	--text4: 1.8vh sans-serif;
	--colour1: #666666;
	--colour2: #888888;
	--colour3: #444444;
	--colour4: #cccccc;
}

/*
:root {
	--text1: 10px Verdana, sans-serif;
	--text2: 13px Verdana, sans-serif;
	--text3: 16px Verdana, sans-serif;
	--text4: 19px sans-serif;
	--colour1: #666666;
	--colour2: #888888;
	--colour3: #444444;
	--colour4: #cccccc;
}
*/

/* filling full height and width - see: */
/* https://stackoverflow.com/questions/43747185/force-css-grid-container-to-fill-full-screen-of-device */
/* includes * global no padding and margins to force content to edge */
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

a {
/* prevent default outline on clicked items */
   outline: 0;
   text-decoration: none;
   color: var(--colour3);
}

a:hover {
/* prevent default outline on clicked items */
   color: var(--colour4);
}







.wrapper {
	display: grid;
	grid-template-columns: 
		[line1 col1-2]1fr 
		[line2 col2-3]50vh 
		[line3 col3-4]50vh 
		[line4 col4-5]1fr 
		[line5];
	grid-template-rows: 
		[line1 row1-2]8vh 
		[line2 row2-3]auto 
		[line3 row3-4]auto 
		[line4];	
}

.input-container {
	grid-column-start: line2;
	grid-column-end: line3;
	grid-row-start: line2;
	grid-row-end: line3;
}

.output-container {
	grid-column-start: line3;
	grid-column-end: line4;
	grid-row-start: line2;
	grid-row-end: line3;
/* 	width: 600px; */
/* 	border: 1px solid grey; */
	margin: 20px;
}



#title {
	padding: 20px;
	padding-bottom: 0px;
	margin-left: 30px;
}
					

					.topname {
						grid-column-start: line2;
						grid-column-end: line3;
						grid-row-start: line1;
						grid-row-end: line2;
						font: var(--text1);
						color: var(--colour4);
					}

					.heading {
						margin-top: 1.5vh;
						font: var(--text4);
						color: var(--colour3);
					}

					.maintext {
						margin-top: 0.4vh;
						font: var(--text2);
						color: var(--colour2);
/*
						text-align: justify;
						text-justify: inter-word;
*/
					}
					

#form-container {
	margin-top: 50px;
	font: var(--text2);
	color: var(--colour2);
}

input {
	font: var(--text2);
	color: var(--colour3);
}

input, button {
  width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
						border: 1px solid #bbb;
						border-radius: 5px;
}

button {
	cursor: pointer;
	font: var(--text2);
	color: var(--colour3);
}

table, tr, td {
	border: 1px solid #bbb;
	border-collapse: collapse;
	font: var(--text2);
	color: var(--colour3);
}

table {
	margin-left: 20px;
}

td {
	width: 10vh;
	padding: 1vh;
}

#notes {
	padding-right: 20px;
	padding-top: 20px;
}