/* note 2 */
/* 	centre text vert and horiz using flex */




/*
:root {
	--text1: 1.0vh Verdana, sans-serif;
	--text2: 1.2vh Verdana, sans-serif;
	--text3: 1.4vh Verdana, sans-serif;
	--text4: 1.6vh sans-serif;
	--colour1: #666666;
	--colour2: #888888;
	--colour3: #222222;
	--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: #222222;
	--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 */
/* except now adjusted by margin in wrapper */

* {
	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);
}






					html, body {
/* 						overflow: hidden; */
						width: 100%;
/* 						height: 100%; */
						margin: 0;
						padding: 0;
					}

					#renderCanvas {
						position: absolute;
						left: 22.5vw;
						width: 60vw;
						top: 5vh;
						height: 90vh;
						touch-action: none;
					}
					
					.topname {
/* 						position: absolute; */
						margin-left: 3.5vw;
						font: var(--text1);
						color: var(--colour4);
					}
					
					.topheading {
						position: relative;
						margin-left: 3.5vw;
						margin-top: 5vh;
						width: 16vw;
						font: var(--text4);
						color: var(--colour3);
					}
					
					.heading {
						position: relative;
						margin-left: 3.5vw;
						margin-top: 1.5vh;
						width: 16.5vw;
						font: var(--text4);
						color: var(--colour3);
					}
					
					.topmaintext {
						position: relative;
						margin-left: 3.5vw;
						margin-top: 5vh;
						width: 16vw;
						font: var(--text2);
						color: var(--colour2);
					}
					
					.maintext {
						position: relative;
						margin-left: 3.5vw;
						margin-top: 0.4vh;
						width: 17vw;
						font: var(--text2);
						color: var(--colour2);
/*
						text-align: justify;
						text-justify: inter-word;
*/
					}
					
					
					
					.button {
						width: 10vw;
						height: 5vh;
						position: absolute;
						border: 1px solid #bbb;
						border-radius: 5px;
						cursor: pointer;
					/* note 2 */
						display: flex;
						justify-content: center;
						text-align: center;
						align-items: center;
						font: var(--text2);
						color: var(--colour2);
					}
					
					.smallButton {
						border: 1px solid #bbb;
						border-radius: 5px;
						padding-top: 0.1vh;
						cursor: pointer;
					/* note 2 */
						display: flex;
						justify-content: center;
						text-align: center;
						font: var(--text1);
						color: var(--colour2);
					}

/* note button heights have been adjusted to change the button order */
					#button1 {
						top: 32vh;
						left: 85vw;
					}
					
					#button2 {
						top: 39vh;
						left: 85vw;
					}
					
					#button3 {
						top: 46vh;
						left: 85vw;
					}
					
					#button4 {
						top: 53vh;
						left: 85vw;
					}
					
					#button5 {
						top: 5vh;
						left: 85vw;
					}
					
					#button6 {
						top: 19vh;
						left: 85vw;
					}
					
					#button7 {
						top: 12vh;
						left: 85vw;
					}
					
					
					
					
					#scalebox {
						top: 60vh;
						left: 85vw;
						width: 10vw;
						height: 10vh;
						position: absolute;
						border: 1px solid #bbb;
						border-radius: 5px;
						display: grid;
						grid-template-columns: 
							[line1 col1-2]1vw 
							[line2 col2-3]2vw
							[line3 col3-4]1vw
							[line4 col4-5]2vw
							[line5 col5-6]1vw
							[line6 col6-7]2vw
							[line7 col7-8]1vw
							[line8];
						grid-template-rows: 
							[line1 col1-2]1vh
							[line2 col2-3]2vh
							[line3 col3-4]1vh
							[line4 col4-5]2vh
							[line5 col5-6]1vh
							[line6 col6-7]2vh
							[line7 col7-8]1vh
							[line8];

					}
					
					#scaletext {
						grid-column-start: line2;
						grid-column-end: line7;
						grid-row-start: line2;
						grid-row-end: line3;
					/* note 2 */
						display: flex;
						justify-content: center;
						text-align: center;
						align-items: center;
						font: var(--text2);
						color: var(--colour2);
					}
					
					#button11 {
						grid-column-start: line2;
						grid-column-end: line3;
						grid-row-start: line4;
						grid-row-end: line5;
					}
					
					#button12 {
						grid-column-start: line2;
						grid-column-end: line3;
						grid-row-start: line6;
						grid-row-end: line7;
					}
					
					#button13 {
						grid-column-start: line4;
						grid-column-end: line5;
						grid-row-start: line4;
						grid-row-end: line5;
					}
					
					#button14 {
						grid-column-start: line4;
						grid-column-end: line5;
						grid-row-start: line6;
						grid-row-end: line7;
					}
					
					#button15 {
						grid-column-start: line6;
						grid-column-end: line7;
						grid-row-start: line4;
						grid-row-end: line5;
					}
					
					#button16 {
						grid-column-start: line6;
						grid-column-end: line7;
						grid-row-start: line6;
						grid-row-end: line7;
					}
					
					#readout {
						width: 6%;
						height: 5%;
						top: 70vh;
						left: 90%;
						cursor: default;
						display: none;
					}
					
/*
					#button21 {
						top: 60%;
						left: 90%;
					}
					
					#button22 {
						top: 63%;
						left: 90%;
					}
					
					#button23 {
						top: 60%;
						left: 93%;
					}
					
					#button24 {
						top: 63%;
						left: 93%;
					}
					
					#button25 {
						top: 60%;
						left: 96%;
					}
					
					#button26 {
						top: 63%;
						left: 96%;
					}
					
					#button31 {
						top: 70%;
						left: 90%;
					}
					
					#button32 {
						top: 70%;
						left: 93%;
					}
					
					#button33 {
						top: 70%;
						left: 96%;
					}
*/
					
					#button34 {
						top: 85vh;
						left: 85vw;
					}
					
					#button35 {
						top: 78vh;
						left: 85vw;
					}
					
					#button36 {
						top: 90vh;
						left: 85vw;
						display: none;
					}
					
/*
					#button51 {
						top: 5%;
						left: 5%;
					}
					
					#button52 {
						top: 10%;
						left: 5%;
					}
					
					#button53 {
						top: 15%;
						left: 5%;
					}
					
					#button54 {
						top: 20%;
						left: 5%;
					}
					
					#button55 {
						top: 25%;
						left: 5%;
					}
*/