/* BASIC STYLING */
  body {
    margin:0;
    padding:0;
  }

/* 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%;
}

/* MOBILE BASIC STYLING */

@media only screen and (max-width:400px) {

}


/* THIS IS FOR THE IPHONE 13; 14 and 15 */

@media screen and (min-aspect-ratio: 2.164/1) {

}