html, body {margin: 0; height: 100%; overflow: hidden}

		body {
			background-color: rgb(20, 20, 20);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			display: flex;
			align-items: center;
			flex-direction: row;
			margin: 0;
			body: 0;
			font-family: -apple-system;
		}

		h1 {
			margin: 0;
			padding: 0;
		}

		p {
			margin: 10;
		}

		.header {
			height: 100px;
			width: 600px;
			background-image: url(crux-background.png);
			background-size: cover;
			font-family: "Avenir Next Condensed";
			color: white;
			font-size: 32px;
			text-align: right;
			margin: 2px;
		}

		.sponsors {
			height: 300px;
			width: 600px;
			background-image: url(sponsors.png);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			font-size: 32px;
			text-align: right;
			margin-top: 50px;
		}

		.row {
			height: 50px;
			width: 600px;
			background-color: black;
			display: flex;
			align-items: center;
			border-radius: 8px;
			margin: 4px;
		}

		.order, .name, .total {
			font-family: "Avenir Next Condensed";
			font-size: 22px;
			color: white;
		}

		.order {
			margin: 20px;
			color: #E59B43;
		}

		.name {
			flex-grow: 2;
			margin-right: 20px;
		}

		.total {
			margin: 20px;
			text-align: right;
			width: 100px;
		}

		.boulder {
			width: 40px;
			height: 25px;
			margin: 2px;
			border-radius: 2px;
			background-color: #828485;
		}

		.boulder.send {
			background-color: #C99D53;
		} 

		.boulder.failed {
			background-color: #ffffff;
		} 

		.boulder.bonus {
			background: linear-gradient(0deg, #C99D53 12px, #ffffff 13px);
		} 

		.scoreboard {
			width: 800px;
			display: flex;
			align-items: center;
			flex-direction: column;
		}

		.stage {
			position: absolute;
			left: 27%;
			top: 14.8%;
			width: 50%;
			height: 68.2%;
			align-items: stretch;
			justify-content: center;
		}

		.stage .rows {
			width: 100%;
		}

		.stage .row {
			width: auto;
		}

		.clock {
			height: 100%;
			padding: 20px;
			display: flex;
			align-items: center;
		}

		.clock_value {
			font-family: "Avenir Next Condensed";
			font-size: 160px;
			color: white;
		}

		.ui {
			width: 800px;
			height: 100%;
			background-color: white;
			padding: 20px;
		}

		input {
			border: none;
			background: none;
		}

		tr:hover {
			background-color: yellow !important;
		}

		td {
			padding-left: 10px;
			padding-right: 10px;
			padding-top: 6px;
			padding-bottom: 6px;
			border-right: 1px #cfcfcf solid;
		}

		table {
			padding: 0;
			margin: 0;
			border-collapse: collapse;
		}

		th {
			font-weight: 400;
			padding: 10px;
		}

		tr:nth-child(even) {
			background: #fafafa;
			margin: 0;
			padding: 0;
		}

		input[type="text"] {
			width: 100px;
		}

		input[type="text"].small {
			width: 40px;
		}

		a {
			display: block;
			background-color: #4A90E2;
			padding: 15px;
			border-radius: 50px;
			text-decoration: none;
			color: white;
		}

		a.active {
			background-color: #7ED321;			
		}

		a.inactive {
			background-color: #C9C9C9;				
		}

		td {
			font-size: 10px;
			text-align: center;
			font-weight: bold;
		}