/* Read Me:

Dark Blue Color: #2a3775
Light Peach Color: #ffdcbb
Light Orange Color: #ff7c53 
Very Light grey: #dbdbdb
Medium Grey: #c9c9c9
Grey: #adadad

*/


#LandingPage_Image{
    background-image: url("/img/CoderBackground_2.jpg"); /* The image used */
    background-color: #cccccc; /* Used if the image is unavailable */
    height: 690px; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    
}

#LandingPage_Main{
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: monospace;
}

#LandingPage_Main_Desktop{
    padding-top: 115px;
    padding-bottom: 50px;
}

#LandingPage_Main_Mobile{
    display: none;
}

.main-image{
    max-width: 425px;
    margin-top: -4px;
    margin-left: 20px;
}

.LandingPage_LeftColumn{
    padding-top: 60px;
    padding-bottom: 40px;
}

.homepage-header{
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 25px;
    font-size: 50px;
}

.homepage-subheader-1{
    color: #de4a33;
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 15px;
}

.homepage-subheader-2{
    font-weight: 600;
    color: #19e5e5;
    margin-bottom: 30px;
}

.buttons-div{
    margin-top: 40px;
    margin-bottom: 40px;
}

#homepageButton1{
    border-radius: 50px;
    padding: 15px 25px 15px 25px;
    /*background-color: #2a3775;*/
    /*color: white;*/
}

#homepageButton2{
    border-radius: 50px;
    padding: 15px 25px 15px 25px;
    /*border-color: #2a3775;*/
    /*color: #2a3775;*/
}


#homepageButton_ipad{
    border-radius: 50px;
    display: none !important;
}

