@charset "utf-8";

#mainwrap{
    width: 98vw;
    height: 100vh;
    display: flex;
    
}

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

#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;
}







#mainwrap #Main {
    background-image: url(../img/Portfolio/Cthulhu%20Space.PNG);
    background-color: rgba(31,31,31,0.88);
    width: 88%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#mainwrap #Main #logodetails{
    display: inline-block;
    width: 100%;
}


#mainwrap #Main #logodetails #logo{
    width: 30%;
    float: left;

}

#mainwrap #Main #logodetails #logo #logoimg{
    
    width: 100%;
    height: 0%;

}

#mainwrap #Main #logodetails #details{
    width: 15%;
    float: left;
    background-color: rgba(46,46,46,0.73);
    margin-top: 1%;

}

#mainwrap #Main #logodetails #details #detail1{
    width: 24%;
    height: 0%;
    float: left;
    padding-top: 6%;
    padding-left: 7%;
    padding-bottom: 6%;

}

#mainwrap #Main #logodetails #details #detail2{
    width: 24%;
    height: 0%;
    float: left;
    padding-top: 6%;
    padding-left: 7%;

}

#mainwrap #Main #logodetails #details #detail3{
    width: 24%;
    height: 0%;
    float: left;
    padding-top: 6%;
    padding-left: 7%;

}

#mainwrap #Main #viddescdiv{
    background-color: rgba(54,54,54,0.64);
    display: inline-block;
    margin-top: -0.5%;
    border: 16px ridge rgba(158,158,158,1.00);



   

}


#mainwrap #Main #viddescdiv #videolocation{
    width: 45%;
    float: right;
    padding-top: 1%;
    background-color: rgba(0,0,0,0.50);
    padding-right: 1%;
    padding-left: 1%;
    margin-top: 1%;
    margin-bottom: 1%;
   

}

#mainwrap #Main #viddescdiv #videolocation #video{
    padding-top: 0%;


   

}

#mainwrap #Main #viddescdiv #videolocation #video #trailer{
    width: 100%;

   

}



#mainwrap #Main #viddescdiv #videolocation #location{
	width: 100%;
    padding-top: 6%;
    display: inline-block;
    background-color: rgba(21,21,21,0.69);
}

#mainwrap #Main #viddescdiv #videolocation #location #imgs{
    width: 100%;
}


#mainwrap #Main #viddescdiv #videolocation #location #imgs #downloadbutton{
    width: 75%;
    height: 40%;
    background-image: url(../img/BlueButton.png);
    border: 7px ridge rgba(143,143,143,1.00);
    background-size: 100%;
    margin-left: 12.5%;
	margin-right: 12.%5;
}

#mainwrap #Main #viddescdiv #videolocation #location #imgs #downloadbutton #downloadbuttontext{
    text-align: center;
    font-size: 2vh;
    text-decoration: underline;
    color: rgba(0,0,0,1.00);
}


#mainwrap #Main #viddescdiv #videolocation #location #playhere{
    width: 100%;
    height: 0%;
    margin-top: -3%;
    color: rgba(171,171,171,1.00);
    font-size: 4.2vh;
    font-family: Lato-Regular;
    text-decoration: underline;
    text-align: center;
    
   

}

#mainwrap #Main #viddescdiv #projectdescription{
    width: 45%;
    float: right;
    padding-right: 3%;
    padding-left: 3%;
    

}

#mainwrap #Main #viddescdiv #projectdescription #projectdesc{
    width: 99%;
    heigh: 99%;
    font-family: Lato-Regular;
    display: inline-block;
    text-align: justify;
    font-size: 2vh;
    color: rgba(255,255,255,1.00);
    background-color: rgba(51,51,51,0.78);
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 3%;
    padding-right: 3%;
    height: 100%;
    line-height: 2em;
}

#mainwrap #Main #viddescdiv #projectdescription #projectdocumentation{
    width: 99%;
    heigh: 99%;
    font-family: Lato-Regular;
    display: inline-block;
    text-align: justify;
    font-size: 2vh;
    color: rgba(255,255,255,1.00);
    background-color: rgba(51,51,51,0.78);
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 3%;
    padding-right: 3%;
    height: 100%;
    line-height: 2em;
}

#mainwrap #Main #viddescdiv #projectdescription #projectdocumentation2{
    width: 99%;
    heigh: 99%;
    font-family: Lato-Regular;
    display: inline-block;
    text-align: center;
    font-size: 5vh;
    color: rgba(144,142,142,1.00);
    background-color: rgba(51,51,51,0.78);
    padding-top: 1%;
    padding-bottom: 10vh;
    padding-left: 1%;
    padding-right: 1%;
    height: 100%;
    line-height: 2em;
    
}

#mainwrap #Main #block1 {
    
}

#mainwrap #Main #border1 {
    background-color: rgba(120,120,120,1.00);
    padding-bottom: 3%;
    
}