/* Universal Selector */
* {
  box-sizing: border-box;
}

/*  Wrap/Body */
.wrap {
  width: 95%;
  text-align: center;
  margin: 0 auto;
}

body {
  font-family: 'PT Serif', serif;
  background-color: #bcd8e2;
}

/* Elements */
main {
  background-color: white;
  margin-top: 100px;
}

a {
  color: black;
  font-weight: bold;
}

p {
  font-size: 1.125rem;
  line-height: 30px;
}

/* Navbar */
.name {
  padding: 20px 0;
}

.navbar li {
  background-color: white;
  margin-top: 10px;
  padding: 15px;
}

.navbar a {
  padding: 10px 50px;
}

/* Introduction Bio */
.intro {
  margin-top: 60px;
}

.profile-pic {
  width: 70%;
  margin-bottom: 20px;
}

/* Portfolio  */
section[id="portfolio"] {
  padding: 35px 0 80px 0;
}

section[id="portfolio"] h2 {
  margin-bottom: 50px;
  flex-basis: 100%;
}

.portfolio-img {
  width: 95%;
}

.project {
  margin-bottom: 40px;
}

.project p {
  width: 80%;
  margin: 0 auto;
}

/* Contact Info */
.contact-list {
  margin: 40px 0;
}

.contact-list li {
  margin-bottom: 20px;
}

/* Footer */
.footer-action {
  padding-bottom: 30px;
  padding-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.footer-navbar {
  display: none;
}

/* Texts */
footer p, footer .contact-list, .intro p {
  color: grey;
}

/* Hover State */
a:hover {
  color: #FED36E
}

/* Media Query for Tablets */
@media (min-width: 768px) {

  /* Flex */
  .top-page-nav, .navbar, .intro, .container {
    display: flex;
  }

  /* Navbar */
  .top-page-nav {
    flex-direction: column;
    align-items: center;
  }

  .navbar li {
    background-color: inherit;
    padding: 0;
    margin-left: 50px;
  }

  .navbar a {
    padding: 0;
  }

  .navbar {
    flex-direction: row;
  }

  /* Introduction Bio */
  .intro {
    flex-direction: row-reverse;
    align-items: flex-start;
  }

  .intro p {
    text-align: justify;
    margin: 0;
    flex-basis: 47%;
  }

  .profile-pic {
    margin-left: 30px;
    flex-basis: 35%;
  }

  /* Portfolio */
  .container {
    flex-wrap: wrap;
  }

  .project {
    flex: 1 50%;
  }

  /* Footer */
  footer p {
    width: 65%;
    margin: 0 auto;
  }

  .to-top {
    display: none;
  }

  .footer-navbar {
    margin-top: 0;
    display: flex;
  }

  .footer-navbar li {
    margin-left: 40px;
  }
}

/* Media Query for Laptop and larger screens */
@media (min-width: 1024px) {

  /* Navbar */
  .top-page-nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* Introduction Bio */
  .intro {
    justify-content: space-between;
  }

  /* Portfolio */
  .project {
    flex: 1 30%;
  }
}