/*HTML document CSS*/
html{
  font-size: 100%;
  scroll-behavior: smooth;
}


/*Main CSS*/
body{
  font-family: "Open Sans", "Roboto", "Ubuntu", sans-serif;
  margin: 0em;
}
.light{
  background-color: white;
}
.dark{
  background-color: rgb(10,10,10);
}
.black{
  color: rgb(10,10,10);
}
.white{
  color: white;
}
section{
  margin: 1.5rem 3rem;
  scroll-margin-top: 4.75rem;
}
h2{
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0em;
}



/*Experience and Skills CSS*/
#skills ul, #experiences ul{
  padding: 0em;
}
#experiences ul{
  display: flex;
  flex-direction: column;
}
#experiences li {
  display: flex;
  justify-content: space-between;
  background-color: lightgrey;
  color: rgb(10,10,10);
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
}
.timeFrame{
  color: gray;
}
#experiences li:last-child {
  margin-bottom: 0em;
}
#skills li {
  display: inline-block;
  border-style: solid;
  border-color: #94f;
  padding: .25rem .5rem;
  margin: 0em .25rem;
  color: #94f;
}



/*Project Section CSS*/
#projects ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: .25rem;
  padding: 0em;
}
#projects li{
  display: inline-block;
  width: 25%;
  min-width: 230px;
  margin-right: 3rem;
  margin-bottom: 2rem;
  margin-top: 1rem;
  background-color: #94f;
  box-shadow: -10px 5px 10px rgba(153, 68, 255, .65);
  position: relative;
  top: 0px;
  transition: top ease 0.5s;
}
#projects a{
  color: white;
  text-decoration: none;
}
#projects li:hover{
  top: -1.5rem;
}
#projects p{
  padding: 0em 1rem;
  text-align: center;
}
#projects h3{
  padding: 0rem 1rem;
  margin-bottom: 0rem;
  text-align: center;
}




/*Navigation Bar CSS*/
.whiteNav{
  color: rgba(255,255,255,.7);
  fill: rgba(255,255,255,.7);
}
.blackNav{
  color: rgba(0,0,0,.7);
  fill: rgba(0,0,0,.7);
}
nav {
  display: flex;
  align-items: center;
  height: 100%;
}
nav ul{
  font-family: "Open Sans";
  letter-spacing: .09375rem;
}
#directory{
  margin: 0rem 0rem 0rem auto;
}
.home{
  display: flex;
  align-items: center;
}
nav li{
  display: inline-block;
  padding: .25rem .5rem;
}
nav a{
  text-decoration: none;
}
nav svg{
  width: 100%;
}
#lightDark, #hamburger{
  width: 1rem;
  padding: 0em;
  background-color: rgba(0,0,0,0);
  border: 0em;
}
#hamburger{
  display: none;
}
.fixed{
  position: fixed;
  z-index: 1;
  top: 0em;
  left: 0em;
  bottom: 0em;
  right: 0em;
}
.smallNav{
  height: 2.5rem;
}
.bigNav{
  height: 11.25rem;
}



/*Navigation One and Navigation Two*/
.navOne{
  display: inline-block;
  background-color: rgba(0,0,0,0);
  margin: 0em;
  padding: .625rem .9375rem .625rem 3.125rem;
}
.navTwo{
  display: inline-block;
  margin: 0em;
  padding: .625rem .9375rem .625rem 3.125rem;
  box-shadow: 0 5px 20px -10px grey;
}
.navOne .home {
  display: none;
}
.navTwo .home {
  padding: 0rem 0em;
  margin: 0em;
}
.navTwo #photo img{
  border-radius: 50%;
  width: 2.1875rem;
  height: 2.1875rem;
}
.navOne nav a{
  color: rgba(255,255,255,.7);
}
.navOne svg{
  fill: rgba(255,255,255,.7);
}
.navOne #directory a:hover{
  border-bottom: solid;
  border-color: white;
}
.navTwo #directory a:hover{
  border-bottom: solid;
  border-color: #94f;
}



/*Main image CSS*/
#imageSection{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin: 0em;
}
#image img{
  position: absolute;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
#dimmer{
  position: absolute;
  top: 0em;
  left: 0em;
  bottom: 0em;
  right: 0em;
  background-color: black;
  opacity: .7;
}
#title{
  position: absolute;
  top: 45%;
  left: 0em;
  width: 100%;
}
#title h1, #title h2{
  color: white;
  margin: 0em;
  padding-bottom: .625rem;
  font-family: "Open Sans";
  letter-spacing: 5.5px;
  text-align: center;
}
#title h1{
  font-size: 3rem;
  font-weight: 300;
}
#title h2{
  font-size: .75rem;
  opacity: .7;
}



