/* Lesson 5 Example 1 */
.container {
background-color: lightgrey;
border: 2px solid #264653;
max-width: 500px;
height:300px;
margin: 0 auto;
margin-bottom: 20px;
}

.green {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
}

.yellow {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
}

.dark-orange {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
}

.light-orange {
background-color: #f4a261;
font-size: 20px;
text-align: center;
align-content: center;
}

h1 {
text-align: center;
padding: 15px;
font-size: 30px;
}

/* Lesson 5 Example 2 */
.container2 {
background-color: lightgrey;
border: 2px solid #264653;
max-width: 500px;
height:300px;
margin: 0 auto;
margin-bottom: 20px;
display: flex;
}

.green2 {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
}

.yellow2 {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
}

.dark-orange2 {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
}

.light-orange2 {
background-color: #f4a261;
font-size: 20px;
text-align: center;
align-content: center;
}

h2 {
text-align: center;
padding: 15px;
font-size: 30px;
}

/* Lesson 5 Example 3 */
.container3 {
background-color: lightgrey;
border: 2px solid #264653;
max-width: 500px;
height:300px;
margin: 0 auto;
margin-bottom: 20px;
display: inline-flex;
}

.green3 {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
}

.yellow3 {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
}

.dark-orange3 {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
}

.light-orange3 {
background-color: #f4a261;
font-size: 20px;
text-align: center;
align-content: center;
}

h3 {
text-align: center;
padding: 15px;
font-size: 30px;
}