/* https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */ 
/*Code was used as a basis, then adapted to fill the needs of my design*/
body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: white;
  overflow: hidden;
  text-align: center;
  position: relative;
  display: inline-block;
  margin-bottom: 1%;
 }
/* Styling of ui on nav bar*/
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* Change the color of links on hover to a light grey */
.topnav a:hover {
  background-color: #F0F0F0;
  color: black;
}
/* Adds a bolded font to the active page of the nav*/
.topnav a.active { 
  color: black;
  font-weight: 1000;
}
/* Adds hamburger menu to the screen when shrunk (responsive)*/
.topnav .icon {
  display: none;
  text-align: center;
}
/* Hides navbar ui when under 1400px, adds hamburger icon*/
@media only screen and (max-width: 1400px) {
  .topnav a{
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: inline-block;
  }
}
/* Adds dropdown when hamburger menu is clicked.*/
@media only screen and (max-width: 1400px) {
  .topnav.responsive{
    position: relative;
  }
  .topnav.responsive a.icon{
    position: absolute;
    right: 0;
    top: 0;
  }
} 
/*Responsive nav functionality*/
.topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
/* Code used to center navbar, hero image, and header text on site */
.centered{
  width:100%;
  text-align: center;
  position: relative;
  display: inline-block;
}
/*Format header on webpage*/
.logoText{
  font-family: "Alex Brush";  
  color: black;
  font-size: 58pt;
  margin-top: 4%;
}
.logoText5{
  font-family: "Garamond";  
  color: black;
  font-size: 45pt;
  margin-top: 4%;
}
/*format hero image on website*/
.heroImage{
  width:96.2%;
  text-align: center;
  height: 66%;
  position: relative;
  display: inline-block;
  border: 2px solid black;
}
.heroImage4{
  width:100%;
  text-align: center;
  height: 33%;
  position: relative;
  display: inline-block;
  border: 2px solid black;
}
/*seperate three columns in a div to fit midpage navigation*/
.aThird{
  width: 90%;
  display: inline-block;
  position: relative;
  height: 60%;
}
/*center the elements in the three colums*/
.centeredAThird{
  margin-top: 1%;
  width:33%;
  text-align: center;
  position: relative;
  display: inline-block;
  height: 100%;
}
/*center the elements in the footer three colums*/
.centeredFooter{
  margin-top: 3%;
  width:33%;
  text-align: center;
  position: relative;
  display: inline-block;
  height: 100%;
}
/*format footer*/
footer{
  background-color: #323232;
  border-top:2px solid black;
  margin-top:4%;
}
/*format linked in icon*/
.linkedin{
  width: 75px;
  height: 75px;
  text-align: center;
  position: relative;
  display: inline-block;
}
/*seperate footer into thirds*/
.aThirdFooter{
  width: 80%;
  display: inline-block;
  position: relative;
  height: 60%;
}
/*format mail icon in footer*/
.mail{
  width: 100px;
  height: 50px;
  text-align: center;
  position: relative;
  display: inline-block;
  border: 2px solid black;
}
/*format name and info in footer*/
.name{
  width: 217px;
  height: 75px;
  text-align: center;
  position: relative;
  display: inline-block;
}
/*format resume in footer*/
.resume{
  width: 75px;
  height: 75px;
  text-align: center;
  position: relative;
  display: inline-block;
  border: 2px solid black;
}

@media only screen and (max-width: 780px) {
  .logoText{
    font-size:40pt;
  }
}
@media only screen and (max-width: 780px) {
  .logoText5{
    font-size:28pt;
  }
}
@media only screen and (max-width: 600px){
  .topnav{
    width: 100%;
  }
}
@media only screen and (max-width: 1400px){
  .topnav{
    width: 100%;

  }
}
@media only screen and (max-width: 1400px){
  .centeredAThird{
    width: 100%;
        height: 50%;
  }
}
.centeredAThirdText{
  width:100%;
  position: relative;
  display: inline-block;
  height: 100%;
}
.aThirdFooterText{
  width: auto;
  display: inline-block;
  position: relative;
  text-align: right;
  height: 60%; 
  float:right;
  margin-right: 3%;
}

