/* Make versioning for this like other css files */

/* ^display */
.dn {
	display: none;
}

.di {
	display: inline;
}

.db {
	display: block;
}

.dib {
	display: inline-block;
}

/* ^width  */
.w12 {
	width: 12rem;
}

.w14 {
	width: 14rem;
}

.w-50 {
	width: 50%;
}

.w-100 {
	width: 100%;
}

/* ^height */
.h4 {
	height: 4rem;
}

.h-100 {
	height: 100%;
}

/* ^margin */
.mx-au {
	margin: 0 auto;
}

.mb0 {
	margin-bottom: 0;
}

.mb025 {
	margin-bottom: 0.25rem;
}

.mb1 {
	margin-bottom: 1rem;
}

.mb5 {
	margin-bottom: 5rem;
}

.mt0 {
	margin-top: 0;
}

.mt025 {
	margin-top: 0.25rem;
}

.mt075 {
	margin-top: 0.75rem;
}

.mt2 {
	margin-top: 2rem;
}

.nt4 {
	margin-top: -4rem;
}

.pb0 {
	padding-bottom: 0;
}

/* ^border */
.ba2 {
	border-style: solid;
	border-width: 2px;
}

/* ^font */
.tc {
	text-align: center;
}

.f175 {
	font-size: 1.75rem;
}

.f25 {
	font-size: 2.5rem;
}

/* ^font-family */
.fw8 {
	font-weight: 800;
}

.underline {
	text-decoration: underline;
}

.visible {
	visibility: visible !important;
}

.invisible {
	visibility: hidden !important;
}

/*   ^colour ^font  */
.red-15 {
	color: #ef5350;
}

.orange-15 {
	color: #ffa726;
}

.yellow-15 {
	color: #ffee58;
}

.green-15 {
	color: #66bb6a;
}

.white {
	color: rgba(255, 255, 255, 1);
}

/* ^color ^background  */
.bg-orange-15 {
	background-color: #ffa726;
}

/*   ^color ^border   */

.b--white {
	border-color: rgba(255, 255, 255, 1);
}

/* @media screen and (min-width: 100px) { */
@media screen and (max-width: 599px) {
	/* ^font */
	.f2-m5 {
		font-size: 2rem;
	}
}

/* This turns the vertical scroll bar on */
html {
	overflow-y: scroll;
}

::selection {
	background: #fff5b8;
	color: #000;
	display: block;
}

::-moz-selection {
	background: #fff5b8;
	color: #000;
	display: block;
}

/* It's best to develop a combination of background color and font color  and maybe even spacing with it or border */

.answers {
	/* height: 100%; */
	width: 100%;
	background-image: url("../images/background2.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position-y: top;
	background-position-x: center;
	background-color: blue;
	object-fit: fill;
	margin: 0;
	padding: 0;
	/* padding-top: 4rem; */
	margin-top: 65px;
}

/* .answers__box {
	background-image: url("../images/background.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
} */

#timer__box {
	/* height: 20rem;
  width: 70%;
  margin: 0 auto; */
	border: 2px;
	border-color: pink;
}

#timer__box svg {
	/* height: 40%; */
	width: 35%;
	margin: 0 auto;
}

#modal-overlay {
	display: inline-block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	pointer-events: none;
	z-index: 10000;
}

#results {
	display: none;
	position: absolute;
	top: 270px;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10000;
	pointer-events: all;
	width: 40%;
	min-width: 320px;
	padding: 0.5rem 1rem;
	background-image: linear-gradient(
		-90deg,
		#136,
		#35b,
		#35b,
		#35b,
		#148,
		#24b,
		#35b
	);
	background-color: blue;
	opacity: 1;
	text-align: center;
	border-color: white;
	border-style: solid;
	border-width: 4px;
	font-size: 1.25rem;
	-webkit-user-select: none;
	/* Chrome all / Safari all */
	-moz-user-select: none;
	/* Firefox all */
	-ms-user-select: none;
	/* IE 10+ */
	user-select: none;
}

.results__table {
	text-align: center;
	margin: 1rem auto;
	width: 250px;
	color: white;
	/* border: 1px solid white; */
	line-height: 1;
	border-collapse: separate;
	border-spacing: 10px 0;
}

.results__table tr > td:first-of-type {
	text-align: left;
	color: orange;
}

.results__table button {
	pointer-events: all;
	cursor: pointer;
}

.question {
	/* background-image: url("../images/answer.svg");  */
	/* background-size: 80% 87%; */
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 50px;
}

.question {
	display: inline-block;
	width: 100%;
	user-select: none;
}

.answers-div {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.answers__option {
	display: inline-block;
	/* width: 50%; */
	user-select: none;
	flex-basis: 50%;
}

.answers__option .mt0 {
	text-align: left;
}

.question svg text {
	text-anchor: middle;
	fill: white;
	font-size: 48px;
	font-weight: 700;
}

@media screen and (max-width: 500px) {
	.question svg text {
		font-size: 52px !important;
	}
}

#explanation {
	margin: 0 auto;
	margin-bottom: 2rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
	font-size: 1.5rem;
	color: white;
	line-height: 1;
	height: 16rem;
}

@media screen and (max-width: 700px) {
	#timer__box {
		padding-top: 3rem;
		padding-bottom: 2rem;
	}

	.question {
		margin: 4rem 0;
	}

	/* .answers__option:first-of-type { */
	/* .answers-div {
				width: 100%;
      } */
	.answers__option {
		flex-basis: 100%;
	}

	#explanation {
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 500px) {
	#timer__box {
		padding-top: 4rem;
		padding-bottom: 2rem;
	}

	.question {
		margin: 2.5rem 0 1.5rem 0;
	}

	#explanation {
		font-size: 1.25rem;
	}
}

#pass {
	/* display: inline-block;  */
	background-color: transparent;
	border-width: 0;
}

.btn {
	display: inline-block;
	vertical-align: middle;
	text-decoration: none;
	cursor: pointer;
	outline: none;
	user-select: none;
	outline: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}