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

:root {
      --text-color: #212121;
      --green: #09A494;
      --warn_orange: #d56d00;
      --bg-color: #FFFFFF;
}

.dark-theme {
      --text-color: #CCCCCC;
      --bg-color: #031923;
}

body {
      font-family: "Open Sans", "Arial", sans-serif;
      font-weight: 400;
      font-size: 20px;
      line-height: 150%;
      letter-spacing: 0%;

      color: var(--text-color);
      background-color: var(--bg-color);
}

h1 {
      font-family: "Open Sans", "Arial", sans-serif;
      font-weight: 700;
      font-size: 60px;
      line-height: 110%;
      letter-spacing: 0%;
      margin: 0;
      margin-bottom: 20px;
}

h2 {
      font-family: "Open Sans", "Arial", sans-serif;
      font-weight: 700;
      font-size: 30px;
      line-height: 120%;
      letter-spacing: 0%;

      margin: 0px;
      margin-bottom: 40px;
}

button {
      padding: 0;
      border: none;
      color: inherit;
      cursor: pointer;
      background-color: transparent;
      text-transform: lowercase;

      border-width: 1px;

      padding-top: 6px;
      padding-bottom: 10px;

      padding-right: 10px;
      padding-left: 10px;

      gap: 10px;


      gap: 10px;

}

.button-common {
      border-radius: 8px;
      border-style: solid;
      border-color: var(--green);

      color: var(--green);
      background-color: var(--bg-color);
}

.button-common:hover {
      color: var(--bg-color);
      background-color: var(--green);
}

.skills-error-wrapper .button-common {
      color: var(--warn_orange);
      border-color: var(--warn_orange);
}

.skills-error-wrapper .button-common:hover {
      color: var(--bg-color);
      background-color: var(--warn_orange);
}

.skills-error-wrapper .text-wrapper {
      margin-bottom: 10px;
}

button,
a {
      font-family: "Open Sans", "Arial", sans-serif;
      font-weight: 400;
      font-size: 20px;
      line-height: 100%;
      letter-spacing: 0%;

}

footer {
      font-family: "Open Sans", "Arial", sans-serif;
      font-weight: 400;
      font-size: 20px;
      line-height: 150%;
      letter-spacing: 0%;

      color: var(--bg-color);
      background-color: var(--text-color);
}

.dark-theme footer{
      background-color: var(--green);
}

.main-photo {
      border-radius: 50%;
}

.subtitle {
      font-weight: 400;
      font-size: 38px;
      line-height: 120%;
      letter-spacing: 0%;

      color: var(--green);
      margin: 0px;
}

.container {
      min-width: 320px;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 20px;
}

.main-nav a {
      text-decoration: none;

      gap: 10px;
      padding-top: 10px;
      padding-right: 15px;
      padding-bottom: 10px;
      padding-left: 15px;

      color: var(--text-color);

}

.main-nav a:hover {
      color: var(--green);

}

.skill-list {
      margin: 0px;
      padding: 0px;
      line-height: 100%;
}

.skill-list dt {
      padding: 5px 0 9px 38px;
      background-position: left;
      background-repeat: no-repeat;
      background-size: 30px;
}

.skill-level {
      margin: 4px 0 20px;
      padding: 2px;
      font-size: 0;
      border: 1px solid var(--green);
      border-radius: 16px;
}

.skill-level div {
      height: 14px;
      background-color: var(--green);
      border-radius: 8px;
}

.skill-item {
      text-transform: capitalize;
}
.skills-error-wrapper {

      padding: 10px;
      border-radius: 8px;
      border-style: solid;
      border-color: var(--warn_orange);
      color: var(--warn_orange);
}

.social-list {
      display: flex;
      margin: 0px;
      padding: 0px;
      gap: 20px;
      list-style-type: none;
}

.social-list-link {
      display: block;

      width: 50px;
      height: 50px;
      gap: 10px;

      border-radius: 50%;
      border-width: 1px;
      border-color: var(--green);
      background-color: var(--bg-color);
}

.dark-theme .social-list-link {
      background-color: #9b9b9b;
}

.social-list-link:hover {
      background-color: var(--green);
}

.social-list-link_github {
      background-image: url(../img/contacts-list.svg);
}

.social-list-link_telegram {
      background-image: url(../img/contacts-list.svg);
      background-position-x: 75%;
}

.social-list-link_vk {
      background-image: url(../img/contacts-list.svg);
      background-position-x: 100%;
}

.contact-list {
      display: flex;

      margin: 0px;
      margin-bottom: 40px;

      padding: 0px;
      list-style-type: none;

      gap: 40px;

}

.contact-list-link {
      display: block;
      text-decoration: none;
      color: var(--text-color);

      align-content: center;
      height: 30px;

      padding: 0px;
      padding-left: 42px;

}

