@charset "utf-8";
@import url("../webfonts/Lato_Regular/stylesheet.css");

#mainwrap {
    height: 200vh;
    width: 100wh;
    display: flex;
}

#mainwrap #sidebar {
    width: 11%;
    float: left;
    background-image: url(../img/at_website001012.gif);
    height: 100%;
}

#mainwrap #sidebar #homebutton{
    width: 76%;
    height: 5vh;
    margin-left: 3%;
    margin-top: 50%;
    background-image: url(../img/BlueButton.png);
    border: 7px ridge rgba(143,143,143,1.00);
    float: left;
    background-size: 100%;
   
}

#mainwrap #sidebar #homebutton #homebuttontext{
    text-align: center;
    font-size: 2vh;
    text-decoration: underline;
    color: rgba(0,0,0,1.00);
}


#mainwrap #sidebar #aboutmebutton{
    width: 76%;
    height: 5vh;
    margin-left: 3%;
    margin-top: 11%;
    background-image: url(../img/BlueButton.png);
    border: 7px ridge rgba(143,143,143,1.00);
    float: left;
    background-size: 100%;
    
   
}

#mainwrap #sidebar #aboutmebutton #aboutmebuttontext{
    text-align: center;
    font-size: 2vh;
    text-decoration: underline;
    color: rgba(0,0,0,1.00);
}

#mainwrap #sidebar #portfoliobutton{
    width: 76%;
    height: 5vh;
    margin-left: 3%;
    margin-top: 11%;
    background-image: url(../img/BlueButton.png);
    border: 7px ridge rgba(143,143,143,1.00);
    float: left;
    background-size: 100%;
    
   
}

#mainwrap #sidebar #portfoliobutton #porfoliobuttontext{
    text-align: center;
    font-size: 2vh;
    text-decoration: underline;
    color: rgba(0,0,0,1.00);
   
}







#mainwrap #sidedivider {
    width: 1%;
    float: left;
    height: 100%;
    background-color: #1B1B1B;
}


/* MAIN SECTION ---------- */


#mainwrap #Main {
    background-color: rgba(31,31,31,0.88);
    width: 88%;
    height: 100%;
    background-image: url(../img/test%20bg.gif);
    background-size: 100% 100%;
}

#mainwrap #Main #mainhead {
    width: 100%;
    padding-top: 1%;
    padding-bottom: 1%;
}

#mainwrap #Main #mainhead #title{
    width: 100%;
    text-align: center;
    color: rgba(255,255,255,1.00);
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
    font-size: 17vh;
}

#mainwrap #Main #project1 #div1{
    width: 100%;
    height: 1vh;
    background-color: rgba(51,51,51,0.00);
}

#mainwrap #Main #project2 #div2{
    width: 100%;
    height: 1vh;
    background-color: rgba(51,51,51,0.00);
}

#mainwrap #Main #project3 #div3{
    width: 100%;
    height: 1vh;
    background-color: rgba(51,51,51,0.00);
}

#mainwrap #Main #project4 #div4{
    width: 100%;
    height: 1vh;
    background-color: rgba(51,51,51,0.00);
}






/* Project 1 ------------ */

#mainwrap #Main #project1{
    width: 90%;
    margin-left: 5%;
    background-image: url(../img/Portfolio/FinCremental%20BG.png);
    background-size: 100% 100%;
    float: left;
}

#mainwrap #Main #project1 #p1imgbox{
    width: 25%;
    float: left;
    padding-left: 5%;
    padding-right: 5%;
}


#mainwrap #Main #project1 #p1imgbox #p1image{
    width: 100%;
    height: 100%;
    float: left;
    padding-top: 15%;
    padding-bottom: 5%;
}

#mainwrap #Main #project1 #p1details{
    width: 60%;
    float: left;
    margin-top: 1%;
    margin-bottom: 1%;
}

#mainwrap #Main #project1 #p1details #p1d1{
    width: 100%;
    height: 7vh;
    background-color: rgba(54,54,54,0.90);
    display: inline-block;
    
}

