/*Global Styles*/

body {
  overflow: auto;
  margin: 0px;
  background-color: #000000;
  font-family: monospace;
}
main {
  margin-top: -37px;
}
/*KEYFRAMES and Classes*/
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animation13Sec {
  animation: fade-in 13s;
}

.animation10Sec {
  animation: fade-in 10s;
}

.animation7Sec {
  animation: fade-in 7s;
}
.animation5Sec {
  animation: fade-in 5s;
}
/*header styles*/
h1 {
  display: none;
}
h2 {
  display: none;
}

/********************************************************Navigation***********************************************************/

/*global styles*/
.ulNav {
  padding: 15px;
  text-align: center;
}
.liNav {
  color: red;
  margin: 10px;
  list-style-type: none;
  display: inline-block;
  padding: 10px;
}
a {
  text-decoration: none;
  font-weight: normal;
  font-size: 20pt;
}
a:link {
  color: white;
}
a:active {
  color: #0fff50;
}
a:visited {
  color: white;
}
a:hover {
  color: #0fff50;
}

.btn {
  background-color: transparent;
  color: #ffffff;
  border: none;
  font-size: 20pt;
  font-weight: normal;
  margin: 10px;
  padding: 10px;
}
.navigationBtns {
  position: relative;
  border: 3px solid #0fff50;
  border-radius: 10px;
  margin-left: 10%;
  margin-right: 10%;
  animation: fade-in 10s;
  height: 100px;
}

.navBtnGroup {
  position: relative;
  top: 15px;
  text-align: center;
}

.homeBtn {
  animation: fade-in 13s;
}

.homeBtn:hover {
  color: #0fff50;
}

.resumeBtn {
  animation: fade-in 13s;
}

.resumeBtn:hover {
  color: #0fff50;
}

.contactBtn {
  animation: fade-in 13s;
}

.contactBtn:hover {
  color: #0fff50;
}

.portfolioBtn {
  animation: fade-in 13s;
}

.portfolioBtn:hover {
  color: #0fff50;
}

.activeNav {
  color: #0fff50;
  position: relative;
  top: -4px;
}

#home_navigationBtns {
  margin-top: 175px;
  margin-left: 20%;
  margin-right: 20%;
}

#resume_navigationBtns {
  margin-top: 50px;
}

#contact_navigationBtns {
  margin-top: 50px;
}

/********************************************************Home Page***********************************************************/

/*Intro Section*/
.introSection {
  top: 100px;
  position: relative;
}
.introName {
  animation: fade-in 7s;
  color: white;
  font-size: 5em;
  text-align: center;
}

.introDescript {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  animation: fade-in 10s;
  color: #0fff50;
}

.introJobTitle {
  right: 25px;
  position: relative;
}

.introLocation {
  left: 15px;
  position: relative;
}

/*Quote Section*/

#homeQuote {
  color: white;
  font-size: 12pt;
  text-align: center;
  top: 75px;
  position: relative;
  animation: fade-in 7s;
}

/********************************************************Resume Page***********************************************************/

#resumeContent {
  animation: fade-in 5s;
  color: #ffffff;
  font-size: 12pt;
  margin-right: 5%;
  margin-left: 5%;
  text-align: left;
  position: relative;
  top: 50px;
  padding-bottom: 25px;
}

#resumePageTitle {
  color: #0fff50;
  font-size: 14pt;
  font-weight: bold;
  position: relative;
  text-align: center;
  top: 5px;
}

#eduSection {
  margin-left: 5px;
}

#workExSection {
  margin-left: 5px;
}

.eduContent {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.certContent {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.sectionTitle {
  color: #0fff50;
}

/********************************************************Contact Page***********************************************************/

#contactSection {
  margin-right: 5%;
  margin-left: 5%;
  top: 50px;
  border: 3px solid #0fff50;
  border-radius: 10px;
  position: relative;
  height: 500px;
}

#contactInfo {
  margin-right: 5%;
  margin-left: 5%;
  top: 50px;
  border: 3px solid #0fff50;
  border-radius: 10px;
  position: relative;
  height: 500px;
  color: #ffffff;
  font-size: 20pt;
  text-align: center;
}

