html {
  font-size: 16px;
}

body {
--nav-height: 3rem;
padding-top: var(--nav-height);
background: #0A192F;
}

#diffCol {
  color: #FFED64;
}

.navbar {
  display: flex;
  flex-direction: row;
  /* display:grid;
  grid-template-columns:1fr 1fr; */
  justify-content: space-between;
  align-items: center;
  overflow:hidden;
  width: 100%;
  height: 4rem;
  position: fixed;
  top: 0;
  left: 0;
  background: #112240;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.navbar ul{
  list-style:none;
  /* display:grid;
  grid-template-columns:repeat(6,1fr); */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 35rem;
  margin:0; /*Removes the margin around the .nav*/
  margin-right: 3rem;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.navbar--hidden {
transform: translateY(calc(-2.75 * var(--nav-height)));
box-shadow: none;
}

#navLogo {
  margin-left: 3rem;
}


/* .navbar img{height:16px;width:auto;justify-self:start;margin-left:20px;} */

/* .navbar ul{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);justify-self:end;} */
/* .nav-item a{color:#000;font-size:0.9rem;font-weight:400;text-decoration:none;transition:color 0.3s ease-out;}
.nav-item a:hover{color:#3498db;} */

#iMg{
display: flex;
align-items: center;
justify-content: center;
height: 2.5rem;
width: 2.5rem;
border-radius: 10px;
border: 0.2rem solid #FFED64;
}
#iMg>span{color:#FFED64;font-family: arial;}
#iMg:hover{background:rgba(255, 255, 100, 0.25);transition: .1s ease;}

.nav__link {
color: #ffffff;
text-decoration: none;
margin: 0 1em;
font-weight: normal;
font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
font-size: 0.75rem;
transition:color 0.3s ease-out;
}

.nav__link:hover {
color: #FFED64;
transition: .1s ease;
}

button {
color:#FFED64;
background: none;
padding: 0.75rem 1.25rem;
border: 1px solid #FFED64;
border-radius: 3px;
font-size: 0.75rem;
transition: .1s ease;
}

button:hover {
background:rgba(255, 255, 100, 0.25);
transition: .1s ease;
}





/*Title Section*/
/*===============*/
#titleSection {
display: flex;
justify-content: center;
flex-direction: column;
height: 100vh;
max-width: 55rem;
margin: -2rem auto 1rem;

}

#titleOne {
font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
font-size: 1rem;
color: #FFED64;
font-weight: normal;
}

#titleTwo {
font-family: arial;
font-size: 2rem;
margin: 0 -0.3rem; /* Sit flush against parent section */
}
#titleTwo > h1 {
margin: 0;
color: white;
padding: 0.75rem 0;
}

#titleTwo > h1:last-child {
color: #8892b0;
}

#titlePara {
font-size: 1.15rem;
font-weight: lighter;
line-height: 1.25rem;
font-family: 'Gill Sans', 'Gill Sans MT';
color: #8892b0;
margin-bottom: 3rem;
max-width:33rem;
}

.titleLinks {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 150px;
} 

.titleLinks > a {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-right: 1rem;
text-decoration: none;
text-transform: uppercase;
color: white;
font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
}

.titleLinks > .underLine {
width: 70px;
height: 1px;
border: 2px solid white;
border-radius: 5px;
margin-top: -1rem;
transition: .5s ease;
}

.titleLinks:hover .underLine {
border: 2px solid #FFED64;
width: 115px;
transition: .3s ease;
}

/*General Section*/
/*===============*/
.generalSection {
display: flex;
/* justify-content: center; */
flex-direction: column;
margin: 0 auto;
width: auto;
}

/*About Section*/
/*===============*/
#aboutSection {
max-width: 50rem;
margin: 0rem auto 1rem;
}

.sectionTitle {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
margin-bottom: 1rem;
Width: 100%;
height: 3rem;
color: white;
font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
}
.sectionTitle > h2 >#diffCol {
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
  font-size: 1.1rem;
}

