/*this is for the responsive design for the code  for my assignment*/

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

body {
	line-height: 1.5;
	font-family: system-ui, sans-serif;
}

/*grid infomation for css will add after finding out what caused my errors*/

/*this moves on the multiscreen styles for different devices*/

/*tablet styles*/
@media only screen and (min-width 600px) and (max-width: 800px) {

	#data ul {
		grid-templete columns: 1fr 1fr;
	}

	#steps ul {
		grid-templete-columns: 1fr 1fr;
	}
}


/*desktop styles*/
@media only screen and (min-width: 801px) {

	#data ul {
		grid-templete-columns: 1fr 1fr;
	}

	#steps ul {
		grid-template-columns: 1fr 1fr;
	}
}



/*defalt css for Multimodal Narrative*/

body {
	font-family: Futura, Arial, sans-serif;
	font-size: 20px;
	background: rgba(154, 108, 132, 0.8); /*light purple color in rgba to match my color pallet*/
	
}

h1 {
	color: #F2F0DF; /*this is a white yellow html code*/
	font-size: 2em;
}


#wrapper {
	width:auto;
    max-width: 1000px;
	padding: 20px;
	margin: 0 auto;
	padding: 35px 85px 85px 100px;
	text-align: justify;
	background-color: #FFD700; /*this is a gold color*/
}

 /*this is for my image so it can fit*/

		img {
			width: 100%;

	}

#statement {

    text-align: justify;
	border: 4px solid black;
	background-color: #FF69B4; /*this is a hot pink color*/
	padding: 5%;

}


.gallery {
	text-align: justify;
	background-color: #FF69B4;
	border: 4px solid black;
	padding: 5%;
}

.main-navigation {

 justify-content: space-between;
 align-items: center;
 padding: 1rem 2rem;

} 
		.header { 
	text-align: center;
	border: 4px solid #FA8072; /*this is a Salmon pink color */
	background-color: #D3D3D3; /*light gray html color code*/ 
	padding: 2%;


		a;link , a:visited {
					color: #FF00FF; 
					/*this will be a Fuchsia which is a light pink and purple color*/
							text-decoration: none;

													}

				a:hover, a:focus {
						color:#DC143C; 
						/*this will be a Crimson red color*/
}

	}


h3 {
	font-size: 1.5em;
	margin: 2% 0;
}
p {
	margin: 2% 0;
}



#vocabulary {

text-align: auto;
padding: 5%;

}



.audio-player {
text-align: auto;
	border: 4px solid #FFBF00; /*this is a Amber yellowcolor */
	background-color: #A9A9A9; /*dark gray html color code*/ 
	padding: 2%;

a;link , a:visited {
					color: #FF00FF; 
					/*this will be a Fuchsia which is a light pink and purple color*/
							text-decoration: none;

													}

				a:hover, a:focus {
						color:#DC143C; 
						/*this will be a Crimson red color*/
}

	}