/* Lesson 4 Example 1 */

.container {
max-width: 1000px;
height: 700px;
margin: 0 auto;
background-color: lightgray;
border: 2px solid #264653;
display: flex;
}

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

.yellow {
background-color: #e9c46a;
font-size: 21px;
width: 150px;
height: 150px;
display: flex; justify-content: center;
align-items: center;
}

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

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

/* 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;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0;
}

.yellow2 {
background-color: #e9c46a;
font-size: 21px;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
}

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

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

/* 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;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0;
}

.yellow2 {
background-color: #e9c46a;
font-size: 21px;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
}

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

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

/* 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;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0;
}

.yellow2 {
background-color: #e9c46a;
font-size: 21px;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
}

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

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

/* 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;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0;
}

.yellow3 {
background-color: #e9c46a;
font-size: 21px;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}

.dark-orange3 {
background-color: #e76f51;
font-size: 21px;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
}

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

/* 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;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0;
}

.yellow4 {
background-color: #e9c46a;
font-size: 21px;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
}

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

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

/* 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;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-right: auto;
}

.yellow5 {
background-color: #e9c46a;
font-size: 21px;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}

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

.light-orange5 {
background-color: #f4a261;
font-size: 21px;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
}

/* 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;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-right: auto;
}

.yellow6 {
background-color: #e9c46a;
font-size: 21px;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}

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

.light-orange6 {
background-color: #f4a261;
font-size: 21px;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
align-self: 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;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-right: auto;
}

.yellow7 {
background-color: #e9c46a;
font-size: 21px;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}

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

.light-orange7 {
background-color: #f4a261;
font-size: 21px;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
align-self: center;
}