:root {
	--div1: yellow;
	--div2: green;
	--div3: red;
	--div4: blue;
	--div5: orange;
	--div6: violet;
	--div7: brown;
	--div8: pink;
	--div9: grey;
	--bgcol: greenyellow;
	--exchange: white;
}

.tile {
	position: absolute;
	border-radius: 3vw;
	box-shadow: 1vw 1vh 1.5vw 1vh silver;
	width: 30vw;
	height: 30vh;
}

.tile:active{
	transform: translateY(1vh);
}

.one {
	left: 3vw;
	top: 3vh;
	background-image: linear-gradient(var(--div1) 70%, var(--bgcol));
}

.two {
	margin-left: 35vw;
	top: 3vh;
	background-image: linear-gradient(var(--div2) 70%, var(--bgcol));
}

.three {
	margin-left: 67vw;
	top: 3vh;
	background-image: linear-gradient(var(--div3) 70%, var(--bgcol));
}

.four {
	left: 3vw;
	top: 35vh;
	background-image: linear-gradient(var(--div4) 70%, var(--bgcol));
}

.five {
	margin-left: 35vw;
	top: 35vh;
	background-image: linear-gradient(var(--div5) 70%, var(--bgcol));
}

.six {
	margin-left: 67vw;
	top: 35vh;
	background-image: linear-gradient(var(--div6) 70%, var(--bgcol));
}

.seven {
	left: 3vw;
	top: 67vh;
	background-image: linear-gradient(var(--div7) 70%, var(--bgcol));
}

.eight {
	margin-left: 35vw;
	top: 67vh;
	background-image: linear-gradient(var(--div8) 70%, var(--bgcol));
}

.nine {
	margin-left: 67vw;
	top: 67vh;
	background-image: linear-gradient(var(--div9) 70%, var(--bgcol));
}

h1 {
	font-family: Arial;
	color: black;
	text-align: center;
	vertical-align: middle;
	line-height: 30vh;
	font-size: 20vh;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
}


html, body {
	height: 100%; /* let them know they can be this tall if they want - because they don't already know for some reason... */
}

body {
	background-color: var(--bgcol);
	margin: 0;
}