/* CSS variable colors*/
:root {
  --primary-teal: #1E88E5;/*600*/
  --primary-teal-light: #448AFF;/*A200*/
  --secondary-red: #E53935;/*600*/
  --secondary-red-light: #EF5350;/*400*/
  --dark-red: #460000;
  --green: #16C60C;
  --grey-background: #E0E0E0;
}
/*fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

* {
	box-sizing: border-box;
}
html {
	background: rgba(30, 136, 229, .5);
}

html, body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  font-family: "Roboto", 'Helvetica', Neue, Helvetica, Arial;
}
/*I think i only need one center in each*/
body {
	background: url(/images/statueLiberty.jpg) no-repeat center center fixed,
	url(/images/CapitalLegislative.jpg) no-repeat center center fixed,
	url(/images/whtHouseExec.jpg) no-repeat center center fixed,
	url(/images/Judicial.jpg) no-repeat center center fixed,
	url(/images/SupremeCourt.jpg) no-repeat center center fixed;
	background-size: cover,0,0,0,0;
	font-size: 18px;
	line-height: 28px;
}
p {
	letter-spacing: .75px;
}
h1 {
	font-size: 4em;
	font-weight: 700;
}
h2 {
	font-size: 1.87em;
	font-weight: 500;
	font-style: normal;
}
h3, summary {
	font-size: 1.56;
	font-weight: 500;
	font-style: normal;
}
hr {
  background: var(--primary-teal);
  height: 1px;
}
small {
	color: var(--secondary-red);
}
header {
	background: var(--primary-teal);
	width: 100%;
	height: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	color: white;
}
.header-title {
	text-align: center;
	text-decoration: underline;
	text-decoration-color: var(--secondary-red);
	line-height: 20px;
}
.header-title a {
	text-decoration-color: var(--secondary-red);
	color: white;
}
button {
	cursor: pointer;
	text-decoration: none;
	border: none;
	border-radius: 5px;
	padding: 20px 40px;
	font-size: 20px;
	font-weight: 700;
	color: white;
	transition-duration: 0.4s;
}
footer {
	background: var(--primary-teal);
	position: absolute;
	text-align: center;
	bottom: 0;
	width: 100%;
}
.fa-flag-usa {
	color: white !important;
}
footer a {
	text-decoration: none;
	color: white;
}
footer a:hover {
	color:  var(--dark-red);
}
.main-card {
	width: 90%;
	min-width: 370px;
	max-width: 860px;
	margin-top: 46px;
	margin-left: auto;
	margin-right: auto;
}
.q-card {
	width: 90%;
	min-width: 370px;
	max-width: 860px;
	margin: 46px auto;
	padding-bottom: 12px;
}
.track-card {
	width: 90%;
	min-width: 370px;
	max-width: 860px;
	margin-top: 46px;
	margin-left: auto;
	margin-right: auto;
}
.login {
	color: white;
}
.error {
	color:  var(--secondary-red);
}
.signed-in-card {
	width: 90%;
	min-width: 370px;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}
.wrapper-bottom-header {
	display: grid;
	grid-template-columns: auto 1fr auto;
}
.log-out {
	cursor: pointer;
	padding: 10px 20px;
	background: none;
	border: none;
	grid-column: 1;
	font-size: 20px;
	color: var(--dark-red);
	margin: 0px;
	transition-duration: 0.4s;
}
.log-out:hover {
	background: var(--secondary-red);
	border-radius: 5px;
}
.log-out:active {
	color: white;
}
.signed-in {
	grid-column: 3;
	font-size: 20px;
	color: var(--dark-red);
	margin: 0px;
	padding: 10px 0;
}
.wrapper-main {
	display: grid;
	row-gap: 12px;
	column-gap: 12px;
	grid-template-columns: repeat(2, auto);
	grid-template-rows: repeat(2, auto);
}
.wrapper-inner-main {
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.75);
	grid-row: 1;
	grid-column: 1 / span 2;
}
.user-register {
	display: grid;
	column-gap: 12px;
	row-gap: 12px;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr auto auto auto;
}
.user-login {
	display: grid;
	column-gap: 12px;
	row-gap: 12px;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr auto 63px;
}
.wrapper-q {
	display: grid;
	grid-row-gap: 12px;
	grid-template-columns: minmax(auto, 860px);
	grid-template-rows: auto;
}
.question {
	position: relative;
	grid-row: 1;
	background: rgba(255, 255, 255, 0.75);
	border-radius: 5px 5px;
}
.label-one {
	grid-column: 1;
}
.label-two {
	grid-column: 2;
}
.label-three {
	grid-column: 1 / span 2;
	grid-row: 3;
}
.password-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}
.password-wrapper input {
	height: 100%;
	width: 85%;
	font-size: 20px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	padding: 18px 15px;
	border: none;
}
.hide-eye-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	padding: 18px 15px;
	width: 14.5%;
	cursor: pointer;
	background:  white;
	height: 100%;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
