body{/*For Body of Web Pages*/
    color: #292929;
    background-color: #495a86;
    font-family: Nunito, Avenir;
    font-weight: 400;
    font-style: normal;
    margin: 0px;
    width: 100%;
}
input{
    width: 100%;
    color: #999999;
    max-width:600px;
}
textarea{
    width: 100%;
    color: #999999;
    max-width:600px;
}
#headingArea{/*Where the Main  Logo Is*/
    color: #292929;
    background-color: #495a86;
    width: 100%;
    display:flow-root;
    height:400px;
    justify-content: center;
}
#headingAreaM{/*Where the Main  Logo Is*/
    color: #292929;
    background-color: #495a86;
    width: 100%;
    display:flow-root;
    height:200px;
    justify-content: center;
}
#headerImage{/*Main Logo*/
    box-align: right;
    max-width: 100%;
    min-width: 700px;
    max-height: 400px;
}
#navArea{/*For Navigation Area*/
    display: block;
    background-color: #333f5f;
    width: 100%;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
}
#navAreaM{/*For Mobile Navigation Area*/
    position: fixed;
    right: 0; 
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
    z-index: 100;
}
#navImage{/*Adds dropshadow to nav icon*/
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
}
.dropbtn{/*Nav Icon button background color*/
    border: none;
    background-color: #354261;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 1;
}
.dropbtn:hover{/*changes color when hovered over*/
    border: none;
    background-color: #AABBEE;
}
.dropdown-content{/*Style for dropdown content*/
    display: none;
    text-align: right;
    background-color: #3f4564;
    position: fixed;
    overflow: auto;
    right: 0;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
}
.dropdown-content a{/*Style for dropdown content links*/
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.show {display: block;}/*Changes visibility of dropdown content*/
#nameArea{/*For area that features my name*/
    display: block;
    background-color: #a7a9ac;
    color: #336f9b;
    width: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
}
#currentArea{/*For area that fratures current projects*/
    display: block;
    background-color: #2f4e73;
    color: #a7a9ac;
    width: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
}
#vid{/*Video placeholder*/
    width: 90%;
    max-width: 600px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
    margin: 20px;
}
#imag{/*Video placeholder*/
    width: 95%;
    max-width: 500px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
    margin: 20px;
}
h1{/*Centers h1 elements*/
    text-align: center;
}
h2{/*Style used for subheadings*/
    font-size: 35px;
    text-align: center;
    font-weight: bold;
}
ul.navBar{/*Navigation Area On all the Web Pages*/
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    max-width: 100%;
}
ul{/*Unordered List for Web Page*/
    text-align: center;
    max-width: 100%;
    padding-left: 0px;
}
li{/*List Items*/
    display: inline-block;
    text-align: center;
    padding-left: 2%;
    padding-right: 2%;
    font-weight: bold;
    font-size: 20px;
}
a{/*Link Color*/
    text-decoration: none;
}
a:link{/*Link Color*/
    color: #9da5be;
    text-decoration: none;
}
a:visited{/*Visited Link Color*/
    color: #9da5be;
    text-decoration: none;
}
a:hover{/*Hovered Over Link Color*/
    color: #292929;
    text-decoration: none;
}
a:active{/*Activated Link Color*/
    color: #292929;
}
#about{
    display: block;
    background-color: #2f4e73;
    color: #a7a9ac;
    width: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: left;
    font-size: 16px;
}
#contact{/*Style for Contact Info*/
    display: block;
    text-align: center;
    color: #dfdfdf;
    width: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
}
#siteText{
    padding-left: 10px;
    padding-right: 10px;
}
#form{/*Style for Form*/
    padding:10px;
    padding-bottom: 20px;
    
}
#footerArea{/*For Body of Web Pages*/
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
#copyR{
    text-align: center;
    color: #dfdfdf;
}
#icon{/*Main Logo as Icon*/
    width: 50px;
}
#logo{
    width: 500px;
}
#stik{/*Stickers*/
    width: 95%;
    max-width: 1000px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
    margin: 20px;
}
#stikM{/*Stikers*/
    width: 95%;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
    margin: 20px;
}
#title{/*Title*/
    width: 95%;
    max-width: 250px;
    margin: 5px;
}
@media only screen and (max-width: 599px) {/*Mobile*/
    #navArea{display: none;}
    #video{width: 90%; height: 250px;
        margin: 20px;}
    #vid{width:90%; height:50%;
        margin: 20px;}
    #ani{display: none;}
    #headingArea{display: none;}
    #stik{display: none;}
    #form{text-align: left;}
    #socialM{
        display: block;
        margin: 20px;
    }
} 
@media only screen and (min-width: 600px) {/*Tablet*/
    #navAreaM{display: none;}
    #video{width:600px; height:355px;
        margin: 20px;}
    #vid{width:480px; height:270px;
        margin: 20px;}
    #aniM{display: none;}
    #headingAreaM{display: none;}
    #stikM{display: none;}
    #form{text-align: center;}
} 
@media only screen and (min-width: 992px) {/*Desktop*/
    #navAreaM{display: none;}
    #video{width:600px; height:355px;
        margin: 20px;}
    #vid{width:480px; height:270px;
        margin: 20px;}
    #aniM{display: none;}
    #headingAreaM{display: none;}
    #stikM{display: none;}
    #form{text-align: center;}
}