@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	font-family: 'Rubik', sans-serif;
}

body {
	display: flex;
    flex-flow: column;
	min-height: 100vh;
	font-size: 1rem;
	background-image: url("../images/bg.png");
	/* background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ), url('../images/bg.png'); */
	background-repeat: repeat;
	background-size: 100%;
}

main {
	flex: 1;
	align-self: center;
	padding: 0 1rem;
    width: 100%;
    max-width: 729px;
}

h1, h2, h3, h4, b {
	font-weight: 500;
}

p {
	line-height: 1.5rem;
}

a {
	/* color: #004cbd; */
	color: blue;
}

button {
	cursor: pointer;
}

header {
	padding: 1rem;
	text-align: center;
}

header a.logo {
	display: block;
	margin: 0 auto 1rem auto;
	width: 70%;
}

footer {
	margin-top: 2rem;
	padding: 2rem;
	width: 100%;
	text-align: center;
	background-color: #f6f6f6;
}

footer > div {
	margin: auto;
	max-width: 729px;
}

footer p#copyright {
	margin-top: 1rem;
	font-size: 82.5%;
}

.newSupport {
	margin-top: 1rem;
	font-style: italic;
	color: red;
}

/****** HOME PAGE ******/
.gameSelect {
	max-width: 600px;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto;
}
.gameSelect span {
	text-align: center;
	background-color: lightgrey;
	padding: .25rem;
	cursor: pointer;
}
.gameSelect .selected {
	background-color: white;
}
.braindomTab {
	border-radius: .5rem 0 0 0;
}
.braindom2Tab {
	border-radius: 0 .5rem 0 0;
}

#searchForm {
	margin: 0 auto;
	padding: 2rem;
	max-width: 600px;
	text-align: center;
	border-radius: 0 0 .5rem .5rem;
	background-color: #FFF;
}

#searchForm label {
	display: block;
	margin-bottom: 0.5rem;
}

#searchForm input {
	padding: 0.75rem;
	width: 100%;
	resize: none;
	font-size: 125%;
	border: none;
	border-radius: 0.5rem;
	background-color: #eeeeee;
}

#searchForm input[name="level"] {
	max-width: 100px;
}

#searchForm div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

#searchForm div span {
	width: 100%;
	border-bottom: 1px solid #DFDFDF;
}

#searchForm p {
	margin: 1rem;
}

#searchForm button {
	display: block;
	margin: 1rem auto 0 auto;
	padding: 0 2rem;
	height: 32px;
	font-size: 125%;
	border: none;
	outline: none;
	border-radius: 16px;
	text-transform: uppercase;
	background-color: #52dab2;
	transition-duration: 0.2s;
}

#searchForm button:hover {
	background-color: #73ECC8;
	transition-duration: 0.2s;
}

#searchForm button:active {
	background-color: #52dab2;
	transition-duration: 0.2s;
}

header #searchForm {
	padding: 1rem;
	max-width: 500px;
	margin-bottom: 1.5rem;
}
header .gameSelect {
	max-width: 500px;
}

header #searchForm input {
	padding: 0.407rem;
}

header #searchForm input, header #searchForm button {
	font-size: 100%;
}

header #searchForm p {
	margin: 0.5rem 1rem;
}

section#about {
	margin: 2rem auto;
}

#about p {
	margin-top: 1rem;
}

#about img {
	display: block;
	margin: auto;
	padding: .375rem;
}

.video-container {
	position: relative;
    width: 100%;
	max-width: 600px;
	margin: 0 auto 1rem auto;
    overflow: hidden;
}

.video-container::after {
    content: '';
    display: block;
    padding-top: 56.25%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
	margin: 0;
	padding: 0;
    width: 100%;
    height: 100%;
}


/****** ANSWER PAGE ******/
#levelHeader {
	display: grid;
    grid-template-columns: auto 1fr auto;
    grid-gap: 0.5rem;
    align-items: center;
	margin: 0 auto 0.5rem auto;
	max-width: 729px;
}