.footerHeaderAbout{
  font-family: "Roboto", sans-serif;  
  color: #787878;
  font-weight: bold;
  font-size: 12pt;
}
.footerHeaderEmail{
  font-family: "Roboto", sans-serif;  
  color: #787878;
  font-weight: bold;
  font-size: 12pt;
}
.footerHeaderSM{
  font-family: "Roboto", sans-serif;  
  color: #787878;
  font-weight: bold;
  font-size: 12pt;
}
.footerHeaderContact{
  font-family: "Roboto", sans-serif;  
  color: #787878;
  font-weight: bold;
  font-size: 12pt;
}
.footerText{
  font-size:22px;
  font-color:lightgrey;
}
.Footer{
  margin-top: 0.5%;
  width:24%;
  text-align: center;
  position: relative;
  display: inline-block;
  height: 50%;
}
.aThirdBottomFooter{
  width: 80%;
  display: inline-block;
  position: relative;
  height: 60%;
}
@media only screen and (max-width: 1400px){
  .footerHeader{
    font-size:0px;
  }
}
@media only screen and (max-width: 1400px){
  .aThirdBottomFooter{
    width: 100%;
  }
}
@media only screen and (max-width: 1400px){
  .centeredAThirdText{
    text-align: center;
}
}
@media only screen and (max-width: 1400px){
  .footerHeaderAbout{
    font-size: 0px;
    border:0px;
  }
}
@media only screen and (max-width: 1400px){
  .aThirdFooterText{
   float:none;
  }
}
.progressBar {
    border: 2px solid black;
    margin-left:5%;
    margin-right: 5%;
    margin-top:3%;
}
.barColor{
    background-color: #87AFC7;
}
.aThirdBar{
  width: 100%;
  display: inline-block;
  position: relative;
  text-align: center;
  height: 60%;
}
.centeredAThirdBar{
  margin-top: 3%;
  width:20%;
  text-align: center;
  position: relative;
  display: inline-block;
  height: 100%;
}
@media only screen and (max-width: 1400px){
  .centeredAThirdBar{
   width:50%;
  }
}
.barText{
  font-family: "Roboto";
  font-size: 22px;
}
.heroImage:hover{
  transform: scale(1.05);
  transition: 1s;
}
.heroImage2:hover{
  transform: scale(1.1) ;
  transition: all 1s;
}
/*format hero image on website*/
.heroImage2{
  width:100%;
  text-align: center;
  position: relative;
  display: inline-block;
  border: 2px solid black;
}
.resumeFile{
  width:50%;
  height:65%;
  border: 2px solid black;
}
.centeredResume{
  width:100%;
  text-align: center;
  position: relative;
  display: inline-block;
  height:75%;
}
.logoText2{
  font-family: "Roboto", sans-serif;  
  color: black;
  font-weight: bold;
  font-size: 22pt;
}
@media only screen and (max-width: 1400px){
  .logoText2{
   font-size: 14px;
  }
}
.descText{
  font-size: 22px;
}
.centeredProject{
  width:100%;
  text-align: center;
  position: relative;
  display: inline-block;
}
.centeredAHalfProject{
  margin-top: 1.5%;
  width:100%;
  text-align: center;
  position: relative;
  display: inline-block;
  height: 100%;
}
.aHalf{
  width: 80%;
  display: inline-block;
  position: relative;
}
.projectImage{
  width: 35%;
  height: 33%;
  border: 2px solid black;
}
.baseText{
  font-size: 18pt;
  font-family: "Roboto",sans-serif;  
  font-weight: bold;
}
.logoText3{
  font-family: "Alex Brush";  
  color: black;
  font-size: 72pt;
  margin-top: 4%;
}
.baseText2{
  font-size: 12pt;
  font-family: "Roboto",sans-serif;  
  font-weight: bold;
}
.greyContainer{
  width: 100%;
  background-color:   #F0F0F0;
  padding: 5px;
}
.baseText3{
  font-size: 20pt;
  font-family: "Roboto",sans-serif;  
  font-weight: bold;
}
.baseText4{
  font-size: 17pt;
  font-family: "Roboto",sans-serif;  
}
.centeredAHalfProject2{
  margin-top: 1.5%;
  width:100%;
  text-align: center;
  position: relative;
  display: inline-block;
  height: 100%;
}
.aHalf2{
  width: 80%;
  display: inline-block;
  position: relative;
  height: 800px;
}
.projectImage2{
  width: 35%;
  height: 33%;
  border: 4px solid black;
}
@media only screen and (max-width: 1400px){
  .heroImage{
    width: 89.3%;
    height: 100%;

  }
}
.logoTextSmall{
  font-family: "Alex Brush";  
  color: black;
  font-size: 36pt;

}
@media only screen and (max-width: 780px) {
  .logoTextSmall{
    font-size:25pt;

  }
}
.logoText123{
  font-family: "Alex Brush";  
  color: black;
  font-size: 27pt;
}
.resumefixed{
  width: 50%;
  height: 50%;
}
@media only screen and (max-width: 1400px){
  .resumefixed{
    width: 100%;
    height: 100%;

  }
}