:root {
	--primary-color: #003d70;
	/* navy blue */
	--secondary-color: #0d99ff;
	/* cyan blue */
	--tertiary-color: #83cbff;
	/* cornflower blue */
	--core-color: #444444;
	/* dark grey */
	--base-color: #d9d9d9;
	/* med grey */
	--panel-color: #f0f0f000;
	/* light grey tab panel- trnsp. */
}

* {
	font-family: "Work Sans", sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	/* Font-weight values from 100 to 900 */
	font-style: normal;
	margin: 0;
	user-select: none;
	height: 100dvh;
}

video::-webkit-media-controls {
	display: none !important;
}

video::-webkit-media-controls-enclosure {
	display: none !important;
}

@supports not (height: 100dvh) {
	body {
		height: 100vh;
	}
}

img,
svg {
	margin: 0;
	padding: 0;
	max-width: 100%;
	display: block;
}

video {
	display: block;
	border-radius: 10px;
	object-fit: cover;
	margin: 0;
	padding: 5px 0px 5px 0px;
	width: 100%;
	height: auto;
	max-width: 100%;
	/* min-width: 550px;
	min-height: 310px; */
}

.vidclip {
	margin-top: 4px;
	border-radius: 10px;
	overflow: clip;
}

.tab-content-item svg {
	width: 100%;
	margin: 0 auto;
}

a {
	color: var(--core-color);
}

header,
footer {
	background-color: var(--base-color);
}

header {
	padding: 5px 0;
}

.logo {
	padding: 0 5px 0 0;
	border-right: 1px dotted var(--primary-color);
}

.logolock {
	display: flex;
	gap: 30px;
	align-items: center;
}

.tagline {
	color: var(--primary-color);
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 1px;
}

.intro {
	margin: 10px auto;
	display: flex;
	align-items: center;
	justify-items: space-between;
	gap: 100px;
}

.intro p {
	width: 50ch;
	font-size: 0.9rem;
	border: 1px solid silver;
	padding: 10px;
	border-radius: 8px;
}

.intro svg {
	fill: red;
}
.contain {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1024px;
	margin: 0 auto;
	/* padding: 0 10px; */
	padding: 0;
	max-height: 80px;
}

nav ul {
	display: flex;
	gap: 14px;
}
nav li {
	text-align: center;
	list-style-type: none;
}

nav li a:hover {
	padding-bottom: 4px;
	border-bottom: 3px solid var(--primary-color);
}

nav li .active {
	padding-bottom: 4px;
	border-bottom: 3px solid var(--secondary-color);
}

nav a {
	color: var(--core-color);
	text-decoration: none;
	transition: all 200ms;
}

/* LAYOUT */
main {
	max-width: 1024px;
	margin: 0 auto;
	padding: 10px;
}

.content {
	display: flex;
	justify-content: center;
	gap: 20px;
}

iframe {
	border-radius: 8px;
}

footer {
	margin-top: 20px;
	text-transform: uppercase;
	font-size: 0.6rem;
	letter-spacing: 0.5px;
	color: var(--primary-color);
}

footer .contain {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	max-width: 1024px;
}

footer .contain button {
	background: none;
	border: none;
	text-transform: uppercase;
	font-size: 0.6rem;
	color:var(--core-color);
	cursor: pointer;
}
.credits {
	padding: 0 20px 30px;
	border-radius: 8px;
	font-size: 10pt;
	border: 1px solid var(--secondary-color);
	box-shadow: 0 0 10px var(--primary-color);
}
.credits ul, .credits li {
	margin: 0;
}

.credits::backdrop {
  background-color: #83cbff90;
}
/* CHOICE BOXES */
.choices {
	display: flex;
	gap: 20px;
	margin: 16px 0;
}
.choice {
	text-align: left;
	display: flex;
	gap: 10px;
	align-items: center;
	/* padding: 10px; */
	border: 0;
	border-radius: 8px;
	background-color: var(--secondary-color);
	color: white;
}

.choice:hover,
.c-active {
	background-color: var(--primary-color);
	color: white;
	transition: all 200ms;
	cursor: pointer;
}

.choice h2 {
	/* margin: 0; */
	padding: 0;
	font-weight: 400;
	font-size: 1rem;
}

.choice .choice-title {
	padding: 10px;
	font-weight: 400;
	font-size: 1rem;
	display: block;
}

.choice span {
	color: var(--primary-color);
	font-size: 2.5rem;
	font-weight: 900;
	padding: 0 6px;
	transition: all 50ms;
}

.choice:hover span,
.c-active span {
	color: white;
}

.choice svg {
	fill: var(--primary-color);
	transition: all 50ms;
}

.choice:hover svg,
.c-active svg {
	fill: white;
}

.sentence-button-block {
	display: grid;
	grid-template-columns: auto auto;
	gap: 10px;
}
.sentence {
	padding: 10px;
	border: 0;
	border-radius: 8px;
	background-color: var(--secondary-color);
	color: white;
	/* text-align: center; */
	/* max-width: 400px;
	max-height: 60px;
	margin-left:auto;
	margin-right:auto; */
}

.sentence:hover,
.c-active {
	background-color: var(--primary-color);
	color: white;
	transition: all 200ms;
	cursor: pointer;
}

.sentence .button-title {
	margin: 0;
	padding: 0;
	font-weight: 500;
	font-size: 1rem;
	margin-left: auto;
	margin-right: auto;
}

.sentence span {
	color: var(--primary-color);
	font-size: 2.5rem;
	font-weight: 900;
	padding: 0 6px;
	transition: all 50ms;
}

.sentence:hover span,
.c-active span {
	color: white;
}