#contactInfoIcon {
  position: relative;
  top: 25px;
}

#contactContent {
  animation: fade-in 5s;
  margin-top: 50px;
}

#contactSocialMedia {
  color: #ffffff;
}

#contactSocialMedia:hover {
  color: #0fff50;
}

#contactForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #0fff50;
  margin-top: 10px;
}

#contactLinkedInContent {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#contactLinkedInContent p {
  color: #0fff50;
}

#linkedin {
  border: 1px solid transparent;
}

#linkedin:hover {
  color: #0fff50;
  border: 1px solid #0fff50;
}

.contactInputField {
  width: 35%;
  text-align: center;
  margin-bottom: 10px;
}

/********************************************************Portfolio Page***********************************************************/

#randomPassPopup{
  background-color: #000000;
  position: absolute;
  width: 75%;
  margin: auto;
  opacity: 70%;
  height: 250px;
  margin-top: 65px;
  margin-left: 12.5%;
}

#randomPassPopupContent{
  background-color: #ffffff;
  width: 25%;
  height: 150px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  position: absolute;
  margin-top: 135px;
  margin-left: 36.5%
}

#randomPassGen{
  animation: fade-in 5s;
  background-color:#0fff50;
  width: 75%;
  height: 250px;
  margin: auto;
  margin-top: 65px;
  position: relative;
  /*z-index: -1;*/
}

#randomPassTitle{
  text-align: center;
  display: block;
  font-size: 20pt;
  top: 10px;
  position: relative;
  color: black;
  font-weight: normal;
}

#randomGetLength{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#randomPassForm{
  position: relative;
  text-align: center;
  top: 35px;
}

#randomPassButtonGrp{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#randomPassSubmit{
  margin-top: 50px;
  width: 100px;
  height: 30px;
  position: relative;
  margin-right:5px;
}

#randomPassReset{
  margin-top: 50px;
  width: 100px;
  height: 30px;
  position: relative;
  margin-left:5px;
}

#randomPassResp{
  width: 25%;
  height: 50px;
  background-color: #000000;
  top: 15%;
  position: relative;
  margin: auto;
  border: thin solid #ffffff;
}

#randomPassRespText{
  position: relative;
  top: 15px;
  font-size: 10pt;
}



.randomPassText{
  font-size: 12pt;
}


/********************************************************Grocery Calculator***********************************************************/

#groceryCalcPopup{
  background-color: #000000;
  position: absolute;
  width: 1005px;
  margin: auto;
  opacity: 70%;
  height: 505px;
  margin-top: 20px;
  margin-left: 20%;
}

#groceryCalcPopupContent{
  background-color: #ffffff;
  width: 25%;
  height: 150px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  position: absolute;
  margin-top: 175px;
  margin-left: 36.5%
}

#grocCalcBody{
  background-color:#0fff50;
  border: 2px solid #ffffff;
  border-radius: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1000px;
  height: 500px;
  margin-top: 20px;
  margin-left: 20%;
  position: relative;

}

#grocTitle{
  font-size: 20pt;
  height: auto;
}

#itemInput{
  margin-top: 30px;
  height:auto;
}

#itemDisplayOutput{
  background-color: #ffffff;
  border: 2px solid #000000;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  height: auto;
  margin-top: 25px;
  min-height: 200px;
  min-width: 500px;
  position: relative;
 
}

.itemOutputTitles{
 font-size: 15pt;
 font-weight: bold;
 text-decoration: underline; 
}


/********************************************************Responsive Media***********************************************************/

/* @media (max-width: 700px) {
  #home_navigationBtns {
    margin-left: 10%;
    margin-right: 10%;
  }
} */