@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Rubik&display=swap");
.mod {
  background-color: #0e2431;
  border-radius: .5rem;
  z-index: 100; }

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

html {
  scroll-behavior: smooth; }
  html body {
    margin: 3rem 0 0 0;
    font-family: "Poppins", sans-serif;
    font-size: 0.938rem;
    color: #0e2431; }
    @media screen and (min-width: 786px) {
      html body {
        margin: 0; } }
    html body h1, html body h2, html body p {
      margin: 0; }
    html body ul {
      margin: 0;
      padding: 0;
      list-style: none; }
    html body a {
      text-decoration: none; }
    html body img {
      max-width: 100%;
      height: auto;
      display: block; }

.section {
  padding-top: 3rem;
  padding-bottom: 2rem; }
  @media screen and (min-width: 786px) {
    .section {
      padding-top: 4rem;
      padding-bottom: 3rem; } }
  .section-title {
    position: relative;
    font-size: 1.25rem;
    color: #4070f4;
    margin-top: 1rem;
    margin-bottom: 2rem;
    text-align: center; }
    @media screen and (min-width: 786px) {
      .section-title {
        margin-bottom: 3rem; } }
    .section-title::after {
      position: absolute;
      content: "";
      width: 64px;
      height: 0.18rem;
      left: 0;
      right: 0;
      margin: auto;
      top: 2rem;
      background-color: #4070f4; }
      @media screen and (min-width: 786px) {
        .section-title::after {
          width: 80px;
          top: 3rem; } }

.bd-grid {
  max-width: 1024px;
  display: grid;
  grid-template-columns: 100%;
  grid-column-gap: 2rem;
  width: calc(100%)-2rem;
  margin-left: 1rem;
  margin-right: 1rem; }
  @media screen and (min-width: 1024px) {
    .bd-grid {
      margin-left: auto;
      margin-right: auto; } }

.l-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(146, 161, 176, 0.15); }

.nav {
  height: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600; }
  @media screen and (min-width: 786px) {
    .nav {
      height: calc($--header-height  + 1rem); }
      .nav__list {
        display: flex;
        padding-top: 0; } }
  .nav__item {
    margin-bottom: 2rem; }
    @media screen and (min-width: 786px) {
      .nav__item {
        margin-left: 3rem;
        margin-bottom: 0; } }
  .nav__link {
    position: relative;
    color: #fff; }
    @media screen and (min-width: 786px) {
      .nav__link {
        color: #0e2431; } }
    .nav__link:hover {
      position: relative; }
      .nav__link:hover::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 0.18rem;
        left: 0;
        top: 2rem;
        background-color: #4070f4; }
  .nav__logo {
    color: #0e2431; }
  .nav__toggle {
    color: #0e2431;
    font-size: 1.5rem;
    cursor: pointer; }
    @media screen and (min-width: 786px) {
      .nav__toggle {
        display: none; } }
  @media screen and (max-width: 768px) {
    .nav__menu {
      position: fixed;
      top: 3rem;
      right: -100%;
      width: 80%;
      height: 100%;
      padding: 2rem;
      background-color: #0e2431;
      transition: .5s; } }
  .nav .active::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0.18rem;
    left: 0;
    top: 2rem;
    background-color: #4070f4; }
  .nav .show {
    right: 0; }

.home {
  height: calc(100vh - 3rem);
  row-gap: 1rem; }
  @media screen and (min-width: 786px) {
    .home {
      height: 100vh; } }
  .home__data {
    align-self: center; }
    @media screen and (min-width: 786px) {
      .home__data {
        align-self: flex-end; } }
  .home__title {
    font-size: 2rem;
    margin-bottom: 2.5rem; }
    .home__title-color {
      color: #4070f4; }
  .home__social {
    display: flex;
    flex-direction: column; }
    @media screen and (min-width: 786px) {
      .home__social {
        padding-top: 0;
        padding-bottom: 2.5rem;
        flex-direction: row;
        align-self: flex-end; } }
    .home__social-icon {
      width: max-content;
      margin-bottom: 1rem;
      font-size: 1.5rem;
      color: #4070f4; }
      .home__social-icon:hover {
        color: #4070f4; }
      @media screen and (min-width: 786px) {
        .home__social-icon {
          margin-bottom: 0;
          margin-right: 2rem; } }
  .home__img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 275px; }
    @media screen and (min-width: 786px) {
      .home__img {
        width: 457px;
        bottom: 15%; } }
    @media screen and (min-width: 1024px) {
      .home__img {
        right: 10%; } }

.button {
  cursor: pointer;
  display: inline-block;
  background-color: #4070f4;
  color: #fff;
  padding: .75rem 2.5rem;
  font-weight: 600;
  border-radius: .5rem; }
  .button:hover {
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.15); }

.about__container {
  row-gap: 2rem;
  text-align: center; }
  @media screen and (min-width: 786px) {
    .about__container {
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      text-align: initial; } }

.about__subtitle {
  margin-bottom: 1rem; }

.about__img {
  justify-self: center; }
  .about__img img {
    width: 200px;
    border-radius: .5rem; }
    @media screen and (min-width: 786px) {
      .about__img img {
        width: 300px; } }

.skills__container {
  row-gap: 2rem;
  text-align: center; }
  @media screen and (min-width: 786px) {
    .skills__container {
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      text-align: initial; } }

.skills__subtitle {
  margin-bottom: 1rem; }

.skills__text {
  margin-bottom: 2rem; }

.skills__data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-weight: 600;
  padding: .5rem 1rem;
  margin-bottom: 2rem;
  border-radius: .5rem;
  box-shadow: 0 4px 25px rgba(14, 36, 49, 0.15); }

.skills__icon {
  font-size: 2rem;
  margin-right: 1rem;
  color: #4070f4; }

.skills__names {
  display: flex;
  align-items: center; }

.skills__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #4070f4;
  height: .25rem;
  border-radius: .5rem;
  z-index: -10; }

.skills__html {
  width: 95%; }

.skills__css {
  width: 85%; }

.skills__js {
  width: 80%; }

.skills__git {
  width: 80%; }

.skills__py {
  width: 80%; }

.skills__sql {
  width: 80%; }

.skills__img {
  border-radius: .5rem; }

.work {
  text-align: center; }
  .work__container {
    row-gap: 2rem; }
    @media screen and (min-width: 786px) {
      .work__container {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        column-gap: 2rem; } }
  .work__img {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 25px rgba(14, 35, 49, 0.15);
    border-radius: .5rem;
    overflow: hidden; }
    .work__img img {
      transition: 1s;
      cursor: pointer; }
      .work__img img:hover {
        transform: scale(1.1); }
    .work__img-btn {
      margin: 5px 0; }

.contact__input {
  width: 100%;
  font-size: 0.938rem;
  font-weight: 600;
  padding: 1rem;
  border-radius: .5rem;
  border: 2px solid #0e2431;
  outline: none;
  margin-bottom: 2rem;
  box-sizing: border-box; }

.contact__button {
  display: block;
  border: none;
  outline: none;
  font-size: 0.938rem;
  cursor: pointer;
  margin-left: auto; }
  @media screen and (min-width: 786px) {
    .contact__button {
      margin-left: 0; } }

@media screen and (min-width: 786px) {
  .contact__form {
    width: 360px; }
  .contact__container {
    justify-items: center; } }

.footer {
  background-color: #0e2431;
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding: 2rem 0; }
  .footer__title {
    font-size: 2rem;
    margin-bottom: 2rem; }
  .footer__social {
    margin-bottom: 2rem; }
  .footer__icon {
    font-size: 1.5rem;
    color: #fff;
    margin: 0 1rem; }

.preloader {
  background: #0e2431 url("../../img/loading.gif") center;
  background-size: 20%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 101;
  transition: .5s; }
  .preloader-btn {
    cursor: pointer;
    z-index: 102;
    box-shadow: 0 5px 36px rgba(0, 0, 0, 0.15); }