style.css

/* browser-sync start --server --files "*.html, *.css" */

body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  color: #656565;
  font-family: 'Noto Sans', sans-serif;
}

/*Nav Bar CSS START*/

#navBar {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  border: 1px solid black;
  padding: 0;
  width: 100%;
  background-color: #7E7E7E;
  position: absolute;
  box-shadow: 0 0 25px 0 #666;

}

a {
  text-decoration: none;
  color: white;
}

.navElements {
  margin: 0 .5em;
  padding: 1em;
  color: white;
  text-decoration: none;
}

.navElements a:hover {
  color: palegoldenrod;
}

.navElements > a > i {
  margin: 0 .5em;
}

/*Nav Bar CSS END*/

/*Home Section CSS START*/

.headshot {
  width: 8em;
  height: 8em;
  border-radius: 50%;
  border: 2px solid #666;
}

.aboutMe {
  display: flex;
  flex-flow: column;
  align-items: center;
  background-color: #57d3cc;
  padding: 3em 0; 
}

.aboutMe a:hover {
  color: #656565;
}

.column-1,
.column-2 {
  margin: 2em;
}

/*Home Section END*/

/*Portfolio Section START*/

.portfolio {
  background-image: url(imgs/images.jpg);
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 3.5em 0; 
}

.portfolio > h2 {
  text-align: center;
  margin: 0;
  color: whitesmoke
}

.portfolioPrjs{
  display: flex;
  flex-flow: row wrap;
  margin: 1em;
  height: 100%;
  justify-content: center;
  padding: 0;
}

.view {
  margin: .25em;
  border: .25em solid #fff;
  overflow: hidden;
  position: relative;
  text-align: center;
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
}

.view .mask,
.view .content {
  width: 25em;
  height: 15em;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0
}

.view img {
  display: flex;
}

.view h2 {
  text-transform: uppercase;
  position: relative;
  font-size: 1em;
  padding: .25em;
}

.view p {
  font-size: .65em;
  padding: 0 1em 0;
}

.view a.info {
  text-decoration: none;
  margin: 1em 1em;
  padding: .25em .25em;
  background: #666;
}

.view a.info:hover {
  box-shadow: 0 0 5px #000
}

.view-first img {
  transition: all 0.2s linear;
  width: 25em;
  height: 15em;
}

.view-first .mask {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  opacity: 0;
  background-color: #57d3cc;
  transition: all 0.4s ease-in-out;
}

.view-first h2 {
  transform: translateY(-100px);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.view-first p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}

.view-first a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.view-first:hover img {
  transform: scale(1.1);
}

.view-first:hover .mask {
  opacity: 1;
}

.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}

.view-first:hover p {
  transition-delay: 0.1s;
}

/*Portfolio Section END*/

/*Skills Section START*/

.skillsList {
  display: flex;
  flex-flow: column;
  align-items: center;
  background-color: #57d3cc;
  width: 100%;
  padding: 3em 0; 
}

.skillsList > h3 {
  margin: .5em;
}

.skills {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  justify-content: center; 
  padding: 0;
  margin: 0 0 1em 0; 
}

.skills > li {
  margin: 2em;
  width: 10em;
}

.iconDev {
  font-size: 4em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.iconDesc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: .5em;
  background-color: whitesmoke;
  border-radius: 5%;
  text-align: center;
  color: #57d3cc;
  margin-top: .25em;
  padding: .2em;
  font-size: .4em;
}



/*Skills Sections END*/

/*Contact Me START*/

.contactMe {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  width: 100%;
  background-image: url(imgs/images.jpg);
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4em 0; 
  color: whitesmoke
}

.contactList {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  list-style: none;
  padding: .5em;
}

.contactList > li > h2 {
  margin: 0;
}

.contactList > li {
  display: flex;
  justify-content: center;
  margin: 0 .5em;
}

.contactMe > p {
  justify-content: center;
  padding: 0;
  margin-top: 0;
  text-align: center;
}

.contactMe a:hover {
  color: #666;
}

/*Contact Me END*/

/*Footer*/

footer {
  border-top: 1px solid black;
  text-align: center;
  padding: 1em 0; 
  background-color: rgb(87, 211, 204);
}

footer > ul {
  display: flex;
  flex-flow: row;
  list-style: none;
  justify-content: center;
  margin: 0;
}

footer > ul > li {
  display: flex;
  align-items: center;
  margin: 0 .5em;
}

footer > ul > img {
  justify-content: center;
  width: 2em;
  height: 2em;
}

/* Resume Page Start */

#navBarResume {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  border: 1px solid black;
  padding: 0;
  width: 100%;
  position: fixed;
  background-color: #7E7E7E;
  box-shadow: 0 0 25px 0 #666;
}

.wrapperResume {
  margin: 0 .5em
}

#resumeSkills > h1 {
  margin: 0;
  padding-top: 3em;
}

.fontStyle {
  font-style: italic;
  font-weight: 900;
  color: #656565;
  margin-right: .2em;
}

.resumeSkills {
  margin: .25em
}

.jobTitle {
  display: flex;
  justify-content: space-between
}

h4 {
  margin: 0 .5em 0 .5em;
}

.resumeEnv {
  margin-left: 1.5em;
}

#resumeJobs {
  margin: .5em;
}

#resumeEducation {
  margin: .5em;
}

/* Resume Page End */

/* Media Query */

@media screen and (max-width: 499px){
  .navElements {
    font-size: 8px;
  }

  body{
    font-size: .8em;
  }

  .contactMe {
    font-size: .75em
  }

  footer {
    font-size: .5em;
  }
}

@media screen and (max-width: 700px) and (min-width: 500px) {
  body{
    font-size: .8em;
  }

  .navElements {
    font-size: .7em;
  }
  
  .contactMe {
    font-size: .75em
  }

  footer {
    font-size: .5em;
  }
}

/* End Media Query */
/* Experiment */