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

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

/* 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) {

}