:root {
  --link-border-color: rgba(0, 102, 204, 0.25);
  --link-border-color-active: rgba(208, 64, 0, 0.25);
}

.header-nav {
  display: flex;
  align-items: stretch;
  font-family: 'Montserrat', sans-serif;
}

.header-nav__photo-link {
  flex: none;
  align-self: flex-start;
  text-decoration: none;
  border-bottom: 0;
}

.header-nav__photo {
  display: block;
  border-radius: 50%;
  margin-right: 12px;
}

.header-nav__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 3px -12px;
  padding: 0;

  line-height: 1.2;
  list-style: none;
}

.header-nav__item {
  margin: 3px 12px;
}

.header-nav__item_current {
  font-weight: bold;
}

.header-nav__item_home .header-nav__link {
  border-bottom: none;
}



@charset "UTF-8";
:root {
  --link-border-color: rgba(0, 102, 204, 0.25);
  --link-border-color-active: rgba(208, 64, 0, 0.25);
}
a {
  color: #06c;
  text-decoration: none;
  border-bottom: 1px solid;
  border-color: var(--link-border-color);

  transition: color 0.25s ease-out, border-bottom-color 0.25s ease-out;
}
a:hover,
a:focus,
a:active {
  color: #d04000;
  border-color: var(--link-border-color-active);
  transition: none;
}
a.link-no-underline {
  border-bottom: none;
}
a.link-no-underline .link-no-underline__underline {
  border-bottom: 1px solid;
  border-color: var(--link-border-color);
}
a.link-no-underline:hover .link-no-underline__underline,
a.link-no-underline:focus .link-no-underline__underline,
a.link-no-underline:active .link-no-underline__underline {
  border-color: var(--link-border-color-active);
}
/* Common styles */
:root {
  --knowledge-item-margin: 24px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Montserrat", "Segoe UI Emoji", sans-serif;
  font-size: 16px;
  line-height: 1.3;
}
abbr {
  font-size: 87.543481275449823753245273897%;
  letter-spacing: 1px;
  text-transform: uppercase;
}
blockquote {
  margin: 16px 0;
  padding-left: 30px;
  border-left: solid 5px #777;
}
blockquote footer {
  margin-top: 6px;
  font-size: 14px;
  color: #777;
}
blockquote footer::before {
  content: "— ";
}
code {
  font-family: "Fira Code", "Consolas", "Courier New", monospace;
  font-size: 90%;
}
.badge {
  padding: 2px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  background: white;

  letter-spacing: 1px;
  font-size: 9px;
  transition: border-color 0.25s ease-out;
  text-transform: uppercase;
  vertical-align: middle;

  display: inline-block;
}
a .badge {
  border: 1px solid var(--link-border-color);
}
.knowledge__section_background .badge {
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.5);
}
a:hover .badge {
  border-color: var(--link-border-color-active);
  transition: none;
}
p {
  margin: 0;
}
p + p {
  margin-top: 16px;
}
.header-level-2 {
  margin: 0 0 12px;
  font-size: 36px;
}
.header-level-inline {
  margin: 0;
  font-size: inherit;
}
.header-level-inline + p {
  margin-top: 0;
}
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 12px;
}
.intro-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 36px;
  margin: 24px 0 0;

  grid-template-areas: "lead lead social";
}
@media (max-width: 767px) {
  .intro-row {
    grid-template-areas:
      "lead lead lead"
      "social social social";
  }
}
@media (max-width: 480px) {
  .intro-row {
    grid-gap: 24px;
  }
}
.lead-text {
  font-size: 30px;
  grid-area: lead;
}
@media (max-width: 480px) {
  .lead-text {
    font-size: 24px;
  }
}
.social-links {
  margin-top: 9px;
  grid-area: social;
}
@media (max-width: 767px) {
  .social-links {
    margin-top: 0;
  }
}
.social-links__items {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;

  list-style: none;
}
@media (max-width: 767px) {
  .social-links__items {
    flex-direction: row;
    flex-wrap: wrap;
    margin: -3px -9px;
  }
}
@media (min-width: 767px) {
  .social-links__item + .social-links__item {
    margin-top: 6px;
  }
}
@media (max-width: 767px) {
  .social-links__item {
    margin: 3px 9px;
  }
}
.header-nav {
  padding: 24px 0;
}
.header-nav-h1 {
  margin: 0;
  font-size: inherit;
}
.header-nav__item_home .header-nav__link .header-nav__name {
  border-bottom: 1px solid var(--link-border-color);
}
.header-nav__item_home .header-nav__link:hover .header-nav__name,
.header-nav__item_home .header-nav__link:focus .header-nav__name,
.header-nav__item_home .header-nav__link:active .header-nav__name {
  border-bottom: 1px solid var(--link-border-color-active);
}
.knowledge,
.projects {
  margin-top: 48px;
}
.knowledge__first-header,
.projects__first-header {
  position: relative;
  line-height: 1;
}
.knowledge__first-header-more {
  font-weight: normal;
}
.knowledge__first-header-more-link:not(:hover):not(:focus):not(:active),
.projects__first-header-more-link:not(:hover):not(:focus):not(:active) {
  color: #000;
  --link-border-color: rgba(0, 0, 0, 0.25);
}
.knowledge__first-header::after,
.projects__first-header::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: 5px;
  z-index: -1;

  width: 100%;
  height: 9px;
  background: #ffdb01;
}
.knowledge__inner {
  columns: 3 224px;
  column-gap: 36px;
}
.knowledge__section {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: var(--knowledge-item-margin);
  display: inline-block;
}
.knowledge__section_background {
  background: #fffae0;
  margin: -12px -9px -18px;
  padding: 12px 9px 18px;
}
.knowledge__section_background:target {
  animation: knowledge__background-highlight 1s ease-in;
}
@keyframes knowledge__background-highlight {
  0% {
    background: #ffdb01;
  }

  30% {
    background: #ffdb01;
  }

  100% {
    background: #fffae0;
  }
}
@supports (-moz-appearance: none) {
  .knowledge__section {
    /* Replacing break-inside: avoid in Firefox ↓ */
    display: inline-block;
  }
}
.knowledge__items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.knowledge__item + .knowledge__item {
  margin-top: 12px;
}
.knowledge__image {
  display: block;
  height: 75px;
  outline: 1px solid #ccc;
}
a:hover .knowledge__image,
a:focus .knowledge__image,
a:active .knowledge__image {
  outline-color: var(--link-border-color-active);
}
.projects__items {
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 36px;
}
@media (max-width: 767px) {
  .projects__items {
    grid-template-columns: 1fr;
    grid-gap: 24px;
  }
}
.projects__item_wide {
  grid-column: span 2;
}
@media (max-width: 767px) {
  /* Remove span 2, or an additional column will be created */
  .projects__item_wide {
    grid-column: auto;
  }
}
.projects__link {
  border-bottom: 0;
}
.projects__link-text {
  border-bottom: 1px solid;
  border-color: var(--link-border-color);
}
.projects__link:hover .projects__link-text,
.projects__link:focus .projects__link-text,
.projects__link:active .projects__link-text {
  border-color: var(--link-border-color-active);
}
.projects__perfperfperf-logo-link {
  border: none;
  display: block;
  width: min-content;
}
.projects__perfperfperf-logo-link:hover,
.projects__perfperfperf-logo-link:focus,
.projects__perfperfperf-logo-link:active {
  outline: 1px solid var(--link-border-color-active);
}
.projects__perfperfperf-logo {
  width: 50px;
  height: 50px;
  display: block;
}
.google .projects__link-text {
  display: inline-flex;
}
.google__blue {
  color: #4885ed;
}
.google__red {
  color: #db3236;
}
.google__yellow {
  color: #f4c20d;
}
.google__green {
  color: #3cba54;
}
.epam {
  color: inherit;
}
.epam::before {
  content: "‹";
  color: #39c2d7;
}
.epam::after {
  content: "›";
  color: #39c2d7;
}
.ilya-birman__image,
.rock-content__image {
  height: 20px;
  vertical-align: top;
  border-radius: 50%;
}
.footer {
  margin-top: 24px;
  padding: 12px 0;
  font-size: 12px;
}