#mainwrap #Main #project1 #p1details #p1d1 #p1title{
    width: 65%;
    float: left;
    font-family: Lato-Regular;
    font-size: 4vh;
    margin-top: 2%;
    margin-left: 2%;
    color: rgba(229,229,229,1.00);
    
}
#mainwrap #Main #project1 #p1details #p1d1 #p1release{
    width: 10%;
    float: left;
    font-size: 3vh;
    margin-top: 3%;
    margin-left: 2%;
    color: rgba(229,229,229,1.00);
    text-align: right;
}

#mainwrap #Main #project1 #p1details #p1d1 #p1devcount{
    width: 15%;
    float: left;
    font-family: Lato-Regular;
    font-size: 2vh;
    margin-top: 4%;
    margin-left: 2%;
    color: rgba(231,231,231,1.00);
    text-align: right;
}

#mainwrap #Main #project1 #p1details #p1d2{
    background-color: rgba(26,26,26,0.90);
    height: 14vh;
    display: inline-block;
    
}

#mainwrap #Main #project1 #p1details #p1d2 #p1description{
    text-align: left;
    margin-top: 1%;
    padding-left: 2%;
    font-size: 3vh;
    color: rgba(225,225,225,1.00);

}











/* Project 2 ------------- */



#mainwrap #Main #project2{
    width: 90%;
    margin-left: 5%;
    margin-top: 2%;
    background-image: url(../img/Portfolio/space.gif);
    background-size: 50% 100%;
    float: left;
}

#mainwrap #Main #project2 #p2imgbox{
    width: 25%;
    float: left;
    padding-left: 5%;
    padding-right: 5%;
}


#mainwrap #Main #project2 #p2imgbox #p2image{
    width: 100%;
    height: 100%;
    float: left;
    padding-top: 15%;
    padding-bottom: 5%;
}

#mainwrap #Main #project2 #p2details{
    width: 60%;
    float: left;
    margin-top: 1%;
    margin-bottom: 1%;
}

#mainwrap #Main #project2 #p2details #p2d1{
    width: 100%;
    height: 7vh;
    background-color: rgba(54,54,54,0.90);
    display: inline-block;
    
}

#mainwrap #Main #project2 #p2details #p2d1 #p2title{
    width: 65%;
    float: left;
    font-family: Lato-Regular;
    font-size: 4vh;
    margin-top: 2%;
    margin-left: 2%;
    color: rgba(229,229,229,1.00);
    
    
}
#mainwrap #Main #project2 #p2details #p2d1 #p2release{
    width: 10%;
    float: left;
    font-size: 3vh;
    margin-top: 3%;
    margin-left: 2%;
    color: rgba(229,229,229,1.00);
    text-align: right;
    
}

#mainwrap #Main #project2 #p2details #p2d1 #p2devcount{
    width: 15%;
    float: left;
    font-family: Lato-Regular;
    font-size: 2vh;
    margin-top: 4%;
    margin-left: 2%;
    color: rgba(231,231,231,1.00);
    text-align: right;
    
}

#mainwrap #Main #project2 #p2details #p2d2{
    background-color: rgba(26,26,26,0.90);
    height: 14vh;
    display: inline-block;
    
}

#mainwrap #Main #project2 #p2details #p2d2 #p2description{
    text-align: left;
    margin-top: 1%;
    padding-left: 2%;
    font-size: 3vh;
    color: rgba(225,225,225,1.00);

}


/* Project 3 ------------ */

#mainwrap #Main #project3{
    width: 90%;
    margin-left: 5%;
    margin-top: 2%;
    background-image: url(../img/Portfolio/Cthulhu%20Space.PNG);
    background-size: 100% 100%;
    float: left;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,1.00);
}

#mainwrap #Main #project3 #p3imgbox{
    width: 25%;
    float: left;
    padding-left: 5%;
    padding-right: 5%;
}