.titleLine {
  border-bottom: 1px solid grey;
  width: 40%;
  margin-left: 1rem;
}

#aboutSection-main {
  display: flex;
  justify-content: space-between;
}

#aboutSection-para {
  color: #8892b0;
  margin-right: 2rem;
  width: 60%;
  margin-right: 2rem;
}

#aboutSection-para > p {
  margin-top: 0;
  width: 95%;
  font-size: 0.95rem;
  font-weight: lighter;
  line-height: 1.5rem;
  letter-spacing: 0.01rem;
  font-family: Helvetica, sans-serif;
}

#aboutSection-para > p > #diffCol {
font-size: 1rem;
}

#aboutSection-para > ul {
  display: grid;
  justify-content: flex-start;
  grid-template-columns: repeat(auto-fill, 10rem);
  grid-auto-rows: 2rem;
  column-gap: 2rem;
  /* border: 1px solid red; */
  padding: 0 0.5rem;
}

#aboutSection-para > ul > li {
  align-self: flex-start;
  width: 100%;
  margin: 0;
  font-size: 0.75rem;
  list-style-type: square !important;
  color:#FFED64;
}
  #aboutSection-para > ul > li > span {
      color: #8892b0;
      font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
  }

#aboutSection-image {
display:flex;
margin:0;
justify-content:flex-end;
width:40%;
}
.dp-content {
  width: 18rem;
  height: 18rem;
  background-image: url('../img/dp_2.png');
  border-radius: 0.5rem;
  transition: .8s ease;
  -moz-transition: .8s ease;
  background-repeat:no-repeat;
  background-size: contain;
}
  .dp-content:hover { 
      background-image: url('../img/dp_1.png');
      transition: .8s ease;
      -moz-transition: .8s ease;
  }



/*Experience Section*/
/*==================*/
#experienceSection {
  max-width: 40rem;
  max-height: 30rem;
  margin: 0rem auto 1rem;
}

.experienceSection-main {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
/* border: 1px solid gold; */
height: 20rem;
width: 100%;
}

#scroll {
display: flex;
flex-direction: row;
width: 20%;
height: 100%;
}

#history {
display: flex;
flex-direction: column;
/* border: 1px solid lightblue; */
width: 75%;
height: 100%;
}

#experienceSection-buttons {
display: flex;
flex-direction: column;
width: 100%;
}

#experienceSection-buttons>.slider {
display: flex;
/* flex-direction: row; */
}

#slide {
width: 0.1rem;
height: 1.2rem;
/* background-color: #64FFDA; */
padding: 0.6rem 0;
}

.exButton {
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
border: none;
padding: 0.5rem 1rem;
background:none;
width: 100%;
font-family: monospace;
}
.exButton:hover {
background: #10223F;
}

h3,#out0 {
font-size: 1rem;
margin: 0.5rem 0 0;
color: #C5D0F4;
}

h3 > #out1 {
color: #FFED64;
font-size: 1rem;
}

#history > p, li, span {
/* font-size: 1rem; */
color: #78829F;
}

/* #history > p {font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;} */

#history > ul {
margin-top: -1.5rem;
margin-left: -1.8rem;
}


#history > ul > li {
/* margin-left: -1.8rem; */
line-height: 1.2rem;
font-family: arial;
padding-bottom: 0.5rem;
max-width: 100%;
/* border: 1px solid red; */
}

.out3 > li:before {
color: red;
}

#history > .out3 {
 /* width: 100%; */
 /* border: 1px solid lightblue; */
}

/* History Sections */
#his-Up{display: none;}
#his-Ap,#his-Sc,#his-Sc2,#his-St,#his-Mu{ display: none;}


/*Work Section*/
/*==================*/
#workSection {
max-width: 55rem;
max-height: 60rem;
margin: 0rem auto 10rem;
}

/* Project Section */
/*==================*/
#projectName {
display: flex;
flex-direction: row;
justify-content: center;
height: 100%;
margin-bottom:1rem;
}

