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

.green {
background-color: #2a9d8f;
font-size: 21px;
}

.yellow {
background-color: #e9c46a;
font-size: 21px;
}

.dark-orange {
background-color: #e76f51;
font-size: 21px;
}

.light-orange {
background-color: #f4a261;
font-size: 21px;
}

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

.green2 {
background-color: #2a9d8f;
font-size: 21px;
}

.yellow2 {
background-color: #e9c46a;
font-size: 21px;
}

.dark-orange2 {
background-color: #e76f51;
font-size: 21px;
}

.light-orange2 {
background-color: #f4a261;
font-size: 21px;
}

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

.green3 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
}

.yellow3 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
}

.dark-orange3 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
}

.light-orange3 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
}

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

.green4 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: flex-start;
}

.yellow4 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: flex-start;
}

.dark-orange4 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: flex-start;
}

.light-orange4 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: flex-start;
}

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

.green5 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
}

.yellow5 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
}

.dark-orange5 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
}

.light-orange5 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
}

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

.green6 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: flex-end;
}

.yellow6 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: flex-end;
}

.dark-orange6 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: flex-end;
}

.light-orange6 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: flex-end;
}

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

.green7 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
}

.yellow7 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
}

.dark-orange7 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
}

.light-orange7 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
}

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

.green8 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.yellow8 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.dark-orange8 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.light-orange8 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

/* Lesson 3 Example 9 */
.container9 {
max-width: 1000px;
height: 700px;
margin: 0 auto;
background-color: lightgray;
border: 2px solid #264653;
display: flex;
align-items: flex-end;
}

.green9 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.yellow9 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.dark-orange9 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.light-orange9 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

/* Lesson 3 Example 10 */
.container10 {
max-width: 1000px;
height: 700px;
margin: 0 auto;
background-color: lightgray;
border: 2px solid #264653;
display: flex;
justify-content: space-between;
}

.green10 {
background-color: #2a9d8f;
font-size: 21px;
/* flex-basis: 25%; */
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.yellow10 {
background-color: #e9c46a;
font-size: 21px;
/* flex-basis: 25%; */
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.dark-orange10 {
background-color: #e76f51;
font-size: 21px;
/* flex-basis: 25%; */
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.light-orange10 {
background-color: #f4a261;
font-size: 21px;
/* flex-basis: 25%; */
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

/* Lesson 3 Example 11 */
.container11 {
max-width: 1000px;
height: 700px;
margin: 0 auto;
background-color: lightgray;
border: 2px solid #264653;
display: flex;
justify-content: space-around;
}

.green11 {
background-color: #2a9d8f;
font-size: 21px;
/* flex-basis: 25%; */
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.yellow11 {
background-color: #e9c46a;
font-size: 21px;
/* flex-basis: 25%; */
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.dark-orange11 {
background-color: #e76f51;
font-size: 21px;
/* flex-basis: 25%; */
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.light-orange11 {
background-color: #f4a261;
font-size: 21px;
/* flex-basis: 25%; */
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

/* Lesson 3 Example 12 */
.container12 {
max-width: 1000px;
height: 700px;
margin: 0 auto;
background-color: lightgray;
border: 2px solid #264653;
display: flex;
justify-content: space-evenly;
}

.green12 {
background-color: #2a9d8f;
font-size: 21px;
/* flex-basis: 25%; */
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.yellow12 {
background-color: #e9c46a;
font-size: 21px;
/* flex-basis: 25%; */
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.dark-orange12 {
background-color: #e76f51;
font-size: 21px;
/* flex-basis: 25%; */
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.light-orange12 {
background-color: #f4a261;
font-size: 21px;
/* flex-basis: 25%; */
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

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

.green13 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.yellow13 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.dark-orange13 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.light-orange13 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

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

.green14 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.yellow14 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.dark-orange14 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.light-orange14 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

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

.green15 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.yellow15 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.dark-orange15 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.light-orange15 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

/* Lesson 3 Example 16 */
.container16 {
max-width: 1000px;
height: 700px;
margin: 0 auto;
background-color: lightgray;
border: 2px solid #264653;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}

.green16 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.yellow16 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.dark-orange16 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.light-orange16 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

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

.green17 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.yellow17 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.dark-orange17 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.light-orange17 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

/* Lesson 3 Example 18 */
.container18 {
max-width: 1000px;
height: 700px;
margin: 0 auto;
background-color: lightgray;
border: 2px solid #264653;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}

.green18 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.yellow18 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.dark-orange18 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.light-orange18 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

/* Lesson 3 Example 19 */
.container19 {
max-width: 1000px;
height: 700px;
margin: 0 auto;
background-color: lightgray;
border: 2px solid #264653;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}

.green19 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.yellow19 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.dark-orange19 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.light-orange19 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

/* Lesson 3 Example 20 */
.container20 {
max-width: 1000px;
height: 700px;
margin: 0 auto;
background-color: lightgray;
border: 2px solid #264653;
display: flex;
flex-wrap: wrap;
align-content: space-evenly;
}

.green20 {
background-color: #2a9d8f;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.yellow20 {
background-color: #e9c46a;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.dark-orange20 {
background-color: #e76f51;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.light-orange20 {
background-color: #f4a261;
font-size: 21px;
flex-basis: 25%;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}