#mainwrap #Main #project3 #p3imgbox #p3image{
    width: 100%;
    height: 100%;
    float: left;
    padding-top: 15%;
    padding-bottom: 5%;
}

#mainwrap #Main #project3 #p3details{
    width: 60%;
    float: left;
    margin-top: 1%;
    margin-bottom: 1%;
}

#mainwrap #Main #project3 #p3details #p3d1{
    width: 100%;
    height: 7vh;
    background-color: rgba(54,54,54,0.90);
    display: inline-block;
    
}

#mainwrap #Main #project3 #p3details #p3d1 #p3title{
     width: 65%;
    float: left;
    font-family: Lato-Regular;
    font-size: 4vh;
    margin-top: 2%;
    margin-left: 2%;
    color: rgba(229,229,229,1.00);
    
    
}
#mainwrap #Main #project3 #p3details #p3d1 #p3release{
    width: 10%;
    float: left;
    font-size: 3vh;
    margin-top: 3%;
    margin-left: 2%;
    color: rgba(229,229,229,1.00);
    text-align: right;
   
}

#mainwrap #Main #project3 #p3details #p3d1 #p3devcount{
    width: 15%;
    float: left;
    font-family: Lato-Regular;
    font-size: 2vh;
    margin-top: 4%;
    margin-left: 2%;
    color: rgba(231,231,231,1.00);
    text-align: right;
    
}

#mainwrap #Main #project3 #p3details #p3d2{
    background-color: rgba(26,26,26,0.90);
    height: 14vh;
    display: inline-block;
    
}

#mainwrap #Main #project3 #p3details #p3d2 #p3description{
    text-align: left;
    margin-top: 1%;
    padding-left: 2%;
    font-size: 3vh;
    color: rgba(225,225,225,1.00);

}






/* Project 4 ------------ */

#mainwrap #Main #project4{
    width: 90%;
    margin-left: 5%;
    margin-top: 2%;
    background-image: url(../img/Portfolio/local%20neighborhood.PNG);
    background-size: 100% 100%;
    float: left;
    
    background-color: rgba(0,0,0,1.00);
}

#mainwrap #Main #project4 #p4imgbox{
    width: 25%;
    float: left;
    padding-left: 5%;
    padding-right: 5%;
}


#mainwrap #Main #project4 #p4imgbox #p4image{
    width: 100%;
    height: 100%;
    float: left;
    padding-top: 15%;
    padding-bottom: 5%;
}

#mainwrap #Main #project4 #p4details{
    width: 60%;
    float: left;
    margin-top: 1%;
    margin-bottom: 1%;
}

#mainwrap #Main #project4 #p4details #p4d1{
    width: 100%;
    height: 7vh;
    background-color: rgba(54,54,54,0.90);
    display: inline-block;
    
}

#mainwrap #Main #project4 #p4details #p4d1 #p4title{
    width: 65%;
    float: left;
    font-family: Lato-Regular;
    font-size: 4vh;
    margin-top: 2%;
    margin-left: 2%;
    color: rgba(229,229,229,1.00);
    
}
#mainwrap #Main #project4 #p4details #p4d1 #p4release{
    width: 10%;
    float: left;
    font-size: 3vh;
    margin-top: 3%;
    margin-left: 2%;
    color: rgba(229,229,229,1.00);
    text-align: right;
    
}

#mainwrap #Main #project4 #p4details #p4d1 #p4devcount{
    width: 15%;
    float: left;
    font-family: Lato-Regular;
    font-size: 2vh;
    margin-top: 4%;
    margin-left: 2%;
    color: rgba(231,231,231,1.00);
    text-align: right;
    
}

#mainwrap #Main #project4 #p4details #p4d2{
    background-color: rgba(26,26,26,0.90);
    height: 14vh;
    display: inline-block;
    
}

#mainwrap #Main #project4 #p4details #p4d2 #p4description{
    text-align: left;
    margin-top: 1%;
    padding-left: 2%;
    font-size: 3vh;
    color: rgba(225,225,225,1.00);

}