/*header*/
#lmain {
    font-size: 175%;
}
main{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
header {
    grid-template: 1fr/ repeat(3,auto);
    grid-template-areas: "lLeft rMiddle rRight"; 
}
#lMiddle {
    display: none;
}
#mobileMenu{
        display: block;
        width: 100%;
    }
/*Picture Carosels*/
.divCodeContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center; 
    border: solid black 2px;
    border-radius: 30px;
    margin: 1% 2%;
    background-color: #A5C1A0;
    width: 300px;
    height: 427px;
}
.codeSnippetHeader {
    background-color: #FFE0B2;
    border-radius: 28px 28px 0 0;
    color: #2E1A15; 
    margin: 0;
}
.projectName{
    margin: 0 auto 5px auto;
    padding: 5px; 
    font-size: 1.25rem;
    width: 90%; 
    border-bottom-right-radius: 28px;
    border-bottom-left-radius: 28px;
    background-color: #2E1A15;
    color: #FF8A65; 
}
.divImgContainer {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 300px;
}
.becauseIHadToAndImNOtHappyAboutIt {
    margin: 0;
    max-height: 300px;
    max-width: 300px;
}
.divButtons {
    min-height: 40px;
    border-top: solid black 2px;
    display: flex;
    align-items: center;
    justify-content: center; 
    background-color: #FFE0B2;
    border-radius: 0 0 28px 28px;
}
.btnPhotoCarosel {
    padding: 3px 15px;
    font-size: 130%;
    max-height: 32.4px;
    background-color: #2E1A15;
    color: #FF8A65;
    border-radius: 30%;
    border: 2px outset #2E1A15;
    transition: all 0.3s ease-in;
}
.btnPhotoCarosel:hover, .btnPhotoCarosel:active{
    background-color: #FF8A65;
    color: #2E1A15;
    border: 2px outset #FF8A65;
    cursor: pointer;
}
.btnGoHere {
    text-decoration: none;
    padding: 7px 5px;
    margin: 0 20px;
    border-radius: 30%;
    border: 2px outset #2E1A15;
    background-color: #2E1A15;
    color: #FF8A65;
    transition: all 0.3s ease-in;
}
.btnGoHere:hover, .btnGoHere:active {
    background-color: #FF8A65;
    color: #2E1A15;
    border: 2px outset #FF8A65;
    font-style: italic;
}
/*Pictures*/
#cpp1, #cpp2, #vb1, #vb2, #vbL1, #vbL2, #html1, #html2, #html3, #html4, #js1, #js2, #php1, #php2  {
    display: none; 
    flex: 0; 
}
.divRWDContainer {
    display: flex;
    align-items: stretch;
    text-align: center;
    border: solid black 3px;
    border-radius: 30px;
    margin: 1% 2%;
    background-color: #A5C1A0;
    width: 60%;
}
/*heights for the vb code container*/
#vbL0{max-height: 90px;}
#vbL1{max-height: 187.5px;}
#vbL2{max-height: 187.5px;}
#vb0{max-height: 210px;}
#vb1{max-height: 112.5;}
#vb2{max-height: 112.5;}
.vbPic {
    margin: 0 auto; 
}
/*Media Queries*/
@media only screen and (min-width: 1226px) {
    header {
        grid-template: 1fr/ 10% repeat(3,auto);
        grid-template-areas: "lLeft lMiddle rMiddle rRight"; 
    }
    #lMiddle {
        display: flex;
    }
}
@media only screen and (min-width: 675px) {
    #mobileMenu{
        display: none;
    }
    #navMenu {
        display: block;
    }
    header {
        display: grid;
    }
}
@media only screen and (min-width: 600px) {
    .divCodeContainer{
        height: 527px;
        width: 500px;
    }
    .divImgContainer {
        width: 500px;
        max-height: 400px;
    }
    .becauseIHadToAndImNOtHappyAboutIt {
        max-width: 498px;
        max-height: 400px;
    }
    /*heights for the vb code container*/
    #vbL0{max-height: 120px;}
    #vbL1{max-height: 250px;}
    #vbL2{max-height: 250px;}
    #vb0{max-height: 280px;}
    #vb1{max-height: 150px;}
    #vb2{max-height: 150px;}
}