/* Colors:

	Charcoal- 424b54
	Desert Sand- ebcfb2
	Pale Silver- c5baaf
	White- ffffff
	
	Accent colors:
		Sea Green Crayola- 18f2b2
		Vivid Burgundy- a62639
		Dogwood Rose (pink)- d90368
		Fern Green- 3a7d44
		Blue jeans- 00a6fb
		Deep pink- Ec368d
		Red orange color wheel- ff4a1c
	


*/

/*I will condense this later. Right now, it is helping me put things in line*/

/* Page layout */

	.grid-container{
		background-color: #FFFFFF;
		border: 5px ridge;
	}

	/*header layout*/
	
	
	h1 {
		text-align:center;
		margin-right: auto;
		margin-left:auto;
		margin-bottom: 0px;
		margin-top:0px;
		padding-top: 3%;
		padding-bottom: 3%;
	}

	/*nav layout */

	/*On smaller screen sizes either make text smaller or make two rows */
	#add{
		grid-column-start:1;
		grid-column-end:2;
		text-align: center;
	}
	
	#sub{
		grid-column-start:2;
		grid-column-end:3;
		text-align: center;
	}
	
	#mul{
		grid-column-start:3;
		grid-column-end:4;
		text-align: center;
	}
	
	#divi{
		grid-column-start:4;
		grid-column-end:5;
		text-align: center;
	}

	/*Intro layout*/
	.intro{
		display:grid;
		grid-template-columns: auto auto auto;
		grid-template-rows: auto auto auto;
	}
	
	#hello{ 
		text-align: center;  
		grid-column: 2 / 3;
		grid-row: 1;
	}
	#intro{
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row: 2;
	}
	
	iframe{
		grid-column: 2 / 3;
		grid-row: 3;
		margin-left: auto;
		margin-right: auto;
		max-width: 95%;
	}
	
	
	/*Quizzes layout*/
	.quizzes{
		display:grid;
		grid-template-columns: auto auto auto auto;
		grid-template-rows: auto auto auto auto auto auto auto auto;
	}
	
		/* on smaller screen sizes it will be two pictures per row */
	
	#learn{
		text-align: center;
		grid-column: 1 / 5;
		grid-row: 1;
	}
	
	#beginner{
		text-align:center;
		grid-column: 1 / 5;
		grid-row:3;
	}
	
	#intermediate{
		text-align:center;
		grid-column: 1 / 5;
		grid-row: 5;
	}
	
	#expert{
		text-align: center;
		grid-column: 1 / 5;
		grid-row: 7;
	}


/*overall*/

	*{
		font-family: "Garamond", Times, serif;
	}

	.a{
		color: #Ec368d;
	}
	
	.s{
		color: #00a6fb;
	}
	
	.m{
		color: #18f2b2;
	}
	
	.d{
		color: #ff4a1c;
	}
	
	a{
		text-decoration: none;
	}

	img {
		display: block;
		max-width: 100%; 
		height:auto;
	}
	
	body {
		background-color: #424b54;
	}
	
	h3{
		font-size: 3em;
		text-align: center;
	}
	

/*Heading*/

	header{
		background-color: #ebcfb2;

	}

	h1 {
		font-family: "Garamond", Times, serif;
		font-size: 5em;
		
	}
	

	

/* Nav */

	nav {
		background-color: #c5baaf;
		border-top: 5px soild;
	}

	ul{
		list-style-type:none;
		margin:0;
		padding:0;
	}

	li a{
		display: inline;
		text-decoration: none;
		font-family: "Garamond", Times, serif;
		font-size: 2em;
		color: #000000;
	}
	
	
	#add  a:hover {
		color: #Ec368d;	
	}
	
	#sub  a:hover {
		color: #00a6fb;
	}
	
	#mul a:hover {
		color: #18f2b2;
	}
	
	#divi a:hover {
		color: #ff4a1c;
	}
	
	
	#add a:visited {
		color: #Ec368d;	
	}
	
	#sub a:visited {
		color: #00a6fb;
	}
	
	#mul a:visited {
		color: #18f2b2;
	}
	
	#divi a:visited {
		color:#ff4a1c;
	}
	
	
/*Intro*/
	#hello{
		font-family: "Georgia", Times, serif;
		font-size: 4em;
		margin: 0px;
		border-top: 10px solid #ffffff;
		border-bottom: 10px solid #ffffff;
	}
	#intro{
		font-family: "Garamond", Times, serif;
		font-size: 2em;
		text-indent: 2em;
		margin-top:5px;
		margin-bottom:0px;
		padding: 4%;
	}
	
	