.box {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 1rem;
height: 100%;
width: 100%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
/*   border: 1px solid red; */
}

/* Project Image */
.box1 {
display: flex;
justify-content: center;
align-items: center;
height: 20rem;
width: 60rem;
margin-right:-5rem
}

/* First Project */
.imaGe {
width: 100%;
height: 80%;
background-image: url('../img/project-images/qas-2.png');
border-radius: 0.5rem;
transition: .8s ease;
-moz-transition: .8s ease;
background-repeat:no-repeat;
background-size:cover;
}
.imaGe:hover { 
  background-image: url('../img/project-images/qas-1.png');
  transition: .8s ease;
  -moz-transition: .8s ease;
}

/* Second Project */
.imaGe1 {
width: 100%;
height: 80%;
background-image: url('../img/project-images/tnm-2.png');
border-radius: 0.5rem;
transition: .8s ease;
-moz-transition: .8s ease;
background-repeat:no-repeat;
background-size:cover;
}
.imaGe1:hover { 
  background-image: url('../img/project-images/tnm-1.png');
  transition: .8s ease;
  -moz-transition: .8s ease;
}  

/* ThirdProject */
.imaGe2 {
width: 100%;
height: 80%;
background-image: url('../img/project-images/mgb_2.png');
border-radius: 0.5rem;
transition: .8s ease;
-moz-transition: .8s ease;
background-repeat:no-repeat;
background-size:cover;
}
.imaGe2:hover { 
  background-image: url('../img/project-images/mgb_1.png');
  transition: .8s ease;
  -moz-transition: .8s ease;
} 

.box2 {
display: flex;
justify-content: center;
flex-direction: column;
align-items: flex-end;
border-radius: 0 1rem 1rem 0;
margin: 0;
height: 100%;
width: 50%;
font-family: "Inter", "San Francisco", sans-serif;
}
.box2>h3,h1,#tOols,#linKs{margin-right:1rem;}

.box2 > h3 {
font-weight: normal;
font-family: "SF Mono", "Roboto Mono", monospace;
font-size: 0.75rem;
color: #FFED64;
}

.box2>a>h1 {
font-size: 1.75rem;
color: white;
font-weight: 500;
}
.box2>a>h1:hover{color:#FFED64;}

#infoText {
display: flex;
align-items: center;
background-color: #112240;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 0.25rem; 
height: 7rem;
width: 27rem;
}
#infoText>p{font-size:0.9rem;text-align:right;color:#a8b2d1;line-height:1.5rem;width:100%;margin:1rem;}
#diffCol{color:#FFED64;font-size:0.75rem;}

#tOols {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;

font-size: 0.5rem;
height: 1.25rem;
width: 9rem;
}
#tOols > li {
font-size: 0.85rem;
margin-right: -0.1rem;
margin-left: 1rem;
color: #a8b2d1;
}

#linKs {
display: flex;
justify-content: flex-end;
height: 1.25rem;
width: 6rem;
}

#linKs > a {
color: #a8b2d1;
margin-right: -0.1rem;
margin-left: 0.5rem;
}

#linKs > a:hover {
color:#FFED64;
}

#linKs > a > svg {
width: 1.25rem;
height: auto;
}

/* Contact Section */
/*==================*/
#contactSection {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 40rem;
max-height: 30rem;
margin: 0rem auto 1rem;
color: #b3aca7;
}

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);

header {
position: relative;
margin: 1rem auto 1rem;
font-size: 1.5em;
text-align: center;
letter-spacing: 7px;
font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
}

.email-link{cursor: pointer;}


/* Footer */
/* =============== */
footer{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin: 0 0 2rem;
height: 2%;
}

footer #linKs {
display: flex;
justify-content: space-around;
}

footer p {
color: #e2dedb;
font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
font-size: 0.75rem;
}