.contact-list-link_mail {
      background-image: url(../img/ContactsIcon-1.svg);
      background-repeat: no-repeat;
}

.dark-theme .contact-list-link_mail {
      background-image: url(../img/dark_theme/dark_email.svg);
}

.contact-list-link_phone {
      background-image: url(../img/ContactsIcon.svg);
      background-repeat: no-repeat;
}

.dark-theme .contact-list-link_phone {
      background-image: url(../img/dark_theme/dark_phone.svg);
}

.contact-list-link:hover {
      color: var(--green);
}

.visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      border: 0;
      padding: 0;
      white-space: nowrap;
      clip-path: inset(100%);
      clip: rect(0 0 0 0);
      overflow: hidden;
}

.main-header {
      display: flex;
      padding-top: 60px;
      margin-bottom: 120px;
      gap: 40px;
      align-items: center;
}

.main-nav{
      display: flex;
}

.section-intro {
      display: flex;
      align-items: center;
      gap: 70px;

      justify-content: space-between;
}

.text-wrapper {
      max-width: 800px;
}

p {
      margin: 0;
      margin-bottom: 15px;
}

p:last-child {
      margin-bottom: 0;
}

.container-skills-header {
      display: flex;
      flex-wrap: wrap;
      row-gap: 20px;
      align-items: center;
      justify-content: space-between;

      margin: 0px;
      margin-bottom: 40px
}

.container-skills-header *{
      margin: 0px;
}

.container-skills-header-btns {
      display: flex;
      gap: 20px;
      align-items: center;
}

.main-footer {
      padding-top: 50px;
      padding-bottom: 50px;
}

main section{
      margin: 0px;
      margin-bottom: 120px;
}

.main-logo {
      width: 60px;
}

.nav-btn {
      display: none;
}

.social-list,
.contact-list {
      flex-wrap: wrap;
      row-gap: 15px;
}

.main-header-wrap {
      display: flex;
}

@media screen and (max-width: 1024px) {

      h1 {
            font-size: 50px;
      }

      h2 {
            font-size: 24px;
      }

      body,
      button,
      footer,
      a {
            font-size: 16px;
      }

      .subtitle {
            font-size: 28px;
      }

      .main-photo {
            width: 250px;
      }

      main section {
            margin: 0px;
            margin-bottom: 80px;
      }

      .main-header {
            margin-bottom: 80px;
      }
}

@media screen and (max-width: 650px) {

      h1 {
            font-size: 32px;
      }

      h2 {
            font-size: 20px;
            margin-bottom: 30px;
      }

      body,
      button,
      footer,
      a {
            font-size: 14px;
      }

      .subtitle {
            font-size: 20px;
      }

      .main-header {
            padding-top: 20px;
            flex-direction: column;
            gap: 20px;
      }

      .main-logo {
            width: 40px;
      }

      .main-nav {
            flex-direction: column;
            text-align: center
      }

      .main-nav a {
            padding: 20px 30px;
      }

      .nav-btn {
            display: block;
            width: 30px;
            height: 30px;
            padding: 0px;
            background-repeat: no-repeat;
      }

      .nav-btn_close {
            background-image: url("../img/close.svg")
      }

      .nav-btn_open {
            background-image: url("../img/burger.svg")
      }

      .main-header-wrap {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
      }

      .main-photo {
            width: 150px;
      }

      .section-intro {
            flex-direction: column-reverse;
            gap: 30px;
      }

      .section-intro-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            text-align: center;
      }

      .section-intro-container * {
            margin: 0px;
      }

      .container-skills-header {
            margin-bottom: 30px;
      }

      .contact-list {
            margin-bottom: 20px;
      }

      .main-footer {
            padding-top: 30px;
            padding-bottom: 30px;
      }

      main section {
            margin: 0px;
            margin-bottom: 50px;
      }

      .main-header {
            margin-bottom: 50px;
      }

      .skill-list dt {
            padding: 5px 0 11px 38px;
      }

      .social-list {
            gap: 15px;
      }

      .main-nav_closed {
            display: none;
      }
}

@media screen and (max-width: 390px) {

      .container-skills-header {
            flex-direction: column;
            gap: 20px;
      }

      .container-skills-header-btns {

            flex-direction: column;
            gap: 10px;
      }

      .container-skills-header * {
            margin: 0px;
            width: 100%;
      }
}

@media screen and (max-width: 360px) {

      .container-skills-header {
            flex-direction: column;
            gap: 20px;
      }

      .container-skills-header-btns {

            flex-direction: column;
            gap: 10px;
      }

      .container-skills-header * {
            margin: 0px;
            width: 100%;
      }

      .contact-list {
            flex-direction: column;
            gap: 15px;
      }

      button {
            padding: 5px;
      }

}