/* You can use "colour" or "colour" (and, in the slides, "centre" or "center") */
@media screen {
	:root {
		/* Base colours */
		--text-colour: #000;
		--background-colour: #fff;
		--accent-colour: #1A3B5B;
		--secondary-accent-colour: #1C75BC;
		--tertiary-accent-colour:#EB4D00;

		/* Size and aspect ratio */
		--slide-font-height-percent-of-slide: 7;
		--slide-aspect-ratio: calc(16 / 9);

		/* Gap around the slides */
		--slide-padding-vertical: 0.25rem;
		--slide-padding-horizontal: 1rem;

		/* Gap around slide parts */
		--part-padding-vertical: 0.25rem;
		--part-padding-horizontal: 1rem;
	}
}
a {color: var(--secondary-accent-colour, var(--secondary-accent-color));}
strong {color: var(--secondary-accent-colour);}
h1 {font-size: 1.75em}
.inverse {background-color: var(--accent-colour, var(--accent-color))}
.inverse--padding {padding: 0 0.25em}
#logo {width: 5em}
.watermark {background-image: url('images/tpgi.svg'); background-repeat: no-repeat; background-size: 2em; background-position: 95% 95%}
.avatar {max-width: 400px; max-height: 400px; box-shadow: 0 0 10px #000}
.keystrokes {width: 40%;}
table {font-size: 0.8em!important;}
caption {font-weight: bold;}
th {border: 1px solid; border-color: var(--accent-colour,var(--accent-color))}
th[scope="row"] {background-color:var(--background-colour,var(--background-color)); border: 1px solid; border-color: var(--text-colour,var(--text-color)); color: var(--text-colour,var(--text-color))!important; text-align: left}
td {border: 1px solid #333}
.underline {border-bottom: 5px solid #EB4D00}
.center-text {text-align: center}