body,
html {
  overflow-x: hidden;
}

.hero-header-container {
  display: flex;
  flex-direction: column-reverse;
}

.hero-img-container {
  position: relative;
  margin: auto;
  height: fit-content;
  width: fit-content;
}

#tomasz-img {
  width: 350px;
}

.about-me-text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vw;
}

.about-me-text p {
  font-family: "Lora", serif;
  font-size: 2em;
}

.about-me-icon-insta,
.about-me-icon-fb {
  position: absolute;
  background-color: var(--green);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease;
}

.about-me-icon-insta {
  bottom: 30px;
  right: 60px;
  width: 60px;
  height: 60px;
}

.about-me-icon-fb {
  left: 70px;
  bottom: 15px;
  width: 50px;
  height: 50px;
}

.about-me-icon-fb a,
.about-me-icon-insta a {
  padding: 15px;
  border-radius: 50%;
}

.about-me-icon-fb img {
  width: 30px;
  height: 30px;
  transition: all 0.3s ease;
}

.about-me-icon-insta img {
  width: 40px;
  height: 40px;
  transition: all 0.3s ease;
}

.about-me-icon-insta:hover,
.about-me-icon-fb:hover {
  background-color: #cae80d;
}

.about-me-icon-insta:hover img {
  width: 44px;
  height: 44px;
}

.about-me-icon-fb:hover img {
  width: 34px;
  height: 34px;
}

/* 
  main
*/
.story-paragraph {
  margin-top: 100px;
  min-height: 40vh;
  padding: 5vw;
}

.paragraph-text-emphasize {
  /* border-bottom: 3px solid var(--green); */
  width: fit-content;
}

.paragraph-title {
  margin-bottom: 40px;
}

.paragraph-title h2 {
  position: relative;
  font-size: 2em;
  margin-left: 30px;
}

.paragraph-title h2::after {
  content: "";
  background-color: var(--green);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  position: absolute;
  top: -20px;
  left: -30px;
  z-index: -1;
}

.footer-header h2 {
  font-size: 2em;
  text-align: left;
}

@media screen and (min-width: 700px) {
  .footer-header h2 {
    text-align: justify;
  }
}

/* RWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWD */
/* RWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWD */
/* RWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWD */
/* RWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWDRWD */

@media screen and (min-width: 450px) {
  #tomasz-img {
    width: 450px;
  }

  .about-me-icon-insta {
    bottom: 40px;
    right: 70px;
  }

  .about-me-icon-fb {
    left: 90px;
    bottom: 20px;
  }
}

@media screen and (min-width: 768px) {
  #tomasz-img {
    width: 600px;
  }

  .about-me-icon-insta {
    bottom: 50px;
    right: 90px;
    width: 90px;
    height: 90px;
  }

  .about-me-icon-fb {
    left: 160px;
    bottom: 25px;
    width: 50px;
    height: 50px;
  }

  .about-me-icon-fb img {
    width: 30px;
    height: 30px;
  }

  .about-me-icon-insta img {
    width: 60px;
    height: 60px;
  }

  .about-me-icon-insta:hover img {
    width: 64px;
    height: 64px;
  }

  .about-me-icon-fb:hover img {
    width: 34px;
    height: 34px;
  }

  .paragraph-text {
    max-width: 60vw;
    font-size: 120%;
  }

  .paragraph-title h2 {
    font-size: 2.4em;
  }

  .footer-header h2 {
    padding-top: 100px;
    font-size: 2.4em;
  }
}

@media screen and (min-width: 992px) {
  .hero-header-container {
    margin-top: 25vh;
    display: flex;
    flex-direction: row;
  }

  .story-paragraph {
    margin-left: 60px;
    margin-top: 0;
  }

  .paragraph-text {
    max-width: 50vw;
  }

  .footer-header h2 {
    font-size: 2.6em;
  }
}