/*Quizzes*/
	h2 {
		font-family: "Georgia", Times, serif;
		font-size: 4em;
		background-color: #c5baaf;
		text-align: center;
	}
	
	
	#learn{
		margin-top: 5px;
		margin-bottom: 0px;
	}
	
	#beginner {
		margin-top:0px;
		margin-bottom: 0px;
	}
	
	#intermediate{
		margin-top: 0px;
		margin-bottom: 0px;
	}
	
	#expert{
		margin-top: 0px;
		margin-bottom: 0px;
	}
	
	/*Hover effect*/
		/* learned how to on W3schools */
	
		.container {
			position: relative;
		}
		.container:hover .overlayadd {
			opacity: 1;
		}
		
		.container:hover .overlaysub{
			opacity: 1;
		}
		
		.container:hover .overlayx{
			opacity: 1;
		}
		
		.container:hover .overlaydivide{
			opacity: 1;
		}
		
	.overlayadd{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
		opacity: 0;
		transition: .75s ease;
		background-color: #Ec368d;
	}
	
	.overlaysub{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
		opacity: 0;
		transition: .75s ease;
		background-color: #00a6fb;
	}
	
	.overlayx{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
		opacity: 0;
		transition: .75s ease;
		background-color: #18f2b2;
	}
	
	.overlaydivide{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
		opacity: 0;
		transition: .75s ease;
		background-color: #ff4a1c;
	}
	
	
	.add {
		color: #ffffff;
		font-size: 2em;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate (-50%, -50%);
	}
	
	
	
/* Footer */
	footer {
		text-align: center;
		background-color: #ebcfb2;
	}
	
	
	
	
	
	
/* Pages */
	/*Add*/
		#addlearn, #sublearn, #mullearn, #divlearn{
			margin-top: 5px;
			margin-bottom: 5px;
		}
		
		.aq{
			border: 5px groove;
			padding: 5px;
			margin: 3px;
			margin-top: 10px;
		}
		
		.aex{
			border: 5px double;
			margin: 3px;
			padding: 5px;
		}
		
		
		
		
		h3{
			margin: 5px;
			background-color: #ebcfb2;
			border: 3px solid;
		}
		
		.aq .q{
			text-align: center; 
			background-color: #ebcfb2;
			font-size: 3em;
			border: 3px solid;
			margin: 2px;
		}
		
		.aq h2{
			font-size: 3em;
			margin: 5px;
		}
		
		
		
		
		.q{
			position: relative;
		}
		
		
		.ocor{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100%;
			width: 100%;
			opacity: 0;
			transition: .25s ease;
			background-color: #a3c585;
		}
		
		.oinc{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100%;
			width: 100%;
			opacity: 0;
			transition: .5s ease;
			background-color: #c58585;
		}
		
		
		
		
		.q:hover .ocor{
			opacity: 1;
		}
		
		.q:hover .oinc{
			opacity: 1;
		}
		
		.cor{
			color: #000000;
			font-size: .5em;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate (-50%, -50%);
		}
		
		.inc{
			color: #000000;
			font-size: .5em;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate (-50%, -50%);
		}
		
		
		
		.ident{
			padding: 10px;
			display: grid;
			grid-template-rows: auto;
			grid-template-columns: 20% 80%;
			border-bottom: 2px solid;
			margin-top: 5px;
		}
		
		input{
			margin: 5px;
		}
		
		label{
			font-size: 1.5em;
		}
		
		legend{
			font-size: 1.75em;
		}
		
		.multchoice{
			border-bottom: 2px solid;
		}
		
		.multchoice fieldset{
			display: grid;
			grid-template-columns: 25% 25% 25% 25%;
			margin: 10px;
		}
		
		.longans{
			display: grid;
			grid-template-columns: 50% 50%;
			
		}
		
		.apples{
			display:grid;
			grid-template-columns:20% 20% 20% 20% 20%;
		}
		
		.cb{
			display: grid;
			grid-template-columns: 25% 25% 25% 25%;
			font-size: 2em;
		}
		
		
	@media (max-width: 600px){
		.topnav li{
			border: 3px solid #ffffff;
		}
		
		.grid-container{
			margin-left:auto;
			margin-right:auto;
			width: 95%;
		}
		
		table{ 
			width: 100%; 
			text-align: center; 
			font-size: .75em;
			border-collapse: collapse;
		}
		
		
	}		
		
		
		
	
	@media (min-width: 600px){
			
		.topnav{
			display: grid;
			grid-template-columns: auto auto;
			font-size: .75em;
		}
			
		.aq{
			display:grid;
			grid-template-columns: auto auto;
			grid-template-rows: auto auto auto auto;
		}
		
		h3{
			grid-column: 1/3;
		}
		
		
		.aq h2{
			grid-column: 1/3;
		}
		
		.grid-container{
			margin-left:auto;
			margin-right:auto;
			width: 85%;
		}
		
		table{ 
			margin-right: auto; 
			margin-left: auto; 
			width: 90%; 
			text-align: center; 
			font-size: 1.25em;
			border-collapse: collapse;
		}
		
		
		
	}
	
	
	@media (min-width: 1024px){
		.topnav{
			display: grid;
			grid-template-columns: auto auto auto auto;
			font-size: 1.25em;
		}
		
		
		.multchoice{
			display: grid;
			grid-template-columns: 50% 50%;
		}
		
		
		.aq{
			display:grid;
			grid-template-columns: auto auto auto auto;
			grid-template-rows: auto auto auto;
		}
		
		h3{
			grid-column: 1/5;
		}
		
		
		.aq h2{
			grid-column: 1/5;
		}
		
	}