.additional-content-heading-container{
    height: 5vh;

    margin-bottom: 10%;    
}

.additional-content-heading{
    
    text-decoration: none;

    color: white;

    font-size: 1em;

}

.additional-content-container{

    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;
        
}

.title-container{

    margin: 5% auto;

}

.link-container{

    margin: 5% auto;

}

#smart-watch-heading, #animation-heading, #threeJS-heading{

    color: white;

}

/*** START OF SMALL SCREENS ***/

@media screen and (min-width: 15em) {  
    
    .additional-content-container{
      
        width: 100vw;
        height: 120vh;            

    }
          
    .title-container h3{

        text-align: center;

    }
    
    .code-pens-examples-container{

        display: flex;
        flex-direction: column;
    }
  
   
    .code-pen-example-container img{
        width: 40%
    }
           
    .title-container h3{
        font-size: 1.25em;
    }

}


@media screen and (min-width: 20em){

    .additional-content-heading-container{
        height: 5vh; 
        
        margin-bottom: 10%;        
    }
    

    .additional-content-heading{
                
        font-size: 1.05em;

        margin: 0 auto;
        
    }

    .additional-content-container{
      
        width: 100vw;
        height: 120vh;            

    }

}

@media screen and (min-width: 25em){

     .additional-content-heading-container{
      
        height: 7vh; 
        
        margin-bottom: 0;        

    }
    
    .additional-content-heading{
                
        font-size: 1.05em;

        margin: 0 auto;
        
    }

    .additional-content-container{
      
        width: 100vw;
        height: 110vh;            

    }

}



@media screen and (min-width: 33em){

     .additional-content-heading-container{
      
        height: 2vh; 
        
        margin-bottom: 0;        

    }
    
    .additional-content-heading{
                
        font-size: 1.05em;

        margin: 0 auto;
        
    }

    .additional-content-container{
      
        width: 100vw;
        height: 170vh;            

    }

}


@media screen and (min-width: 40em) {
    
      #additional-content-heading{
        font-size: 1.5em;
    }

}


@media screen and (min-width: 50em) {
    
    .additional-content-container{              
        height: 120vh;            
    }

    #additional-content-heading{
        font-size: 1.5em;
    }

    .code-pen-example-container img{
        width: 30%
    }

}


@media screen and (min-width: 64em) {
    
     .additional-content-heading-container{
        height: 3vh; 
        
        margin-bottom: 5%;        
    }

    .additional-content-container{              
        height: 35vh;            
    }
    
    #additional-content-heading{
        font-size: 1.5em;
    }

    .code-pen-example-container img{
        width: 60%
    }

}


/*** START OF LARGE SCEENS ***/

/* 1024 */

@media screen and (min-width: 64em){

    .additional-content-container{
        height: 100vh;
    }
       
   
   .title-container h3{

       text-align: center;

       font-size: 1.25em;

   }

    #code-pen-heading{

       margin-bottom: 5%;

   }
 
   .code-pen-example-container{

       height: 70vh;

       margin-bottom: 10%;

   }

   #time-keeping-example, #animation-example, #threeJS-example{
     
        margin-top: -2%;

    }

    

}

@media screen and (min-width: 64em) and (max-height: 37.5em) {
         
    .title-container{

        height: 10%;

        margin-top: 10%;

    }

    #code-pen-heading{

        margin-bottom: 5%;

    }

    .code-pen-example-container{
        
        margin-bottom: 10%;

    }
   
    #time-keeping-example, #animation-example, #threeJS-example{
        
        width: 80%;
        height: 35vh;
      
        margin: 5% auto 5% auto;
       
    }

}


@media screen and (min-width: 70em){
       
   
   #code-pen-heading{

       margin-bottom: 5%;

   }

   .code-pen-example-container{

        height: 70vh;

       margin-bottom: 2%;

   }

    #time-keeping-example, #animation-example, #threeJS-example{

       height: 25vh;

       margin: 15% auto 15% auto;

   }   

}


/*** 1280 ***/

@media screen and (min-width: 80em) {

    .additional-content-container{
        height: 100vh;
    }

    
    #code-pen-heading{

        margin-bottom: 5%;

    }

    .code-pen-example-container{

        margin-bottom: 10%;

    }

    .challenge-links, .codepen-example-link{

        font-size: 0.85em;

    }

    #time-keeping-heading, #animation-heading, #threeJS-heading{
     
        margin-top: 0%;
 
    }

}


/*** 1600 ***/

@media screen and (min-width: 100em) {    
      
    .code-pen-example-container{

        margin-bottom: 0;

    }

     #time-keeping-example, #animation-example, #threeJS-example{

        width: 40%;

        height: 20vh;
      
        margin: 10% auto 10% auto;
       
    }  

}

/*** 1920 ***/

@media screen and (min-width: 120em){

  
    #code-pens-section{

       width: 70vw;

       margin: 0 auto;

    }

   .code-pen-example-container{

        height: 50vh;

    }

    .code-pen-example-container:nth-child(1){

        margin-top: 0;

    }
   
    #time-keeping-example, #animation-example, #threeJS-example{

        width: 40%;

        height: 20vh;
      
        margin: 10% auto 10% auto;
       
    }

}


/*** 2560 ***/

@media screen and (min-width: 160em) {
 
    .additional-content-container{
        height: 50vh;
    }
   
}

/*** 2560 ***/

@media screen and (min-width: 180em){

    .additional-content-container{

        width: 50vw;

        margin: 0 auto;

    }   
   

    #code-pen-heading{

        width: 88%;

        margin: 5% auto;

    }

    #time-keeping-example, #animation-example, #threeJS-example{

        width: 8vw;

        height: 20vh;
                    
    }
       
}