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

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

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

}