/* ---------------------------- HOME PAGE STYLING --------------------------- */

.intro-container {
  text-align: center;
  align-items: center;
  justify-content: center;
}

.video-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 56.25% 0 0 0;
  position:relative;
  margin: 0.5em;
}

iframe {
  display: flex;
  top: 0;
  left:0;
  width:100%;
  height: 5.5em;
  margin:0;
  padding:0;
}

.video{
  position: absolute;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}


.details {
  margin: 2em;
}

.featured-grid {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.featured-col {
  width: 75%;

}

.project-thumbnail {
  text-align: center;
  align-items: center;
  justify-content: center;
  width:100%;
  transition-duration: 1s;
  margin: 0em;
  padding: 0em;
  margin-bottom:1em;
  margin-top: 1em;
}

h2 {
  color: #7B8C00;
  text-decoration: none;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.about-me {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin: 5em;
  margin-top: 0;
  margin-bottom: 0;
}

.title {
  order: 0;
  font-size: 3em;
  margin:0;
  padding:0;
  margin-top:1em;
}

.desc {
  text-align: left;
  order: 2;
  margin:0;
  padding:0;
  background-color: white;
}

.profile-picture {
  margin: 2em;
  order: 1;
}

@media screen and (min-width: 40em) {

  .video-container {
    margin: 6em;
    margin-top: 0em;
    margin-bottom: 1em;
  }

  .featured-grid {
    width:100%;
    margin:0;
    padding:0;
  }

  .featured-col {
    width:95%;
    display: flex;
    flex-direction: row;
    margin:0;
    padding:0;
  }

  .project-thumbnail {
    flex:1;
    width:90%;
    margin:0;
    padding:0;
  }

  .about-me{
    flex-direction: row;
    margin: 5em;
  }

  .profile-picture {
    flex:1;
    width:25%;
    margin:0;
    order:0;
    margin-left: 0em;
    margin-right: 3em;
  }

  .title {
    text-align: left;
    margin:0;
    padding:0;
  }

  .writing {
    flex:1;
    max-width: 50%;
  }

}

@media screen and (min-width: 60em) {

  .about-me{
    flex-direction: row;
    margin: 5em;
  }

  .profile-picture {
    flex:1;
    width:25%;
    margin:0;
    max-height: 30%;
    max-width: 30%;
    order:0;
    margin-left: 5em;
    margin-right: 3em;
  }

  .title {
    text-align: left;
    margin:0;
    padding:0;
  }

  .writing {
    flex:1;
    max-width: 25%;
  }

}