.sentence svg {
	fill: var(--primary-color);
	transition: all 50ms;
}

.sentence:hover svg,
.c-active svg {
	fill: white;
}

/* HEADINGS */
h1 {
	font-weight: 700;
	font-size: 2rem;
	color: var(--primary-color);
}

h1 span {
	color: var(--core-color);
	font-weight: 500;
	font-size: 1.75rem;
}

h3 {
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
	padding: 0;
}

/* TABS */
.tab-block {
	margin: 0;
	padding: 0;
	width: 50%;
	max-width: 600px;
	border-radius: 8px;
	/* 	flex: 1; */
	/* min-height: 433px; */
}

.tabs {
	display: flex;
	border-bottom: 2px solid var(--tertiary-color);
	background-color: var(--secondary-color);
	border-radius: 8px 8px 0 0;
}

.tab {
	padding: 8px 20px;
	border-radius: 8px 8px 0 0;
	cursor: pointer;
	background-color: var(--panel-color);
}

.tab.active {
	background-color: var(--tertiary-color);
	border: 2px solid var(--tertiary-color);
	border-bottom: none;
}

.tab-content {
	border: 2px solid var(--tertiary-color);
	border-top: none;
	border-radius: 0 0 8px 8px;
}

.tab-content-item {
	display: none;
	padding: 10px;
	min-width: 430px;
	/* min-height: 370px; */
}

.tab-content-item.active {
	display: block;
	background-color: var(--tertiary-color);
}

.tab-content-item p {
	margin: 12.25px 0;
}

.tab-block textarea {
	width: 100%;
	line-height: 150%;
	resize: vertical;
	overflow: scroll;
	padding: 8px;
	height: 249px;
}

.tab-block textarea.results {
	height: 200px;
}

input,
textarea,
select {
	font-size: 16px;
}

.tab-block img {
	/* width: 100%; */
	width: 430px;
	margin-left: auto;
	margin-right:auto;
	height: auto;
}

.percentageDisplay {
	font-size: 1.2rem;
	/* color: var(--primary-color); */
	color: white; /*#7fff00;*/
	text-shadow: 0 0 6px var(--primary-color);
}

.waveform {
	/* margin: 10px 0; */
	margin-top: 4px;
	max-width: 550px;
	height: 75px;
	/* width: 100%; */
	overflow: hidden;
	cursor: col-resize;
	border-radius: 8px;
}

#transcript {
	display: none;
	color: darkgrey;
	margin-top: 10px;
	padding: 0;
	border: 1px solid #ccc;
	background-color: #f9f9f9;
	height: 100px;
	overflow: scroll;
	resize: vertical;
	/* border-radius: 8px; */
}

.cue {
	margin: 0;
	padding: 5px 10px;
}

.current-cue {
	color: black;
	background-color: palegoldenrod;
}

input[type="range"] {
	width: 100%;
	border-bottom: 2px solid var(--secondary-color);
	-webkit-appearance: none;
	background: #7fff00;
	background: linear-gradient(90deg,
			rgba(255, 0, 0, 0.65) 0%,
			rgba(255, 237, 0, 0.65) 48%,
			rgba(67, 255, 0, 0.65) 100%);
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 10px;
	width: 20px;
	background: #ffffff;
	box-shadow: 0 0 5px #0005;
	cursor: pointer;
}

input[type="range"]:hover::-webkit-slider-thumb {
	background-color: #ffffff;
}

/* MOBILE */
@media screen and (max-width: 768px) {
	header {
		padding: 5px 10px 5px;
	}
	.contain {
		flex-wrap: wrap;
		justify-content: center;
		padding: 0 5px;
	}
	.logo {
		max-width: 120px;
		padding: 0;
	}
	.logolock {
		gap: 10px;
	}
	.tagline {
		font-size: 0.6rem;
	}
	nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	nav ul {
		padding: 0;
		text-align: center;
		margin: 10px 0;
	}
	nav li {
		margin: 10px 0;
	}
	h1 {
		text-align: center;
		font-size: 1.5rem;
		line-height: 10%;
	}
	h1 span {
		display: block;
		font-size: 1rem;
	}

	.intro {
		margin: 10px auto 0;
		display: block;
		width: calc(100% - 30px);
	}

	.intro h1 {
		line-height: 120%;
	}

	.intro p {
		width: unset;
	}

	.content {
		flex-direction: column;
		row-gap: 0px;
	}
	.choices {
		max-width: 600px;
		margin: 0 auto;
		padding: 10px 26px;
		flex-direction: row;
	}
	.choice h2 {
		font-size: 0.8rem;
	}
	.choice span {
		font-size: 0.8rem;
		margin: 0;
		padding: 0;
	}
	.choice svg {
		width: 20px;
		display: none;
	}
	.info {
		display: none;
	}
	.videoblock {
		width: 100%;
		/* min-height: 433px; */
	}
	video {
		width: 100%;
		padding: 0 20px;
	}
	.tab-block {
		width: 100%;
		padding: 10px 20px;
		margin: auto;
	}
	.tabs {
		flex-wrap: wrap-reverse;
	}
	.tab {
		width: 33%;
	}

	.tab h3 {
		margin: 0;
		padding: 0;
		font-size: 0.8rem;
	}
	.waveform {
		display: none;
	}
	footer .contain {
		padding: 8px 20px;
		row-gap: 0px;
		column-gap: 20px;
		justify-content: center;
	}
}

/* TINY SCREEN PHONES */
@media screen and (max-width: 380px) {
	.choices {
		gap: 3px;
	}
	.choice h2 {
		font-size: 0.7rem;
	}
	.choice span {
		display: none;
	}
}