Throw looking OK-ish

site.css

@@ -0,0 +1,103 @@
+html,
+body {
+	margin: 0;
+	padding: 0;
+	background: #49713e;
+	background: url('img/grass.png');
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+}
+
+header {
+	background: #4c76b8;
+	color: #fff;
+	display: flex;
+	flex: 0;
+	justify-content: center;
+}
+
+h1 {
+	font-size: 32px;
+	line-height: 40px;
+}
+
+main {
+	display: flex;
+	flex: 1;
+	position: relative;
+}
+
+.Table {
+	background: #fff;
+	border: 10px groove #ddd;
+	box-shadow: 0px 12px rgba(0, 0, 0, 0.3);
+
+	position: fixed;
+	top: 20vh;
+	bottom: 20vh;
+	left: 10vw;
+	right: 10vw;
+
+	transform: perspective(50cm) rotateX(45deg);
+}
+
+.Cup {
+	position: absolute;
+	background: url('img/beer.png');
+	height: 64px;
+	width: 64px;
+}
+
+#Cup-0 {
+	bottom: 0;
+	left: 0;
+}
+
+#Cup-1 {
+	bottom: 0;
+	right: 0;
+}
+
+#Cup-2 {
+	top: 0;
+	left: 0;
+}
+
+#Cup-3 {
+	top: 0;
+	right: 0;
+}
+
+.Toss {
+	align-self: flex-end;
+	background: rgba(30,30,30,0.4);
+	box-sizing: border-box;
+	color: #ccc;
+	font-size: 20px;
+	height: 20vh;
+	padding-top: 8px;
+	position: relative;
+	text-align: center;
+	width: 100%;
+}
+
+.Power {
+	background: #c00;
+	bottom: 0;
+	position: absolute;
+	height: 40px;
+	width: 20%;
+}
+
+.Die {
+	background: #fff;
+	border: 1px solid #000;
+	height: 20px;
+	position: fixed;
+	transform: translate(-10px, -10px);
+	width: 20px;
+}