/* Lesson 1 Example 1 */
.container {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
}

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

/* Lesson 1 Example 2 */
.container2 {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
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;
}

/* Lesson 1 Example 3 */
.container3 {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
display: flex;
}

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

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

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

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

/* Lesson 1 Example 4 */
.container4 {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
display: flex;
align-items: stretch;
}

.green4 {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.yellow4 {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.dark-orange4 {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.light-orange4 {
background-color: #f4a261;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

/* Lesson 1 Example 5 */
.container5 {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
display: flex;
}

.green5 {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
height: 150px;
}

.yellow5 {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
height: 150px;
}

.dark-orange5 {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
height: 150px;
}

.light-orange5 {
background-color: #f4a261;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
height: 150px;
}

/* Lesson 1 Example 6 */
.container6 {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
display: flex;
align-items: flex-start;
}

.green6 {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.yellow6 {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.dark-orange6 {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.light-orange6 {
background-color: #f4a261;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

/* Lesson 1 Example 7 */
.container7 {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
display: flex;
align-items: flex-end;
}

.green7 {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.yellow7 {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.dark-orange7 {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.light-orange7 {
background-color: #f4a261;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

/* Lesson 1 Example 8 */
.container8 {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
display: flex;
align-items: center;
}

.green8 {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.yellow8 {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.dark-orange8 {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.light-orange8 {
background-color: #f4a261;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

/* Lesson 1 Example 9 */
.container9 {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
display: flex;
flex-wrap: wrap;
}

.green9 {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.yellow9 {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.dark-orange9 {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.light-orange9 {
background-color: #f4a261;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}
/* Lesson 1 Example 10 */
.container10 {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}

.green10 {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.yellow10 {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.dark-orange10 {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.light-orange10 {
background-color: #f4a261;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

/* Lesson 1 Example 11 */
.container11 {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}

.green11 {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.yellow11 {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.dark-orange11 {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.light-orange11 {
background-color: #f4a261;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

/* Lesson 1 Example 12 */
.container12 {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
display: flex;
flex-wrap: wrap;
align-items: center;
}

.green12 {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.yellow12 {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.dark-orange12 {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.light-orange12 {
background-color: #f4a261;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

/* Lesson 1 Example 13 */
.container13 {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
display: flex;
flex-wrap: wrap;
align-content: center;
}

.green13 {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.yellow13 {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.dark-orange13 {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.light-orange13 {
background-color: #f4a261;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

/* Lesson 1 Example 14 */
.container14 {
max-width: 1000px;
height:700px;
margin: 0 auto;
background-color: lightgrey;
border: 2px solid #264653;
display: flex;
align-items: baseline;
}

.green14 {
background-color: #2a9d8f;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
padding: 200px;
}

.yellow14 {
background-color: #e9c46a;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.dark-orange14 {
background-color: #e76f51;
font-size: 20px;
text-align: center;
align-content: center;
flex-basis: 25%;
}

.light-orange14 {
background-color: #f4a261;
font-size: 100px;
text-align: center;
align-content: center;
flex-basis: 25%;
}