/* 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{
		margin-left:auto;
		margin-right:auto;
		width: 85%;
		background-color: #FFFFFF;
	}

	/*header layout*/
	.headernav{
		display:grid;
		grid-template-columns: auto auto auto;
	}
	
	h1 {
		grid-column-start: 2;
		grid-column-end: 4;
		text-align:center;
	}

	/*nav layout */
	.topnav{
		display: grid;
		grid-template-columns: auto auto auto auto;
	}
	/*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 auto auto;
		grid-template-rows: auto auto auto;
	}
	
	#hello{ 
		text-align: center;  
		grid-column: 2 / 4;
		grid-row: 1;
	}
	#intro{
		grid-column-start: 2;
		grid-column-end: 4;
		grid-row: 2;
	}
	
	
	/*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*/

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

	img {
		display: block;
		max-width: 100%; 
		height:auto;
	}
	
	body {
		background-color: #424b54;
	}
	

/*Heading*/

	header{
		background-color: #ebcfb2;

	}

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

/* Nav */

	nav {
		background-color: #c5baaf;
	}

	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;
	}
	
	
	#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;
	}