h1,
h2,
h3,
h4,
h5,
h6,
div,
body {
  margin: 0;
  font-family: "Raleway", "Cambria", "Amatic SC", "Eczar", "Itim", serif,
    cursive, sans-serif;
}

html {
  scroll-behavior: smooth;
}

.navbar {
  overflow: hidden;
  position: fixed;
  z-index: 9999;
  padding: 25px;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 20px;
  background-color: white;
}
/* background-color: #3a5b78; */

.navbar:hover {
  opacity: 0.9;
}

.homelinks {
  color: black;
  text-decoration: none;
  font-size: 20px;
}

.background-color {
  background-color: #eef5fc;
}

.intro {
  padding: 300px 0px 50px 0px;
  justify-content: center;
}

.name {
  text-align: center;
  font-size: 40px;
}

.myTitle {
  display: flex;
  font-size: 28px;
  justify-content: center;
}

.secondCategory {
  display: flex;
  justify-content: center;
  font-size: 28px;
  align-items: center;
}

.aboutMe {
  font-size: 20px;
  width: 60%;
  align-items: center;
  padding-right: 100px;
}

.myname {
  color: #ff8360;
  font-family: "Itim", cursive;
  font-size: 24px;
}

.gracehopper {
  color: #ff8360;
  text-decoration: none;
}

.icons {
  display: flex;
  justify-content: center;
  margin: 40px;
}

.github-icon {
  height: 40px;
  width: auto;
  margin-right: 30px;
  margin-top: 10px;
  opacity: 0.7;
}

.github-icon:hover {
  /* background: #ff8360; */
  opacity: 1;
}

/* #A0E4D3 - brighter green */
/* #bad6db   -original mint green */

.section1 {
  background-color: #7cafc4;
  color: white;
  height: 100vh;
  width: 100vw;
}

.ml12 {
  font-size: 45px;
  text-emphasis: center;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5em;
}

.ml12 .letter {
  display: inline-block;
  line-height: 1em;
}

.ml5 {
  position: relative;
  /* font-weight: 300;
  font-size: 4.5em; */
  color: white;
}

.ml5 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
  line-height: 1em;
}

.ml5 .line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 3px;
  width: 100%;
  /* background-color: white; */
  transform-origin: 0.5 0;
}

.ml5 .ampersand {
  /* font-family: Baskerville, serif;
  font-style: italic; */
  /* font-weight: 400; */
  width: 1em;
  margin-right: -0.1em;
  margin-left: -0.1em;
}

.ml5 .letters {
  display: inline-block;
  opacity: 0;
}

@media (max-width: 736px) {
  .section1 {
    /* height: 500px; */
  }

  .intro {
    /* padding: 100px 0px 50px 0px; */
    padding: 220px 60px 0px 60px;
  }

  .myTitle {
    display: block;
    font-size: 20px;
    padding: 20px;
    text-align: center;
  }

  .titleBreak {
    display: none;
  }

  .title-fs,
  .title-rn {
    display: block;
  }

  .navbar {
    padding: 25px 0px 25px 0px;
  }
}

@media (max-width: 400px) {
  .section1 {
    height: 100vh;
    width: 100vw;
  }

  .ml12 {
    font-size: 34px;
  }

  .homelinks {
    font-size: 10px;
  }
}

.section2 {
  /* background-color: #edf4f4; */
  background-color: #eef5fc;
  /* background: linear-gradient(#7cafc4, #edf4f4); */
  /* height: 800px; */
  width: 100vw;
  display: flex;
  align-items: center;
}

.aboutMe-info {
  display: flex;
}

.resume {
  text-decoration: none;
  color: white;
}

.whoamI {
  font-family: "Amatic SC", cursive;
  font-size: 50px;
  padding: 0px 40px 40px 40px;
}

.whoamI2 {
  font-family: "Amatic SC", cursive;
  font-size: 50px;
  padding: 0px 40px 40px 40px;
  color: white;
}

.secondCategory2 {
  font-family: "Amatic SC", cursive;
  text-align: center;
  justify-content: center;
  font-size: 28px;
  width: 40%;
}

