.light-background{
    background-color:white;
}
#navbar-index{
    visibility: hidden;
}



#myImage{
    display: flex;
    align-self: baseline;
    width: 250px;
    height: auto; 
    border-radius: 9px;
    /* margin-bottom: 15px; */
    /* margin-left: 11%; */
    float: left;
    margin-right: 30px; 
    margin-bottom: 15px;
}

.about-me{
    padding-top: 0%;
}

#about-divider{
    margin-left: 7%;
    width: 90%;
    margin-bottom: 0px;
    margin-top: 0px;
    /* border-bottom: 2px solid rgb(155, 47, 7); */
    /* color: rgb(221, 93, 46); */
    border-bottom: 2px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    /* color: rgb(146, 64, 27); */
    font-size: 30px;
    text-align: center;
}




#about-repl{
    width: 37px;
    height: 37px;
    opacity: 0.9;
}

#about-repl-page-bottom{
    width: 43px;
    height: 43px;
    opacity: 0.9;
}

#repl-div{
    width: fit-content;
    height: fit-content;
    display:inline-block; 
    line-height:0;
}


#intro-image{
    background-image: url("./assets/images/w.jpg");
    background-position:left;
    opacity: 0.94;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    /* min-height: 100%;
    z-index: 20; */

}

#about-me{
    background-image: url("./assets//images/timeline.gif");
    background-position:right;
    /* opacity: 0.94; */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    min-height: 100%;
    z-index: 20;
}




.clear-float{
    float:none;
}
.float-left{
    float: right;
}


.about-me-text{
    /* color: rgb(161, 74, 34); */
    /* color: rgb(128, 128, 128); */
    color:darkgray;

    /* margin-left: 20px; */
    font-size: 20px;
}



#dev-camp-article{
    text-decoration: none;
    color: black;
    border-bottom: 1px solid rgb(158, 135, 112);
}

#dev-camp-article:hover{
    text-decoration: none;
    color: black;
    border-bottom: 1px solid black;
}

#dev-camp-article:visited{
    text-decoration: none;
    color: black;
    border-bottom: 1px solid black;
}

.created-divider{
    margin-top: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid black;
    color: black;
    /* color: black; */
    font-size: 27px;
    text-align: center;
}

.created-images-div{
    justify-content: center;
}

.created-images-parent{
    width: 360px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border: 1px solid #dcd7df;
    margin: 0 10px 0 10px;

}

.created-images{
    /* width: 360px;
    height: 200px; */
    width: 100%;
    height: 100%;
    /* object-fit: contain; */
    -webkit-transition: 0.6s ease;
    transition: 0.6s ease;
    overflow: hidden;
    position: absolute;
}

.created-images:hover{
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
    overflow: hidden;
}



.font-15{
    font-size: 15px;
}

.font-15-5{
    font-size: 15.26px;
}


.font-16{
    font-size: 16px;
}

.font-17{
    font-size: 17px;
}

.font-20{
    font-size: 20px;
}
.font-23{
    font-size: 23px;
}
#mainInfo{
    min-height: 100%;
}

#tech-skills{
    min-height: 100%;
    padding-bottom: 50px;
}

.w-94{
    width: 94.5%;
}

.contact-me-text{
    text-align: center;
    width: 80%;
    margin: 0 auto;
    padding-bottom: 40px;

    /* pb-40 contact-me-text mr-20 ml-20 w-83 */
}

.w-330px{
    width: 330px;
}

.all-apps{
    text-align: center;
    margin-bottom:40px;
    margin-top: 40px;
    padding-bottom: 50px;
} 

.text-center{
    text-align: center;
}

.mt-30{
    margin-top: 30px;
}

.all-apps-link{
    color: navy;
    font-size: 20px;
}

.mr-20{
    margin-right: 20px;
}
.ml-20{
    margin-left: 20px;
}

.mb-20{
    margin-bottom: 20px;
}

.mt-20{
    margin-top: 20px;
}

.mt-30{
    margin-top: 40px;
}

.ml-11{
    margin-left: 11%;
}

.pb-10{
    padding-bottom: 10px;
}

.pb-30{
    padding-bottom: 30px;
}

.pt-30{
    padding-top: 30px;
}

.pb-40{
    padding-bottom: 40px;
}

.mb-50{
    margin-bottom: 50px;
}

.mb-5{
    margin-bottom: 5px;
}


.mt-10{
    margin-top: 10px;
}

.mr-10{
    margin-right: 10px;
}

.ml-10{
    margin-left: 10px;
}

.mb-8{
    margin-bottom: 8px;
}

.pt-40{
    padding-top: 40px;
}


.color-navy{
    color: navy;
}

.color-purple{
    color:black;
}

.color-apps{
    /* color: rgb(14, 80, 85); */
    color: rgb(0, 119, 128);

    /* color: green; */
}

.job-title{
    font-style: italic; 
    color: rgb(97, 93, 93);
}

