@import url(fonts.css);
@import url(constants.css);
@import url(default.css);
@import url(header.css);
@import url(footer.css);

.about {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  column-gap: 80px;
  margin-top: 50px;
}

.about__header {
  color: var(--font-color--general);
}

.about__information {
  display: flex;
  flex-direction: column;
  row-gap: 35px;
  justify-content: center;
}

.about__description {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}

.description__link {
  display: inline-block;
}

.description__link-text {
  display: flex;
  align-items: center;
  width: fit-content;
  color: var(--font-color--link);
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.01em;
  padding: 5px;
  border-radius: 5px;
  position: relative;
}

.link-to-blog-page {
  display: flex;
  align-items: center;
  width: fit-content;
  color: var(--font-color--link);
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.01em;
  padding: 11px 30px;
  border: 1px solid var(--background-color--submit-button);
  border-radius: 5px;
  position: relative;
  transition: all 0.5s ease-in-out;
}

.description__arrow {
  width: 8.5px;
  height: 16px;
  position: relative;
  display: inline-block;
  overflow: visible;
}

.description__arrow::after {
  position: absolute;
  content: "";
  width: 200%;
  height: 200%;
  background-image: url(../assets/svgs/about-arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  top: -50%;
}

.information {
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.01em;
  color: var(--font-color--addtional);
}

.about__information {
  padding-left: 5px;
}

.about__image {
  height: clamp(300px, 93vh, 647px);
  width: clamp(350px, 34%, 479px);
  min-width: 350px;
  border-radius: 0px 0px 42% 42%;
  display: inline-block;
  background-image: url(../assets/about-foto.png);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.about__image::after {
  content: "";
  position: absolute;
  width: 216px;
  height: 213px;
  background-color: transparent;
  background-image: url(../assets/something.png);
  left: -86px;
  top: calc(50% - 107px);
}

.last-articles {
  display: flex;
  flex-direction: column;
  row-gap: 35px;
  align-items: center;
}

.last-articles__date {
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.01em;
}

.last-articles__content {
  display: flex;
  flex-direction: column;
  row-gap: 60px;
}

.my-career__article {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  padding-bottom: 5px;
  margin-top: 5px;
}

.my-career__article:first-child {
  margin-top: 0px;
}

.my-career__article::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--underline-color);
  bottom: 0px;
}

.article {
  display: flex;
  flex-direction: row;
  column-gap: 20px;
  border-radius: 20px;
}

.article__text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  row-gap: 16px;
  padding: 40px 0px 0px 40px;
}

.article__image-container {
  display: flex;
  justify-content: center;
  width: 155%;
  padding-right: 5px;
}

.image-container__image {
  width: 100%;
  border-radius: 5px;
}

.frontend-article {
  background-color: var(--background-color--frontend);
}

.tennis-article {
  background-color: var(--background-color--tennis);
}

.my-career {
  grid-area: aside;
  padding: 5px;
}

.hobby {
  grid-area: hobby;
}

.last-articles {
  grid-area: articles;
}

.my-works {
  grid-area: my-works;
}

.main__information {
  display: grid;
  grid-template-columns: 340px repeat(4, 1fr);
  grid-template-areas:
    "aside hobby hobby hobby hobby"
    "articles articles articles articles articles"
    "my-works my-works my-works my-works my-works";
}

.hobby__my-foto {
  grid-area: my-foto;
}

.hobby__main-hobby {
  grid-area: main-hobby;
}

.hobby__side-up {
  grid-area: side-up;
}

.hobby__side-down {
  grid-area: side-down;
}

.hobby__content {
  grid-template-columns: repeat(4, 1fr);
  height: 472px;
  display: grid;
  grid-template-areas:
    "my-foto main-hobby side-up side-up"
    "my-foto main-hobby side-down side-down";
  gap: 1.3vw;
}

