body {
	background-color: lightgreen;
	font-family: 'Segoe UI', sans-serif;
	text-align: center;
	width: 98%;
	margin-left: 1%;
	font-size: 0.8em;
}

footer {
	font-size: 0.75em;
}

a {
	color: blue;
	font-weight: bold;
	padding: 4px;
}

h1 {
	font-size: 0.8rem;
	padding: 2px 0;
}

h4,
h5 {
	margin-top: 1px;
	margin-bottom: 1px;
}

.highlight {
	background-color: antiquewhite;
}

.inset {
	font-style: italic;
	font-weight: normal;
	margin-left: 8px;
}

li {
	margin: 20px;
}

ol li {
	text-align: left;
}

ul li {
	font-size: 1.5em;
	font-weight: bold;
	list-style-type: none;
}

li a,
button a {
	text-decoration: none;
}

table {
	border-collapse: collapse;
	margin: 5px auto 10px auto;
	background-color: white;
	text-align: left;
}

tr.highlight {
	background-color: antiquewhite;
	text-align: center;
}

th,
td {
	border: green solid 1pt;
	padding: 2px 6px;
}

.button {
	display: inline-block;
	height: 20px;
	width: 160px;
	margin: 4px;
	padding: 4px 4px 2px 4px;
	background-color: rgb(240, 240, 240);
	border: 1px solid black;
	text-decoration: none;
}

.leftAlign {
	text-align: left;
}

.centreAlign {
	text-align: center;
}

.rightAlign {
	text-align: right;
}

.nonevent {
	background-color: grey;
}

.error {
	background-color: red;
}

.wide {
	min-width: 150px;
}

.rotate {
	min-width: 64px;
	height: 84px;
	/* Safari, Chrome */
	-webkit-transform: rotate(60deg);
	/* Firefox */
	-moz-transform: rotate(60deg);
	/* IE */
	-ms-transform: rotate(60deg);
	/* Opera */
	-o-transform: rotate(60deg);
	/* CSS3 standard as defined here: http://www.w3.org/TR/css3-transforms/ */
	transform: rotate(60deg);
}

.cup {
	background-image: ️🏆;
}

.scorebox {
	display: inline-block;
	min-width: 15px;
	background-color: rgb(255, 210, 48);
	justify-content: center;
	border: 1px solid;
	margin: 1px;
	text-align: center;
	font-weight: normal;
}

.breaks {
	background-color: rgb(255, 240, 48);
	padding: 1px;
	border: 1px solid rgb(127, 127, 127);
}

.won {
	font-weight: bold;
}

.noPadding {
	padding: 0;
}

.ball {
	display: block;
    border-radius: 50%;
	height: 30px;
	width: 30px;
	margin: 0;
	background: radial-gradient(circle at 8px 4px, rgb(250, 221, 221), rgb(250, 50, 60));
}
.ball .shadow {
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
	transform: rotateX(90deg) translateX(-12px) translateZ(-15px);
	z-index: -1;
}
.stage {
	position: absolute;
	top: 2px;
	left: 10px;
	width: 30px;
	height: 30px;
	/* display: inline-block;
	margin: 20px; */
	perspective: 120px;
	perspective-origin: 50% 50%;
}