.tech-stack{
    color: black; 
    /* background-color: rgb(122, 48, 122);  */
    /* color: #fbf9fc; */
    border: 1px black solid; 
    border-radius: 6px;
    padding: 0px 3px;
    margin: 3px;
    background-color: white;
}

.skills-div-parent{
    text-align: left; 
    width: fit-content; 
    margin: 0 auto;
}

#front-end{
    color: red ;
    border-bottom: 1px rgb(250, 81, 81) solid; 
}

.front-end-stack{
    color:rgb(250, 81, 81);
    /* background-color: rgb(156, 35, 35); */
    /* color: #fbf9fc; */
    border: 1px rgb(250, 81, 81) solid; 
    border-radius: 6px;
    padding: 1px 5px;
    margin: 3px;

}

#back-end{
    color: rgb(119, 109, 109);
    border-bottom: 1px rgb(119, 109, 109) solid;
}
.back-end-stack{
    color: rgb(119, 109, 109);
    /* background-color: rgb(1, 106, 114); */
    /* color: #fbf9fc; */
    border: 1px rgb(119, 109, 109) solid; 
    border-radius: 6px;
    padding: 1px 5px;
    margin: 3px;

}

#other-tech{
    color: rgb(41, 41, 238);
    border-bottom: 1px rgb(41, 41, 238) solid;
}

.other-tech-stack{
    color: rgb(41, 41, 238);
    /* background-color: navy; */
    /* color: #fbf9fc; */
    border: 1px rgb(41, 41, 238) solid; 
    border-radius: 6px;
    padding: 1px 5px;
    margin: 3px;

}

.front-end-stack, .back-end-stack, .other-tech-stack{
    display: inline-block;
    background-color: white;
}

.line-height-30{
    line-height: 30px;
}

#contact-me{
    color: white;
    padding: 7px 10px;
    background-color: black;
    border: 1px  black;
    border-radius: 8px;
    text-decoration: none;
}

#contact-me:hover{
    opacity: 0.85;
}

/* ------------Media Queries for Responsive Styling------------*/

/* @media screen and (max-width: 325px){
    #my-name{
        font-size: 14px;
    }
    
} */

@media screen and (max-width: 380px){
    #my-name{
        font-size: 17px;
    }
    /* #intro-image{
        height: 87%;
    } */
    .light-background{
        /* width: 340px; */
        padding: 0;
        padding-right: 20px;
        padding-left: 20px;
        margin-right: 0;
    }
    footer{
        width: 100%;
        padding-right: 20px;
        margin-right: 0;
    }
    .about-me{
        padding-left: 0px;
    }
    #about-github, #about-linkedin, #about-email, #about-overflow, #about-repl, #about-github-page-bottom, #about-linkedin-page-bottom, #about-email-page-bottom, #about-overflow-page-bottom, #about-repl-page-bottom{
        margin: 30px 10px;
    }
    .created-divider{
        padding-top: 20px;
    }
    .typewriter-div{
        line-height: 4;
        padding-top: 40px;
        padding-bottom: 20px;
        /* width: 320px; */
    }
    #intro-image, #about-me{
        width: 200px;
    }
    .purple-text{
        display: inline-block;
    }

    #my-name{
        width: 250px;
    }

    .typewriter-message{
        font-size: 25px;
    }
    #outstanding{
        padding-top: 100px;
        height: 5px;
        visibility: hidden;
    }
}

@media screen and (max-width: 420px){
    /* #intro-image{
        height: 87%;
    } */
    .created-images-parent{
        width: 300px;
    }
    .w-330px{
        width: 300px;
    }
    .col-sm-7, .col-md-7{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
        width: 300px;
    }
    .typewriter-div{
        padding-top: 80px;
    }

    #about-me{
        padding-top: 100px;

    }
    #intro-image{
        margin-bottom: 100px;
    }

    #my-name{
        display: none;
        visibility: hidden;
    }

    .navbar-header{
        padding-bottom: 10px;
    }

    #my-sm-name{
        display: inline;
        font-size: 16px;
    }

    #type-h{
        padding-bottom: 40px;
    }
    
    #outstanding{
        padding-top: 100px;;
        height: 5px;
        visibility: hidden;
    }
    /* .w-94{
        width: 100%;
    } */
}


@media screen and (max-width: 450px){
    #my-name{
        font-size: 18px;
    }

    .typewriter-div{
        line-height: 5;
        padding-top: 80px;
    }

    .typewriter-message{
        font-size: 25px;
    }
    #intro-image, #about-me{
        width: 350px;
    }
    .col-md-1{
        display: none;
    }
    .col-md-10{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    /* #intro-image{
        height: 80%;
    } */
    .scroll{
        margin-bottom: 28px;
    }
    /* .media-flex{
        flex-direction: column;
        justify-content: center;
    } */
    /* #myImage{
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .about-me-text-under-photo{
        margin-left: 20px;
    }
    .media-r-0{
        margin-right: 0;
    } */

    .media-nav-container{
        padding-left: 0;
        padding-right: 0;
    }
    .about-divider{
        padding-top: 0px;
    }
    #about-github, #about-linkedin, #about-email, #about-overflow, #about-repl, #about-github-page-bottom, #about-linkedin-page-bottom, #about-email-page-bottom, #about-overflow-page-bottom, #about-repl-page-bottom{
        margin: 30px 17px;
    }
    .about-me{
        padding-left: 0;
    }
    
    #outstanding{
        padding-top: 100px;;
        height: 5px;
        visibility: hidden;
    }
}


