/*---------------------------main------------------------------*/

main {
  padding-left: 5%;
  padding-right: 5%;
}

header {
  /*background-image: url("../../images/header.jpg"); */
  background-color: #93A8AC;
  margin-top:0;
  height:auto;
  align-content: center;
}

h1 {
  color: #D17B0F;
  font-family: avenir;
  font-size: 1em;
  text-align: center;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0;
  border-top: solid 2px #253237;
  padding-top: 2em;
  border-radius: 0.5em;
}

h2 {
  font-family: Playfair Display;
  color:white;
  font-weight: normal;
  font-size: 4em;
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

h3 {
  color: #93A8AC;
  font-family: serif;
  font-size: 1.2em;
  text-align: center;
  font-weight: 100;
  font-style: italic;
  margin-top: 2em;
  margin-bottom: 0;

}

h4 {
  color: #93A8AC;
  font-family: sans-serif;
  font-size: 0.75em;
  text-align: center;
  font-weight: 100;
  margin-top: 1em;
}

article {
  border-bottom: solid 2px grey;
}

p {
  font-family: avenir;
  font-size: 1.0em;
  text-align: left;
  margin-top: 2em;
  margin-left: 2.5em;
  margin-right: 2.5em;
  margin-bottom: 2em;
  color:#253237;
}

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

.about-me-sidebar .about-me-container .resume {
  text-decoration: none;
   color: white;
   background-color: darkgoldenrod;
   padding: 10px;
   border-radius: 0.5em;
  margin-left:2.5em;
  font-family: avenir;

  }
/*---------------------------- nav ---------------------------*/
nav {
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  align-items: center; 
}

.icon {
  width:0.5em;
  height:0.5em;
  margin-bottom: 0em;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

/*-------------------------side bar about---------------------------*/


@media (min-width: 1040px) {
  main {
    display: flex;
    align-items: stretch;
    position: relative;
    justify-content: center;
  }

  .about-me-sidebar .about-me-container {
    position: sticky;
    top: 0;
    right: 0;
    padding-top: 1rem;
  }

  p {
    padding-right: 15px
  }
}

.images1 {
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
   align-items: center; 
   margin-top: 2em;
}

.about-me-sidebar .about-me-container .imgabout {
  width: auto;
  height: 12em;
  margin-left: 0.5em;
  margin-right: 0,5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/*------------------------projects---------------------*/

.projects {
  padding-top: 1rem;
  min-width: 65%;
}

.smyle-container {
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  align-items: center; 
}

@media (max-width: 500) {
  .smyle-container {
    flex-direction: column;
  }
}

.smyle {
  height:10em;
  width: auto;
  margin:2px;
  margin-top: 20px;
}

.avocado-container {
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  align-items: center; 
}

@media (max-width: 500) {
  .avocado-container {
    flex-direction: column;
  }
}

.avocado-container .avocado {
  height:30em;
  width: auto;
  margin:2px;
  margin-top: 20px;
}

.kpmg-container {
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  align-items: center; 
}

@media (max-width: 500) {
  .kpmg-container {
    flex-direction: column;
  }
}

.kpmg-container .kpmg {
  height:15em;
  width: auto;
  margin:2px;
  margin-top: 20px;
}

.friends-container {
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  align-items: center; 
}

@media (max-width: 500) {
  .friends-container {
    flex-direction: column;
  }
}

.friends-container .friends {
  height:19em;
  width: auto;
  margin:2px;
  margin-top: 20px;
}

section :nth-of-type(1) img {
  height:10em;
  width: auto;
}

@media (max-width: 580px) {
  .photos {
    display: none;
  }
}