/* CSS Document */
/* All comments go between the front slash and asterisk symbols */

body {
	background-color: #e8e6da;   /* background color */
	color: #161515;          /* text color for the entire page */
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

h1 {  
	text-align:left;   /* left justfies h1 and h2 content */
	color:#050739;       /* exploring new text color */
	font-family: "Bruno Ace SC", sans-serif;
	font-weight: 400;
	font-style: normal;
 }
 
 h2 {  
	text-align:left;   /* left justfies h1 and h2 content */
	color:#0c0751;       /* exploring new text color */
	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-style: normal;
 }

 footer {
	padding: 20px;
	margin: 0 auto;
	width: 75%;
	text-align: left;
	font-size: 80%;
	color: #A05050;
 }

/* styles for the "wrapper" div, notice that "wrapper" is preceded by "#" */
#wrapper {
	width: 85%;
	margin: 0 auto;    /* centers wrapper */
}

/* styles for the "stepTitle" class, notice that "stepTitle" is preceded by a dot */
.stepTitle{
	padding:10px;
	text-align:left;
	background-color:#e3e616;
	font-weight: bold;
	font-size: 150%;
 }

.stepContent{ 
	background-color: white;
	padding:7px;
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
}

.stepDescription {
	width:55%;
	padding:5px;
	line-height:145%;
}

.stepImage {
	width:40%;	
	padding:5px;
	text-align: center;
}

.stepImage img {
    width:100%;
    height:auto;
}

strong {
  font-weight: 800;
}

.warning {
	background-color: rgb(255, 237, 138);
	padding:10px;
	border-radius:20px;
}

.warning strong {
	color: red;
	font-weight: bold;
}

.material-icons {
	color:red; 
	font-weight: bold;
	font-size:1.5em;
}