/*CSS for small laptops */
@media only screen 
    and (min-device-width: 1025px) 
    and (max-device-width: 1400px) 
          {
            .homepage-header{
                margin-bottom: 25px;
                font-size: 40px;
            }
            
            .homepage-subheader-1{
                font-size: 30px;
                margin-bottom: 15px;
            }
            
            .homepage-subheader-2{
                margin-bottom: 30px;
            }  
              
          }


                
        /* CSS for VERY SMALL MOBS ONLY */
          @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 375px) 
              {
                  
                #LandingPage_Image{
                    background-image: url("/img/CoderBackground_2.jpg"); /* The image used */
                    background-color: #cccccc; /* Used if the image is unavailable */
                    height: 730px; /* You must set a specified height */
                    background-position: center; /* Center the image */
                    background-repeat: no-repeat; /* Do not repeat the image */
                    background-size: cover; /* Resize the background image to cover the entire container */
                    
                }            
            
                .main-image{
                    max-width: 210px;
                    margin-top: 10px;
                }
            
                #LandingPage_Main{
                    margin-top: 0px;
                    padding-top: 20px;
                    margin-bottom: 30px;
                    font-family: "Montserrat";

                }

                #LandingPage_Main_Desktop{
                    display: none;
                }
                
                #LandingPage_Main_Mobile{
                    display: block;
                    padding-top: 35px;
                    font-family: monospace;
                }
                
                #image-main-panel-mob{
                    max-width: 100vw;
                }
                
                #mob-homepage-header{
                    font-size: 20px;
                    font-weight: 800;
                    color: #ffffff;
                    margin-bottom: 20px;
                }
                
                .mob-homepage-subheader-1{
                    color: #de4a33;
                    font-size: 16px;
                    font-weight: 600;
                    margin-bottom: 15px;
                }
                
                .mob-homepage-subheader-2{
                    font-weight: 600;
                    font-size: 16px;
                    color: #19e5e5;
                    margin-bottom: 15px;
                }
                
                .mob-buttons-div{
                    margin-top: 0px;
                    margin-bottom: 0px;
                }

                #mob-homepageButton1{
                    width: 280px;
                }
                
                #cv_link{
                    font-size: 20px;
                    color:#de4a33;
                }
                 
                
            }
              

          /* CSS for when the browser's width is 767px wide or less: MOBILE DEVICES */
        /* CSS for LARGER MOBS ONLY */
          @media only screen 
            and (min-device-width: 376px) 
            and (max-device-width: 500px) 
              {
                  
              
            
                #LandingPage_Image{
                    background-image: url("/img/CoderBackground_2.jpg"); /* The image used */
                    background-color: #cccccc; /* Used if the image is unavailable */
                    height: 760px; /* You must set a specified height */
                    background-position: center; /* Center the image */
                    background-repeat: no-repeat; /* Do not repeat the image */
                    background-size: cover; /* Resize the background image to cover the entire container */
                    
                }            
            
                .main-image{
                    max-width: 230px;
                    margin-top: 5px;
                }
            
                #LandingPage_Main{
                    margin-top: 0px;
                    padding-top: 30px;
                    margin-bottom: 30px;
                    font-family: "Montserrat";

                }

                #LandingPage_Main_Desktop{
                    display: none;
                }
                
                #LandingPage_Main_Mobile{
                    display: block;
                    padding-top: 35px;
                    font-family: monospace;
                }
                
                #image-main-panel-mob{
                    max-width: 100vw;
                }
                
                #mob-homepage-header{
                    font-size: 22px;
                    font-weight: 800;
                    color: #ffffff;
                    margin-bottom: 20px;
                }
                
                .mob-homepage-subheader-1{
                    color: #de4a33;
                    font-size: 17px;
                    font-weight: 600;
                    margin-bottom: 15px;
                }
                
                .mob-homepage-subheader-2{
                    font-weight: 600;
                    font-size: 16px;
                    color: #19e5e5;
                    margin-bottom: 15px;
                }
                
                .mob-buttons-div{
                    margin-top: 0px;
                    margin-bottom: 0px;
                }

                #mob-homepageButton1{
                    width: 280px;
                }
                
                #cv_link{
                    font-size: 20px;
                    color:#de4a33;
                }
                
                

          }
        
        
        /* CSS for when the browser's width is 768px wide up to 1181px wide: TABLETS */
        @media only screen 
            and (min-device-width: 500px) 
            and (max-device-width: 1024px) 
                  {
                 
            
                #LandingPage_Image{
                    background-image: url("/img/CoderBackground_2.jpg"); /* The image used */
                    background-color: #cccccc; /* Used if the image is unavailable */
                    height: 950px; /* You must set a specified height */
                    background-position: center; /* Center the image */
                    background-repeat: no-repeat; /* Do not repeat the image */
                    background-size: cover; /* Resize the background image to cover the entire container */
                    
                }            
            
                .main-image{
                    max-width: 330px;
                    margin-top: 15px;
                }
            
                #LandingPage_Main{
                    margin-top: 0px;
                    padding-top: 45px;
                    margin-bottom: 30px;
                    font-family: "Montserrat";

                }

                #LandingPage_Main_Desktop{
                    display: none;
                }
                
                #LandingPage_Main_Mobile{
                    display: block;
                    padding-top: 35px;
                    font-family: monospace;
                }
                
                #mob-second-line-container{
                    padding-left: 9rem;
                }
                
                #image-main-panel-mob{
                    max-width: 100vw;
                }
                
                #mob-homepage-header{
                    font-size: 35px;
                    font-weight: 800;
                    color: #ffffff;
                    margin-bottom: 20px;
                }
                
                .mob-homepage-subheader-1{
                    color: #de4a33;
                    font-size: 26px;
                    font-weight: 600;
                    margin-bottom: 15px;
                }
                
                .mob-homepage-subheader-2{
                    font-weight: 600;
                    font-size: 20px;
                    color: #19e5e5;
                    margin-bottom: 15px;
                }
                
                .mob-buttons-div{
                    margin-top: 0px;
                    margin-bottom: 0px;
                }

                #mob-homepageButton1{
                    width: 280px;
                }
                
                #cv_link{
                    font-size: 20px;
                    color:#de4a33;
                }
                                   

        }