/* Mobile Navigation */
/* ====================== */
/* Smooth Animation */
.no-search{transform:translate(0);transition:transform 0.7s ease-in-out;}
/* MOBILE MENU & ANIMATION */
.menu-toggle .bar{width:25px;height:3px;background-color:#FFED64;margin:5px auto;-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.menu-toggle{justify-self:end;margin-right:25px;display:none;}
.menu-toggle:hover{cursor:pointer;}
#mobile-menu.is-active .bar:nth-child(2){opacity:0;}
#mobile-menu.is-active .bar:nth-child(1){-webkit-transform:translateY(8px) rotate(45deg);-ms-transform:translateY(8px) rotate(45deg);-o-transform:translateY(8px) rotate(45deg);transform:translateY(8px) rotate(45deg);}
#mobile-menu.is-active .bar:nth-child(3){-webkit-transform:translateY(-8px) rotate(-45deg);-ms-transform:translateY(-8px) rotate(-45deg);-o-transform:translateY(-8px) rotate(-45deg);transform:translateY(-8px) rotate(-45deg);}







/* Media Queries */
/* =============== */
/* Smallest */
@media only screen and  (max-width: 20rem) {
* {font-size: 14px;}
}

@media only screen and  (max-width: 52rem){
#workSection {margin:4rem auto 3rem;}
#projectName>.box{flex-direction:column;align-items:center;width:100%;box-shadow:none;margin-bottom: 1rem;}
.box1,.box2{width:100%;margin:0;}
.box1{height:20rem;}
.imaGe{background-image: url('../img/project-images/qas-2.png');height: 100%;opacity: 0.1;z-index:-3;}
.imaGe1{background-image: url('../img/project-images/tnm-2.png');height: 100%;opacity: 0.1;z-index:-3;}
.imaGe2{background-image: url('../img/project-images/mgb_2.png');height: 100%;opacity: 0.1;z-index:-3;}
.box2{justify-content:flex-start;height:17rem;margin-top:-18rem;}
/* .box2>h3,h1,#tOols,#linKs{margin-right:1rem;} */
#infoText{width: 100%;}
#contactSection {max-width: 100%;margin:8rem 2.5rem 0rem;}
#contactSection header{font-size: 1.5rem;}
#contactSection>form{display:flex;flex-direction:column;justify-content:center;align-items:center;}
form input,textarea{width: 20rem;}
#submit{width:22rem;}
footer{height:5rem;margin-top: 1rem;}
footer #linKs{margin-bottom:-0.5rem;}
footer p{margin: 0;}
}

/*Shrink to Mobile and Hide Navigation*/
@media only screen and (min-width: 35rem) and (max-width: 42rem) {
#titleTwo {font-size: 3.5vw;}
/* #titlePara {color: green; } */
#titleSection {max-width:85%;}

  /*General Section*/
  #aboutSection,#experienceSection,#workSection{max-width: 85%;}

  /*About Section*/
  #aboutSection-main {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
  #aboutSection-para {
    width:100%; margin: 0;}

  #aboutSection-para > ul {
    grid-template-columns: repeat(auto-fill, 8rem);
    grid-auto-rows: 2rem; column-gap: 4rem;
  }
  #aboutSection-para > ul > li {
    width: 8rem;
  }
  #aboutSection-image{display:flex;justify-content:center;width:100%;}
  .dp-content {
    width: 15rem;
    height: 15rem;
  }
}

/*Reduction to percentage based width*/
@media only screen and (min-width: 42rem) and (max-width: 62rem) {
/* Title section*/
#titleTwo {font-size: 3.5vw;}
/* #titlePara {color: red;} */
#titleSection {max-width:75%;}

  /*General Section*/
  #aboutSection,#experienceSection,#workSection {max-width: 75%;}
  
  /*About Section*/
  #aboutSection-main {display:flex;justify-content:space-between;}
  #aboutSection-para { margin-right:1rem; width:60%;}
  #aboutSection-para > ul {
    grid-template-columns: repeat(auto-fill, 6rem);
    grid-auto-rows: 2.5rem; column-gap: 3rem;
  }
  #aboutSection-para > ul > li {
    width: 7rem;
  }
  /* #aboutSection-image{} */
  .dp-content {
    width: 15rem;
    height: 15em;
    background-repeat:no-repeat;
    background-size: contain;
  }

  /*Experience Section*/

  /*Projects Section*/
}

