/* CSS Reset */
body, header, nav, main, footer, img{
    margin: 0;
    padding: 0;
    border: 0;
}

body,img{
	background-color:#e6e6fa;
	max-width:100%;
	display:block;
}

/* Style rules for body and images*/
nav{
	background-color:#7b68ee;
}

nav ul{
	list-style-type:none;
	margin:0;
	text-align:center;
}

nav li{
	display:inline-block;
	font-size:1.5em;
	font-family:Aptos,sans-serif;
	font-weight:bold;
}

nav li a{
	display:block;
	color:#add8e6;
	padding:0.5em 2em;
	text-decoration: none;
}

.mobile{
	display:block;
}

.tab-desk{
	display:none;
}	

.mobile h1,.mobile h3{
	font-family:Aptos,sans-serif;
	padding:2%;
	text-align: center;
	color:#9370db;
}	

nav{
	background-color: #7b68ee;
}

nav ul{
	list-style-type:none;
	text-align:center;
}

nav li{
	display:block;
	font-size:1.5em;
	font-family:Aptos,sans-serif;
	font-weight:bold;
	border-top:0.5px solid #7b68ee;
}

nav li a{
	display:block;
	color:#f6eee4;
	padding:0.5em 2em;
	text-decoration: none;
}
main{
	padding:2%;
	font-family:Aptos,sans-serif;
	color:#9370db;
}

aside, #body{
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	color:#9370db;
	text-shadow: 4px 4px 10px #c5a687;
}	

figure{
	border:4px solid #2a1f14;
	box-shadow: 6px 6px 10px #c5a687;
	max-width: 400px;
	margin: 2% auto;
}

figcaption{
	padding:2%;
	text-align: center;
	border-top:4px solid;
	
}


#info a{
	margin-left:50%;
}	


#info {
	text-align: center;
	font-size: 1.0em;
	font-weight: bold;
}	

#info a{
	margin-left:10%;
}

#info p{
	text-align: center;
	font-size: 1.0em;
	font-weight: bold;
}	

#questions p{
	cursor:pointer;
	text-align: center;
}

#answer {
	text-align: center;
	font-weight: bold;
	width: 80%;
	margin: 0 auto;
}

#answer h2{
	display: none;
}

/* Style rules for footer content */
footer{
	text-align:center;
	font-size:1.00em;
	background-color:#7b68ee;
	padding:1% 0% 1% 0%;
}
	
/* Tablet Viewport*/
@media screen and (min-width: 620px),print{

.tab-desk{
		display: block;
}
	
.mobile{
		display: none;
}	
.grid{
	display: grid;
	grid-template-columns: auto;
	grid-gap: 10px;
}	
	
aside{
	grid-column: 1 / span 1;
}	

	
/*Tablet Viewport: Style rules for nav area */
	
	



	nav li{
		border-top: none;
		display: inline-block;
		font-size: 1.25em;
		font-family:Geneva, arial, sans-serif;
		font-weight: bold;
	}

	nav li a{
		padding: 0.5em;
		display: block;
		color: #f6eee4;
		text-decoration: none;
	}
	
	.grid{
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 10px;
	}	
	
	aside{
		grid-column: 1 / span 2;
	}	
	
	/*Tablet Viewport: Style rule for form element*/
	form{
		width:70%;
		margin:0 auto;
	}	
}




/* Media Query for Desktop Viewport*/

@media screen and (min-width:1000px),print{

/*Desktop Viewport: Show desktop class, hide mobile-tablet class*/

.desktop {
	display:block;
}

.mobile-tablet {
	display: none;
}		

nav li {
	font-size: 1.5em;
}


nav li a{
	padding: 0.5em 1.5em;
}

nav li a:hover{
	color: #2a1f14;
	background-color: #f6eee4;
	opacity: 0.5;
}

.grid{
	grid-template-columns: auto auto auto;
	grid-gap: 10px;
}

aside {
	grid-column: 1 / span 3;
	font-size: 2em;
}

}



@media screen and (min-width:1921px),print{

#wrapper {
        width: 1920px;
        margin: 0 auto;
}
        
}