#eye {
	display: none;
}

.fas {
	font-size: 23px;
	color: var(--primary-teal-light);
}
.input-container {
	border-radius: 5px;
	font-size: 20px;
	width: 100%;
	padding: 18px 15px;
	border: none;
}
.about-title {
	font-size: 2em;
	font-weight: 500;
	text-align: center;
	padding: 5px 20px;
  padding-bottom: 0;
}
.error-title {
color: var(--secondary-red);
text-align: center;
padding:  5px 20px;
padding-bottom: 0;
}
.align-left {
	text-align: left;
}
.align-center {
	text-align: center;
}
.grade {
	margin: 16px 0 16px 0;
	color: var(--secondary-red);
	font-size: 4em;
	line-height: 64px;
}
.check-mark {
	width: 50px;
	height: 250px;
	margin-left: 55%;
	background: var(--green);
	transform: rotate(45deg);
}
.check-mark:before {
	content: '';
	width: 150px;
	height: 50px;
	background: var(--green);
	position: absolute;
	left: -100px;
	bottom: 0px;
}
.kudos {
	margin-top: 5px;
}
details {
  text-align: center;
  cursor: pointer;
}
.table-holder {
  display: grid;
  justify-content: center;
  /*background: blue;*/
}
.table {
  table-layout: auto;
  width: 409px;
  border-collapse: collapse;/* or seperate*/
}
tr {
  border: 2px solid black;
  background: var(--grey-background);
}
th {
  padding: 10px 15px;
}
td {
  text-align: center;
  padding: 10px 15px;
}
.table-header {
  background: var(--primary-teal);
  color: white;
  border: 2px solid black;
  height: 41px;
}
.q-amount {
	position: absolute;
	right: 5px;
	top: 5px;
	padding: 5px 5px;
	color: var(--primary-teal);
	border-radius: 5px;
}
.q-promt {
	padding: 40px 20px;
  padding-bottom: 20px;
	font-size: 20px;
	font-weight: 500;
	font-style: normal;
}
.about-body {
	padding: 0 20px;
}
.error-body {
	padding: 0 20px;
	text-align: center;
}
/*About*/
.btn-div-1 {
	display: grid;
	grid-row: 2;
	grid-column: 2;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 12px;
}
/*Register*/
.btn-div-2 {
	display: grid;
	grid-column: 2;
	grid-row: 4;
	column-gap: 12px;
	grid-template-columns: repeat(2, 1fr);
}
/*Login */
.btn-div-3 {
	display: grid;
	grid-column: 2;
	grid-row: 2;
	column-gap: 12px;
	grid-template-columns: repeat(2, 1fr);
}
/*grid-row prob not needed*/
.btn-div-questions {
	display: grid;
	grid-row: 2;
	position: relative;
	bottom: -75px;/* +12px padding*/
	grid-template-columns: repeat(4, 1fr);
	column-gap: 12px;
}
/* fix below*/
.btn-div-4 {
	display: grid;
	position: relative;
	bottom: -75px;/* +12px padding*/
	grid-row: 2;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 12px;
}
.btn-login-1, .btn-submit-1, .btn-submit-2, .btn-home {
	grid-column: 2;
	background: var(--secondary-red);
}
.btn-submit-3, .btn-grade-test, .btn-retake-2 {
	grid-column: 4;
	background: var(--secondary-red);
}
.btn-grade-test {
	padding: 20px 20px;
}
.btn-retake {
	grid-column: 3;
	background: var(--secondary-red);
}
.btn-continue {
	grid-column: 4;
}
.button-blue {
	background: var(--primary-teal);
}
.btn-login-1:hover, .btn-submit-1:hover, .btn-submit-2:hover, .btn-submit-3:hover, .btn-grade-test:hover, .btn-home:hover, .btn-retake:hover, .btn-retake-2:hover {
	background: var(--secondary-red-light);
}
.button-blue:hover {
	background: var(--primary-teal-light);
}
.btn-login-1:active {
	border: .5px solid var(--secondary-red);
	box-sizing: border-box;
}
.button-blue:active {
	border: .5px solid var(--primary-teal);
	box-sizing: border-box;
}
.btn-login-1:disabled, .button-blue:disabled, .btn-submit-3:disabled {
	cursor: not-allowed;
	background: #cccccc;
	color: #666666;
}
.btn-register-1, .btn-login-2 {
	grid-column: 1;
}
.register-white {
	color: var(--secondary-red);
	background: white;
}
.btn-register-1:hover {
	background: var(--primary-teal-light);
}
.register-white:hover {
	background: rgba(255, 255, 255, .75);
}
.retake-red:hover {
	background: var(--secondary-red-light);
}
.btn-register-1:active {
	border: .5px solid var(--primary-teal);
}
.register-white:active {
	border: .5px solid white;
}
.retake-red:active {
	border: .5px solid var(secondary-red);
}
/* label container for show_questions*/
.container {
	display: block;
	position: relative;
	padding-left: 55px;
	padding-bottom: 20px;
	padding-top: 20px;
	cursor: pointer;
	font-size: 20px;
	user-select: none;
}
/* hide default checkbox */
.container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
/*custom radio button */
.checkmark {
	position: absolute;
	top: 20px;
	left: 20px;
	height: 25px;
	width: 25px;
	border-radius: 50%;
	border: 3px solid #000000;
	box-sizing: border-box;
}
/*hover effect */
.container:hover {
	background-color: rgba(255, 255, 255, 0.75);
}
.container input:focus ~ .checkmark {
	border: 3px solid var(--primary-teal);
}
.container input:checked ~ .checkmark {
	background-color: var(--primary-teal);
}
.reg-req-card {
    display: none;
	}