@media (max-width: 736px) {
  .section2 {
    background-color: #e6eceb;
    /* height: 1100px; */
    width: 100vw;
  }

  .secondCategory2 {
    text-align: center;
    justify-content: center;
    font-size: 28px;
    width: 100%;
  }

  .aboutMe-info {
    flex-direction: column;
  }

  .aboutMe {
    font-size: 18px;
    width: 80%;
    align-items: center;
    padding: 40px;
  }

  .icons {
    justify-content: center;
  }
}

.section3 {
  /* background-color: #abd2f2; */
  background-color: #ecd5db;
  /* background: linear-gradient(#edf4f4, #abd2f2); */
  /* height: 1100px; */
  width: 100vw;
}

.secondCategory3 {
  display: flex;
  justify-content: center;
  font-size: 28px;
  align-items: center;
}

.skilldescription {
  text-align: center;
  padding-bottom: 20px;
}

.skillTitle {
  font-size: 20px;
  color: black;
}

.tools-icons {
  margin: 50px 200px 50px 200px;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 736px) {
  .tools-icons {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    flex-wrap: wrap;
  }
}

.skill-logo {
  height: 80px;
  width: auto;
}

.skill-title {
  text-align: center;
}

.tools-icons > div > div {
  height: 80px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blocks {
  height: 40px;
  width: 200px;
  background-color: #f3b391;
  text-align: center;
  border: 2px solid white;
  border-radius: 15px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lists {
  text-align: center;
  padding-top: 20px;
  font-size: 18px;
}

.frameworks,
.languages,
.tools,
.testing {
  width: 25%;
  align-items: center;
  display: flex;
  flex-direction: column;
}

@media (max-width: 736px) {
  .section3 {
    /* height: 280vh; */
    width: 100vw;
  }

  .skilldescription {
    padding: 30px;
    width: 80%;
  }
}

.section4 {
  /* background-color: #3b6d91; */
  /* background: linear-gradient(#eef5fc, #abd2f2); */
  background: #b4c1f8;
  /* height: 1800px; */
  width: 100vw;
}

.foodle {
  display: flex;
  /* justify-content: space-around; */
  /* margin: 0px 50px 50px 140px; */
  /* margin: auto; */
}

.foodle-container {
  margin: auto;
  padding-left: 50px;
  padding-right: 50px;
}

.project-image-container {
  height: 500px;
  width: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 736px) {
  .project-image-container {
    height: 300px;
    width: 400px;
  }
}

.foodle-description {
  margin: 50px;
  color: white;
  font-size: 20px;
  width: 100%;
  /* font-weight: bold; */
}

.foodle-picture,
.narwhal {
  /* height: 350px;
  width: 500px; */
}

/* .narwhal {
  height: 390px;
  width: auto;
} */

.secondCategory4 {
  /* padding-top: 70px; */
  text-align: center;
  justify-content: center;
  font-size: 28px;
}

.picture {
  /* width: 50%; */
  display: flex;
  justify-content: center;
}

.picture-tag {
  width: 510px;
  opacity: 0.8;
}

.picture-tag:hover,
.picture-tag2:hover {
  opacity: 1;
  cursor: pointer;
}

.project-paragraph {
  color: white;
  padding-right: 50px;
}

.picture-description {
  width: 50%;
  padding-right: 50px;
}

.picture-description2 {
  width: 50%;
  padding-left: 100px;
}

.button {
  display: flex;
  padding-bottom: 20px;
  justify-content: center;
}

.buttonText {
  width: 130px;
  height: 50px;
  background-color: #abd2f2;
  margin-right: 20px;
  border: 3px solid white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
}

.heroku,
.github {
  text-decoration: none;
  color: black;
}

.foodle-buttons {
  display: flex;
}

.foodle-button {
  padding: 5px;
}

/* section 4 */
@media (max-width: 736px) {
  .section4 {
    width: 100vw;
  }

  .project1 {
    flex-direction: column;
  }

  .picture {
    padding: 0;
    max-width: 100%;
    height: auto;
  }

  .project2 {
    flex-direction: column;
  }

  .picture-tag2 {
    max-width: 100%;
    height: auto;
  }

  .foodle {
    margin: 0;
    flex-wrap: wrap;
  }

  .foodle-picture {
    height: 200px;
    width: 300px;
  }

  .foodle-description {
    margin: 0;
  }

  /* .foodle-button {
    justify-content: ;
  } */

  .moreInformation {
    display: none;
  }
}

.section5 {
  background-color: #eef5fc;
  /* background: linear-gradient(#abd2f2, #eef5fc); */
  /* background: linear-gradient(#3b6d91, #eef5fc); */
  /* height: 1300px; */
  width: 100vw;
}

.secondCategory5 {
  display: flex;
  justify-content: center;
  font-size: 28px;
  align-items: center;
  padding: 0px 0px 20px 0px;
}

.whoamI5 {
  font-family: "Amatic SC", cursive;
  font-size: 50px;
  /* padding-top: 20px; */
}

.research-poster {
  display: flex;
  justify-content: center;
}

.research-poster-description {
  padding-top: 20px;
  justify-content: center;
  text-align: center;
}

.research-title {
  color: black;
  font-size: 28px;
}

.Bfccc {
  height: 450px;
}

.date-poster {
  font-size: 12px;
}

.moreInformation {
  padding-top: 30px;
  cursor: pointer;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border: 2px solid #abd2f2;
  border-radius: 10px;
  z-index: 10;
  background-color: white;
  color: black;
  width: 700px;
  max-width: 80%;
}

.pitt-logo {
  height: 100px;
  width: auto;
  padding: 10px;
}

.modal-description {
  display: flex;
}

.pandemic-image {
  width: 370px;
  height: auto;
  padding: 0px 20px 20px 10px;
}

.poster-summary {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.modal.active {
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #abd2f2;
}

.modal-header .title {
  font-size: 1.25rem;
  font-weight: bold;
}

.modal-header .close-button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 1.25rem;
  font-weight: bold;
}

.open-button {
  border: 2px solid white;
  border-radius: 12px;
  background-color: #ff8360;
  font-family: Raleway;
  color: white;
  height: 45px;
  width: 140px;
  cursor: pointer;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
}

.open-button:hover {
  background-color: #2ee59d;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}

.modal-body {
  padding: 30px 25px;
}

.modal-body-project1 {
  display: flex;
  padding: 20px;
  font-size: 16px;
}

#overlay {
  position: fixed;
  opacity: 0;
  transition: 200ms ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #bad6db;
  pointer-events: none;
}

#overlay.active {
  opacity: 0.7;
  pointer-events: all;
}

/* section 5 */
@media (max-width: 736px) {
  .whoamI5 {
  }

  .Bfccc {
    max-width: 90%;
    height: auto;
  }
  .research-title {
    max-width: 95%;
    font-size: 22px;
  }
}

.section6 {
  /* background-color: #bad6db; */
  background-color: #7cafc4;
  /* height: 400px; */
  width: 100vw;
}

.secondCategory6 {
  display: flex;
  justify-content: center;
  font-size: 28px;
  align-items: center;
  padding: 50px;
}

.letschat {
  justify-content: center;
  display: flex;
  font-size: 20px;
  color: white;
}

.whoamI6 {
  font-family: "Amatic SC", cursive;
  font-size: 50px;
  color: white;
}

.icons6 {
  display: flex;
  justify-content: center;
  padding-top: 80px;
}

.github-icon6 {
  height: 30px;
  width: auto;
  padding: 10px 20px 0px 20px;
  opacity: 0.5;
}

.github-icon6:hover {
  opacity: 1;
}

/* section 6  */
@media (max-width: 736px) {
  .letschat {
    padding: 20px;
    text-align: center;
  }
}

.footer {
  background-color: #7cafc4;
  opacity: 0.5;
  color: black;
  width: 100vw;
}

.footerName {
  justify-content: center;
  display: flex;
  padding: 30px;
}

.section2,
.section3,
.section4,
.section5,
.section6 {
  padding-top: 100px;
  padding-bottom: 100px;
}

@media (max-width: 736px) {
  .section2,
  .section3,
  .section4,
  .section5,
  .section6 {
    padding-top: 75px;
    padding-bottom: 75px;
  }
}