/* Body */

body {
  opacity: 0;
  transition: 3s opacity;
}

body.fade {
  opacity: 1;
  transition: 3s opacity;
}

/* Nav Bar */

nav {
  padding: 15px;
  color: rgb(128, 126, 122);
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 1px;
  font-size: 10px;
}

nav > ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.nav-item {
  transition: all .5s ease-in-out;
}

.nav-item:hover {
  color: bisque;
  transition: all .5s ease-in-out;
}

/* About Section / Header */

header {
  margin-top: 50px;
  display: flex;
  height: fit-content;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 0px 30px 0px 30px;
  }
  
  /* .header-details applies only to desktop */
  .header-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 50px;
    margin-bottom: 135px;
  }

.header-text > h1,
.header-text > p {
  text-align: left;
  max-width: 550px;
}

.header-text > h1 {
  line-height: 1.5;
  font-size: 30px;
  color: rgb(61, 61, 61);
  font-family: 'Playfair Display';
  letter-spacing: .5px;
}

.header-text > p {
  font-family: 'Poppins';
  color: rgb(162, 160, 157);
  font-size: 12px;
  line-height: 18px;
}

strong {
  color: rgb(255, 115, 0);
  font-style: italic;
  font-weight: 500;
}

.divider {
  height: 5px;
  width: 300px;
  background-color: bisque;
  margin: 40px 0px;
  }
  
  .header-container {
    display: flex;
    flex-direction: row;
}

.profile-img {
  height: 300px;
    width: 300px;
  border-radius: 50%;
  margin: 30px 0px 50px 0px;
}

.image-click {
  transform: rotate(180deg);
}

/* Icons */

.header-icons {
  display: flex;
  justify-content: left;
  align-items: center;
  text-align: center;
}
.fa-envelope,
.fa-linkedin-in,
.fa-angellist,
.fa-twitter,
.fa-github {
  font-size: 18px;
  color: rgb(61, 61, 61);
  margin-top: 30px;
  margin-right: 10px;
  transition: all .5s ease-in-out;
}

.fa-envelope:hover,
.fa-linkedin-in:hover, 
.fa-twitter:hover,
.fa-angellist:hover,
.fa-github:hover {
  color: rgb(255, 115, 0);
  transition: all .5s ease-in-out;
}

.resume {
  margin: 0;
  margin-top: 29px;
  font-size: 10px;
  font-family: 'Poppins';
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid rgb(61, 61, 61);
  padding: 5px 10px 5px 10px;
  line-height: 10px;
  transition: all .5s ease-in-out;
}

.resume:hover {
  border: 1px solid rgb(255, 115, 0);
  transition: all .5s ease-in-out;
  background-color: rgb(255, 115, 0);
  color: white;
}
#sketch-mweb {
  display: none;
}

#sketch-web {
  display: block;
}

#header-mweb {
  display: none;
}

#header-web {
  display: flex;
}