/* Test for Mobile */
@media only screen and (min-width:320px) and (max-width:640px)  { 
/*Title Section*/
/* #titleTwo {font-size: 1rem;} */
#titleOne {font-size: 0.9rem;}
#titleTwo {font-size: 3.5vw;}
#titlePara {max-width: 100%;}
#titleSection {max-width:80%; height: 100vh; margin-bottom: 10rem;}

/*General Section*/
.generalSection,#aboutSection,#experienceSection,#workSection{max-width:80%;}

/*About Section*/
#aboutSection-main {flex-direction: column;justify-content: center;align-items: center;}
#aboutSection-para {width:100%; margin: 0; }

#aboutSection-para > ul {grid-template-columns: repeat(auto-fill, 5rem);grid-auto-rows: 2rem; column-gap: 7rem;}
#aboutSection-para > ul > li {width: 8rem;}
#aboutSection-image{display:flex;justify-content:center;width:100%;}
.dp-content {width: 15rem;height: 15rem;}

/* Experience Section */
#experienceSection {margin-bottom:6.5rem;}
.experienceSection-main {display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;}
#scroll {width:100%;height:2rem;}
#experienceSection-buttons {display:flex;flex-direction:row;justify-content:center;}
.slider {height:2rem;}
#slide {display:none;}
.exButton {padding:0 0.3rem;}
.exButton > span {font-size:2.5vw;}
#history {width:100%;height:25rem;}
#history > ul {margin-top: -1.5rem;margin-left: -1.8rem;}
}

/* Big Mobile Nav */
@media only screen and (min-width:320px) and (max-width: 720px) { 
  /* #titlePara {color:grey;} */


  .navbar ul{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    justify-self:end;
    align-items:flex-start;
    position:fixed;
    top:4rem;
    transform:translate(180%);
    text-align:center;
    overflow:hidden;
    border-radius:0rem 0rem 0rem 2rem;
    background-color: #112240;
  }
  /* .navbar li{padding:1.5rem;} */
  .navbar li{margin: 1rem -1rem;}
  .navbar li:first-child{margin-top:3rem;}
  .navbar li a{font-size:1rem;}
  .navbar li:active{background-color: grey;}
  .menu-toggle,.bar{display:block;cursor:pointer;}
  .mobile-nav{transform:translate(0%)!important;}
  .navbar button {margin-left: 2rem; font-size: 1rem;}
}

/* Big Mobile Nav - Position */
@media only screen and (min-width: 610px) and (max-width: 720px) {
  /* #titlePara {color:lime;} */
  .navbar ul {
    left: 25rem; /* Big Nav Position*/
    width:18rem;
    height:50vh
  }
}

/* Medium Mobile Nav - Position */
@media only screen and (min-width: 500px) and (max-width: 610px) {
  /* #titlePara {color:green;} */
  .navbar ul {
    left: 18rem; /* Big Nav Position*/
    width:18rem;
    height:45vh
  }
}

/* Smallest Mobile Nav - Position  */
@media only screen and (min-width: 436px) and (max-width: 500px) {
  /* #titlePara {color:red;} */
  .navbar ul {
    left: 15rem;
    width:13rem;
    height:40vh;
  }

  .navbar li{margin: 0rem -2rem;}
  .navbar li:first-child{margin-top:1rem;}
}

/* Mobile Nav - Positions  */
@media only screen and (min-width: 360px) and (max-width: 428px) {
  /* #titlePara {color:pink;} */
  .navbar ul {
    left: 12rem;
    width:13rem;
    height:45vh;
  }
   .navbar li{margin-left:-2rem;}

  footer p{width:80%;text-align:center;}
}