/*Message Form CSS*/
form{
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.smallField{
  display: flex;
  justify-content: space-between;
  width: 50%;
}
.smallBox{
width: 47.5%;
}
.largeField{
  width: 50%;
  margin: 1rem 0em 0em 0em;
}
label{
  font-size: 1.25rem;
  color: grey;
}
input, textarea{
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
button{
  border: none;
  cursor: pointer;
  color: white;
  font-family: inherit;
  font-size: 1rem;
}
.submit{
  width: 7.5vw;
  min-width: 90px;
  background-color: #94f;
  margin: 1rem 0em 0em 0em;
  padding: .5rem 1rem;
  border-radius: 0.1875rem;
}
.submit:hover{
  background-color: rgba(60, 27, 100, .75);
}



/*Messages CSS*/
.edit{
  width: 7.5vw;
  min-width: 90px;
  background-color: grey;
  padding: .5rem 1rem;
  border-radius: 0.1875rem;
}
.edit:hover{
  background-color: rgba(128, 128, 128, .75);
}
.remove{
  width: 7.5vw;
  min-width: 90px;
  background-color: #dc2626;
  padding: .5rem 1rem;
  border-radius: 0.1875rem;
}
.remove:hover{
  background-color: rgba(220, 38, 38, .75);
}
#messages ul{
  padding: 0em;
}
#messages li{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
#messages div, #messages button{
  display: inline-block;
  margin: 0em 1rem 0em 0em;
}
#messages input{
  margin: 0em;
}
#messages a{
  text-decoration: none;
  color: #94f;
  margin-right: 1rem;
}
#messages a:hover{
  border-bottom: solid;
  border-color: #94f;
}
#new{
  margin-top: 1rem;
}



/*Footer CSS*/
footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin: 0 auto;
  width: 100%;
  background-color: #94f;
  }
footer ul{
  display: flex;
  align-items: center;
  margin: 0em 3em 0em 0em;
  padding: 0em;
  border: 0em;
}
footer li{
  display: inline-block;
  margin-left: 1rem;
}
footer p{
  display: inline-block;
  margin: 0em 3rem;
  color: lightgrey;
}
footer svg{
  fill: lightgrey;
}
footer svg:hover{
  fill: rgb(10,10,10);;
}

/*Media Specific CSS*/

/*Navigation to section links will be accessible within a navigation button for smaller display sizes*/
@media screen and (max-width: 815px) {
 nav{
    justify-content: space-between;
  }
  #lightDark{
  }
  .navOne, .navTwo{
    padding: .625rem 3.125rem;
    align-items: flex-start;
  }
  .mobileOnly{
    display: none;
  }
  .noAuthor{
    display: none;
  }
  #directory{
    display: flex;
    flex-direction: column;
    margin: 0em;
    padding: 0em;
  }
  #navButton{
    align-self: flex-start;
    padding-top: .625rem;
  }
  #hamburger{
    display: inline-block;
  }
  section{
    scroll-margin-top: 13.5rem;
  }
}

/*Form elements will display as a column with larger width, navigation to section links will not display, and Project list will display as column with bottom margin for smaller display sizes*/
@media screen and (max-width: 768px) {
  form{
    display: flex;
    flex-direction: column;
  }
  .smallField{
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .smallBox{
  width: 100%;
  }
  .largeField{
    width: 100%;
    margin: 1rem 0em 0em 0em;
  }
  input, textarea{
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
  }
  #projects ul{
    flex-direction: column;
    align-items: center;
  }
  #projects li{
    margin-bottom: 3rem;
    margin-right: 0rem;
  }
  #projects li:last-of-type{
    margin-bottom: 0rem;
  }
}
/*Text within each experience list elemnt will display as a column for smaller display sizes*/
@media screen and (max-width: 790px){
  #experiences li{
    flex-direction: column;
  }
}
/*Footer elements will display as a column for smaller display sizes*/
@media screen and (max-width: 426px){
    footer{
      flex-direction: column;
      }
    footer ul{
      margin: 0rem;
    }
    footer li{
      margin: 0em .5rem;
    }
    footer p{
      margin: .5rem 0em;
    }
  }