#levelHeader h1, #searchHeader {
	font-size: 150%;
	text-align: center;
}

#levelHeader h1 span {
	display: block;
	margin-top: 0.5rem;
	font-size: 16px;
}

#levelHeader img {
	cursor: pointer;
	width: 32px;
}

#levelHeader div {
	width: 32px;
}

#levelHeader img[alt*="Previous"] {
	transform: rotate(90deg);
}

#levelHeader img[alt*="Next"] {
	transform: rotate(-90deg);
}

#answer {
	margin-top: 1.25rem;
	margin-bottom: 1rem;
}

#answer h2 {
	font-size: 125%;
}

#answer p {
	margin: 0.5rem 0 1rem 0;
	padding: 1rem;
	font-weight: 500;
	border-radius: 0.5rem;
	background-color: #FFF;
}

#answer img {
	margin-top: 1rem;
	width: 100%;
}

#answerDescription {
	font-size: 87.5%;
}

.video-container {
	position: relative;
	margin-top: 1rem;
	width: 100%;
	overflow: hidden;
}

.video-container::after {
	content: '';
	display: block;
	padding-top: 56.25%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ez-video-link {
	visibility: hidden;
}

#subscribeBanner {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2rem;
}

#subscribeBanner p {
	margin-right: 0.5rem;
}

.slide-in {
	animation: 1.5s ease slidein;
}

@keyframes slidein {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}
	35% {
		opacity: 100%;
	}
	100% {
		transform: translateX(0);
	}
}



/****** SEARCH PAGE ******/
#searchHeader span {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 16px;
}

#searchList {
	line-height: 2rem;
	list-style-type: none;
}

#searchList li a {
	display: block;
	padding: 1rem 0;
}

#searchList li a {
	color: inherit;
	text-decoration: none;
}

#searchList li a:hover {
	color: #004cbd;
}

#searchList li + li {
	border-top: 1px solid rgba(0, 0, 0, 0.15);
}

#noResults {
	text-align: center;
}


/****** ADS ******/
.square-ad {
	margin: 0 auto 1rem auto;
	width: 300px;
}

.banner-ad {
	margin: 0 auto 1rem auto;
	width: 728px;
}

.mobile-banner-ad {
	margin: 0 auto 1rem auto;
	width: 320px;
}


/****** CCPA ******/
#ccpaBanner {
	position:  fixed;
	display: none;
	bottom: 0;
	z-index: 1000;
	width: 100%;
	padding: 0.75rem;
	font-size: 14px;
	text-align: left;
	box-sizing: border-box;
	background-color: #213e3c;
}

#ccpaBanner p, #ccpaBanner a, #ccpaClose {
	font-family: sans-serif;
	color: #F7F7F7;
}

#ccpaBanner div {
	max-width: 700px;
	margin: 0 auto;
}

#ccpaBanner p {
	max-width: 650px;
}

#ccpaClose {
	position: relative;
	float: right;
	height: 30px;
	width: 30px;
	margin: -7.5px 0 0 5px;
	padding: 0;
	border: none;
	cursor: pointer;
	color: #f7f7f7;
	font-weight: bold;
	background: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#privacySettings button, #CCPAprivacySettings button {
	margin-top: 5px;
	padding: 5px 7.5px;
	border-radius: 5px;
	border: 1px solid #C3C3C3;
	background-color: #E2E2E2;
}

/****** MEDIA BREAKPOINTS ******/
@media screen and (min-width: 750px) {
	main {
		margin: 0 auto;
		padding: 0;
	}

	header a.logo {
		margin: 0 auto 2rem auto;
		width: 550px;
	}

	header #searchForm {
		margin-bottom: 2rem;
	}

	/****** ANSWER PAGE ******/
	#answer {
		margin-top: 2rem;
	}

	#levelHeader {
		margin: 0 auto 1rem auto;
	}

	#levelHeader h1, #searchHeader {
		font-size: 200%;
	}

	#levelHeader h1 span, #searchHeader span {
		font-size: 20px;
	}

	#answerDescription {
		font-size: 100%;
	}
}