@media screen and (max-width: 590px) {
    .media-flex{
        flex-direction: column;
        justify-content: center;
    }
    #myImage{
        float: none;
        display: block;
        padding: 0;
        margin: 0 auto;
        /* margin-bottom: 20px; */
        margin-bottom: 5%;
        /* margin-right: 0%; */
    }
    /* .w-94{
        width: 100%;
    } */

    .ml-11{
        margin-left: 0%;
    }
    .about-me-text{
        margin-left: 7%;
        margin-right: 7%;
    }
    .about-me-text-under-photo{
        margin-left: 20px;
    }
    .media-r-0{
        margin-right: 0;
    }
    
    #outstanding{
        padding-top: 100px;
        visibility: hidden;
    }
}

@media screen and (min-width: 765px) and (max-width: 890px){
    .skills-div-parent{
        width: 90%;
    }
    
    #outstanding{
        padding-top: 100px;;
        height: 5px;
        visibility: hidden;
    }
}


@media screen and (max-width: 767px) {
    .row.content {height:auto;} 

    .center-picture{
        width: 100%;
    }

    #intro-image{
        height: 60%;
    }

    .image-text{
        margin-left: 0px;
    }
    #intro-image, #about-me{
        background-image: none;
    }
    #about-github-page-bottom, #about-linkedin-page-bottom, #about-email-page-bottom, #about-overflow-page-bottom, #about-repl-page-bottom{
        text-decoration: none;
        margin: 35px 22px;
    }
    #socials-page-bottom{
        font-size: 40px;
    }
    .skills-div-parent{
        margin-right: 30px;
        margin-left: 30px;
    }
     nav .nav.navbar-nav{
        display: flex;
    }
    
    #outstanding{
        padding-top: 100px;;
        height: 5px;
        visibility: hidden;
    }
}

@media screen and (max-width: 800px){
    .typewriter-message{
        font-size: 31px;
    }
    #about-divider, .created-divider{
        font-size: 24px;
    }
    
    #outstanding{
        padding-top: 100px;;
        height: 5px;
        visibility: hidden;
    }

}
 

@media screen and (min-width: 890px) and (max-width: 1200px){
    .skills-div-parent{
        width: 80%;
    }
} 

@media screen and (min-device-width: 1024px){
    
    #intro-image, #about-me{
        padding: 0;
    }
} 


/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1026px){
    #intro-image, #about-me{
        background-attachment: scroll;
        min-height: 0%;
        background-image: none;
        padding: 0;
    }

    .typewriter-div, .about-me{
        min-width: 100%;
        margin-bottom: 25px;
    }

}


@media screen and (max-width: 1026px) {
    #intro-image, #about-me{
        background-attachment: scroll;
        min-height: 0%;
        background-image: none;
        padding: 0;
    }
    /* #intro-image{
        height: 45%;
    } */

    /* .w-94{
        width: 100%;
    }
    .ml-11{
        margin: 0 auto;
        margin-right: 11%;
        margin-left: 11%;
        
    } */

    .typewriter-div, .about-me{
        min-width: 100%;
        margin-bottom: 25px;
    }
    .col-md-1{
        display: none;
    }
    .col-md-10{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (min-width: 1052px) and (max-width: 1242px){
    .contact-me-text {
       width: 65%;
    }
}

@media screen and (max-width: 1225px){
    #intro-image, #about-me {
        background-size: 54.5% 100%;
    }
}

@media screen and (min-width: 1368px) and (max-width: 1400px){
    .contact-me-text {
       width: 75%;
    }
}

@media screen and (min-width: 1318px) and (max-width: 1368px){
    .contact-me-text {
       width: 77%;
    }
}

@media screen and (min-width: 1400px){
    .contact-me-text {
       width: 85%;
    }
}

@media screen and (min-width: 2000px){
    #hangmanText, #rpgText, #triviaText, #rutgersText, #scissorsText{
        font-size: 300%;
    }
    a, .footer-text{
        font-size: 200%;
    }
    strong{
        font-size: 200%;
    }
    .navbar-brand{
        margin-top: 20px;
    }

    .nav.navbar-nav li.active a {
        padding: 30px;
    }
    .project, .projects, .contact{
        margin: 15px;
        margin-bottom: 0px;
    }

    .glyphicon{
        font-size: 30px;
    }
}