.hobby__foto {
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.my-foto__signature {
  box-sizing: border-box;
  display: block;
  background-color: transparent;
  transition: all 0.5s ease-in-out;
  padding: 16px 15px 0px;
}

.my-hobby-header {
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  letter-spacing: -0.02em;
  color: transparent;
  transition: all 0.5s ease-in-out;
}

.my-hobby__item {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.02em;
  color: transparent;
  transition: all 0.5s ease-in-out;
}

.my-foto__foto {
  background-image: url(../assets/hobby-foto.jpg);
}

.main-hobby__foto {
  background-image: url(../assets/sport.png);
}

.side-up__foto {
  background-image: url(../assets/rock.jpg);
  background-position: center;
}

.side-down__foto {
  background-image: url(../assets/language.png);
  background-position: center;
}

.foto-container {
  padding: 5px 5px 0px 5px;
}

.hobby__foto {
  border-radius: 5px;
}

.my-works__expamles {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.my-works__project {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 10px;
}

.project__title > a {
  color: var(--font-color--general);
  transition: all 0.5s ease-in-out;
}

.project__time {
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.01em;
}

.project__description {
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.01em;
  color: var(--font-color--addtional);
}

.project__information {
  width: clamp(300px, 30vw, 600px);
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  padding-bottom: 5px;
}

.project__information::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--underline-color);
  bottom: 0px;
}

.project__image {
  width: 70px;
  height: 70px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.cozy-house-image {
  background-image: url(../assets/Cozy-house.png);
}

.chirstmas-shop-image {
  background-image: url(../assets/christmas-shop.png);
}

.pair-em-up-image {
  background-image: url(../assets/pair-em-up.png);
}

.my-works__content {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  column-gap: 30px;
}

.main__information,
.last-articles,
.my-works {
  margin-top: 30px;
}

@media (max-width: 1200px) {
  .article__text {
    padding: 30px 30px 10px 30px;
  }
  .main__information {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "aside"
      "hobby"
      "articles"
      "my-works";
  }
  .hobby__foto {
    background-position: center;
  }
}

@media (max-width: 1000px) {
  .wrapper {
    padding: 0px 5px;
  }
  .article {
    width: 90%;
    margin: auto;
    flex-direction: column-reverse;
    row-gap: 20px;
  }
  .article__text {
    padding: 10px;
  }
  .article__image-container {
    width: 100%;
  }
}

@media (max-width: 800px) {
  .about__image {
    display: none;
  }
  .my-works__content {
    flex-direction: column;
    row-gap: 30px;
    padding: 0px 5px;
  }
  .project__information {
    width: clamp(280px, 30vw, 600px);
  }
  p {
    text-align: center;
  }
}

@media (max-width: 646px) {
  h2 {
    text-align: center;
  }
}

@media (max-width: 468px) {
  .contacts__content {
    flex-direction: column;
    align-items: center;
  }
  .contacts__form {
    align-items: center;
  }
}

@media (hover: hover) {
  .link-to-blog-page:hover {
    color: var(--background-color--submit-button--pale);
    background-color: var(--font-color--link);
  }

  .description__link-text:hover {
    background-color: var(--background-color--pale-first);
    transition: all 0.5s ease-in-out;
  }

  .hobby__my-foto:hover {
    .my-foto__signature {
      background-color: var(--background-color--hobby-signature);
      opacity: 0.75;
    }
    .my-hobby__item,
    .my-hobby-header {
      color: var(--font-color--hobby-card-color);
    }
  }

  .cozy-house:hover > a {
    color: rgb(0, 255, 213);
  }

  .christmas-shop:hover > a {
    color: rgb(255, 80, 197);
  }

  .pair-em-up:hover > a {
    color: #bd5727;
  }
}

@media (hover: none) {
  .link-to-blog-page:active {
    color: var(--background-color--submit-button--pale);
    background-color: var(--font-color--link);
  }

  .description__link-text:active {
    background-color: var(--background-color--pale-first);
    transition: all 0.5s ease-in-out;
  }

  .hobby__my-foto:active {
    .my-foto__signature {
      background-color: var(--background-color--hobby-signature);
      opacity: 0.75;
    }
    .my-hobby__item,
    .my-hobby-header {
      color: var(--font-color--hobby-card-color);
    }
  }

  .cozy-house:active > a {
    color: rgb(0, 255, 213);
  }

  .christmas-shop:active > a {
    color: rgb(255, 80, 197);
  }

  .pair-em-up:active > a {
    color: #bd5727;
  }
}