/* max-width: 411px */
@media only screen and (min-width: 360px) and (max-width: 740px) {
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
	h1 {
		font-size: 2em;
	}
	h2 {
		font-size: 1.5em;
		line-height: 0.5em;
	}
	h3 {
		font-size: 1.5em;
	}
	footer {
		padding: 2px;
		position: static;
		margin-top: auto;
	}
	.mobile-footer {
		position: block; /*position:  absolute;*/
		margin: 0;
	}
	.header-title {
		line-height: 1em;
		padding: 5px;
		margin: 0;
	}
	.wrapper-bottom-header {
		grid-template-columns: auto auto auto;
	}
	.log-out {
		padding: 10px 10px;
		background: none;
		border: none;
		grid-column: 1;
		font-size: 1.25em;
		color: var(--dark-red);
		margin: 0px;
		transition-duration: 0.4s;
	}
	.signed-in {
		font-size: 1.25em;
		color: var(--dark-red);
		text-align: right;
		padding-right: 10px;
	}
	.about-title {
		font-size: 1.5em;
		font-weight: 500;
		text-align: center;
		padding: 0 10px;
  	padding-bottom: 0;
	}
	.align-left {
		text-align: left;
	}
	.main-card {
		min-width: 340px;
		max-width: 860px;
		margin: 10px auto;
		margin-bottom: 30px;
	}
	.table {
	  table-layout: auto;
	  width: 340px;
	}
	.reg-req-card {
		/*background: whitesmoke;*/
		display: block;
		min-width: 340px;
		max-width: 860px;
		border-radius: 5px;
		font-size: .75em;
		padding: 5px 0px;
		text-align: left;
		line-height: 1em;
		color: white;
	}
	.reg-req-card li {
		line-height: 1.5em;
	}
	.track-card {
		min-width: 340px;
		max-width: 860px;
		margin-top: 46px;
	}
	.q-card {
		min-width: 340px;
		max-width: 860px;
		margin-top: 10px;
	}
	.signed-in-card {
		width: 90%;
		min-width: 360px;
	}
	.about-body {
		padding: 10px;
		padding-top: 0;
		padding-bottom: 0;
	}
	.q-promt {
		padding: 10px 10px;
		font-size: 1.25em;
		font-weight: 500;
		font-style: normal;
	}
	.container {
		padding-left: 55px;
		padding-bottom: 10px;
		padding-top: 10px;
		cursor: pointer;
		font-size: 1.25em;
	}
	/*custom radio button */
	.checkmark {
		top: 10px;
		left: 10px;
		height: 25px;
		width: 25px;
	}
	.btn-div-1 {
		display: grid;
 		grid-column: 1 / span 2;
		grid-row-gap: 15px;
		grid-template-columns: repeat(2, 1fr);
	}
	.btn-div-2 {
		grid-column: 1 / span 2;
	}
	.btn-div-3 {
		grid-column: 1 / span 2;
		grid-row: 3;
	}
	.btn-submit-3, .btn-grade-test {
		grid-column: 1 / span 4;
	}
	.btn-register-1 {
		grid-column: 1;
	}
	.label-one {
		grid-column: 1 / span 2;
		grid-row: 1;
	}
	.label-two {
		grid-column: 1 / span 2;
		grid-row: 2;
	}
	.wrapper {
		background: blue;
	}
	.btn-retake {
		grid-column: 1 / span 2;
	}
	.btn-continue, .btn-retake-2 {
		grid-column: 3 / span 2;
	}
}