@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Gloria+Hallelujah&family=Poppins:wght@200;400&family=Roboto:wght@100;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Gloria+Hallelujah&family=Poppins:ital,wght@0,200;0,400;1,400&family=Roboto:wght@100;300;400;500;700&display=swap');

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: 'Poppins', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

.container {
  padding: 0;
  background-image: linear-gradient(45deg,
      hsl(0deg 0% 0%) 24%,
      hsl(344deg 0% 12%) 52%,
      hsl(344deg 0% 21%) 64%,
      hsl(344deg 0% 31%) 73%,
      hsl(344deg 0% 41%) 80%,
      hsl(344deg 0% 52%) 85%,
      hsl(344deg 0% 64%) 90%,
      hsl(344deg 0% 75%) 94%,
      hsl(344deg 0% 88%) 97%,
      hsl(0deg 0% 100%) 100%);
  box-shadow: 10px 10px 40px -1px rgba(0 0 0 / 33%);
}

.navbar-brand {
  display: none;
}

.my__foto img {
  width: 300px;
  height: 350px;

}


.foto__name {
  display: flex;
  margin-top: 40px;
}


.name {
  width: 100%;
  text-align: center;
  align-self: center;
  font-family: 'Audiowide', cursive;
  background-color: yellow;
}

.two_columns {
  display: grid;
  grid-template-columns: 30% 60%;
}

.about__myself {
  margin: 0 auto;
  width: 300px;
  text-align: center;
  background-color: yellow;

}

.about__myself h2 {
  font-family: 'Audiowide', cursive;
}

.create__line {
  width: 750px;
  margin-top: 5px;
  margin-left: auto;
  border-bottom: 3px solid white;
}

.text__about-me {
  width: 500px;
  padding: 10px;
  margin: 0 auto;
}

.text__about-me p {
  font-size: 20px;
  color: white;
}

.left-column {
  margin-top: 20px;
}

.contact__title {
  background-color: yellow;
}

.contact__title h2 {
  font-size: 24px;
  text-align: center;
  font-family: 'Audiowide', cursive;
}

.contact__block {
  width: 350px;
  background-color: gray;
}

.info__list {
  list-style: none;
}

.info__list li {
  display: flex;
  gap: 10px;
  font-size: 18px;
}

.info__list a {
  text-decoration: none;
  color: black;
}

.info__list a:hover {
  color: white;
}

.skills__block {
  width: 350px;
  background-color: gray;
}

.skills__title {
  background-color: yellow;
}

.skills__title h2 {
  font-size: 24px;
  text-align: center;
  font-family: 'Audiowide', cursive;
}

.skills__list {
  list-style: none;
  padding-right: 2em;
}

.skills__list li {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

.img__p {
  display: flex;
  gap: 10px;
  font-weight: 600;
}

.other-skills__list {
  list-style: none;
  font-weight: 600;
}

.other-skills__list li {
  display: flex;
  gap: 10px;
}

.other-title {
  margin-left: 5px;
}


.education__title {
  margin: 0 auto;
  width: 300px;
  text-align: center;
  background-color: yellow;
}

.education__title h2 {
  font-family: 'Audiowide', cursive;
}

.serf {
  margin: 0 auto;
  text-align: end;
  padding: 10px;
  width: 600px;
  height: 420px;
}

.serf img {
  width: 100%;
  height: 100%;
}

.code__section {
  margin-top: 40px;
}

.code__title {
  margin: 0 auto;
  width: 300px;
  text-align: center;
  background-color: yellow;
}

.code__title h2 {
  font-family: 'Audiowide', cursive;
}

.kata__title {
  color: white;
}

.code__block {
  margin: 0 auto;
  padding: 10px;
  width: 600px;
}

.lang__list {
  list-style: none;
  padding: 0 7px;
}

.lang__list li {
  font-family: "Trebuchet MS", "Lucida Sans";
  padding: 7px 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-left: 10px solid #f05d22;
  box-shadow: 2px -2px 5px 0 rgba(0, 0, 0, 0.1),
    -2px -2px 5px 0 rgba(0, 0, 0, 0.1), 2px 2px 5px 0 rgba(0, 0, 0, 0.1);
  font-size: 20px;
  letter-spacing: 2px;
  transition: 0.3s all linear;
  -webkit-transition: 0.3s all linear;
  -moz-transition: 0.3s all linear;
  -ms-transition: 0.3s all linear;
  -o-transition: 0.3s all linear;
}

.lang__list li:nth-child(2) {
  border-color: #1ccfc9;
}

.lang__list li:nth-child(3) {
  border-color: #8bc63e;
}

.lang__title {
  background-color: yellow;
}

.lang__title h2 {
  font-size: 24px;
  text-align: center;
  font-family: 'Audiowide', cursive;
}

.lang__block {
  width: 350px;
  font-weight: 600;
  font-size: 18px;
  padding-bottom: 7px;
  background-color: gray;
}

.project__section {
  margin-bottom: 20px;
}

.project__title {
  margin: 0 auto;
  width: 300px;
  text-align: center;
  background-color: yellow;
}

.project__title h2 {
  font-family: 'Audiowide', cursive;
}

.project__block {
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 20px;

}

.project__block img {
  width: 100%;
  height: 200px;
}

.hover-image-scale {
  display: inline-block;
  overflow: hidden;
  /* Скрываем всё за контуром */
  width: 360px;
  height: 200px;
}

.hover-image-scale img {
  transition: 1s;
  /* Время эффекта */
  display: block;
}

.hover-image-scale img:hover {
  transform: scale(1.2);
  /* Увеличиваем масштаб */
}

.self-study__section {
  margin-top: 20px;
}

.self-study__block {
  width: 350px;
  font-weight: 600;
  font-size: 18px;
  padding-bottom: 7px;
  background-color: gray;
}

.self-study__title {
  background-color: yellow;
}

.self-study__title h2 {
  font-size: 24px;
  text-align: center;
  font-family: 'Audiowide', cursive;
}

.self-study__list {
  list-style: none;
  padding: 0 7px;
}

.self-study__list li {
  font-family: "Trebuchet MS", "Lucida Sans";
  padding: 7px 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-left: 10px solid #f05d22;
  box-shadow: 2px -2px 5px 0 rgba(0, 0, 0, 0.1),
    -2px -2px 5px 0 rgba(0, 0, 0, 0.1), 2px 2px 5px 0 rgba(0, 0, 0, 0.1);
  font-size: 20px;
  letter-spacing: 2px;
  transition: 0.3s all linear;
  -webkit-transition: 0.3s all linear;
  -moz-transition: 0.3s all linear;
  -ms-transition: 0.3s all linear;
  -o-transition: 0.3s all linear;
}

.self-study__list li:nth-child(2) {
  border-color: #fcba30;
}

.self-study__list li:nth-child(3) {
  border-color: #493224;
}

.self-study__list a {
  text-decoration: none;
  color: black;
}

.self-study__list a:hover {
  color: white;
}

.footer {
  background-color: #212529;
  display: flex;
  justify-content: space-around;
}

.git__block {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.git__block a {
  color: white;
  font-weight: 600;
}

.git__block a:hover {
  color: grey;
}

.git__block img {
  width: 50px;
  height: 50px;
}

.rsschool img {
  width: 100px;
  height: 50px;
}

.data {
  color: white;
  align-self: center;
  font-weight: 600;
}



@media (max-width: 1299px) {
  .create__line {
    width: 500px;
  }
}

@media (max-width: 991px) {
  .two_columns {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .left-column {
    display: grid;
    justify-items: center;
  }
}

@media (max-width: 991px) {
  .serf {
    width: 500px;
    height: 320px;
  }


  .code__block {
    width: 500px;
  }

  .my__foto img {
    width: 250px;
    height: 300px;
  }

  .navbar-brand {
    display: block;
  }
}

@media (max-width: 515px) {
  .my__foto img {
    width: 200px;
    height: 250px;
  }

  .name h1,
  h3 {
    font-size: 24px;
  }

  .serf {
    width: 350px;
    height: 250px;
  }

  .code__block {
    width: 350px;
  }

  .text__about-me {
    width: 350px;
  }

  .text__about-me p {
    font-size: 18px;
  }

  .create__line {
    width: 350px;
  }
}