@font-face {
  font-family: sans-serif;
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/**
Нормализация блочной модели
*/
*,
::before,
::after {
box-sizing: border-box;
}

/**
Убираем внутренние отступы слева тегам списков,
у которых есть атрибут class
*/
:where(ul, ol):where([class]) {
padding-left: 0;
}

/**
Убираем внешние отступы body и двум другим тегам,
у которых есть атрибут class
*/
body,
:where(blockquote, figure, fieldset):where([class]) {
margin: 0;
}

/**
Убираем внешние отступы вертикали нужным тегам,
у которых есть атрибут class
*/
:where(
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl
):where([class]) {
margin-block: 0;
}

:where(dd[class]) {
margin-left: 0;
}

:where(fieldset[class]) {
padding: 0;
border: none;
}

/**
Убираем стандартный маркер маркированному списку,
у которого есть атрибут class
*/
:where(ul[class]) {
list-style: none;
}

:where(address[class]) {
font-style: normal;
}

/**
Обнуляем вертикальные внешние отступы параграфа,
объявляем локальную переменную для внешнего отступа вниз,
чтобы избежать взаимодействие с более сложным селектором
*/
p {
--paragraphMarginBottom: 24px;

margin-block: 0;
}

/**
Внешний отступ вниз для параграфа без атрибута class,
который расположен не последним среди своих соседних элементов
*/
p:where(:not([class]):not(:last-child)) {
margin-bottom: var(--paragraphMarginBottom);
}


/**
Упрощаем работу с изображениями и видео
*/
img,
video {
display: block;
max-width: 100%;
}

/**
Наследуем свойства шрифт для полей ввода
*/
input,
textarea,
select,
button {
font: inherit;
}

html {
/**
  Пригодится в большинстве ситуаций
  (когда, например, нужно будет "прижать" футер к низу сайта)
  */
height: 100%;
/**
  Убираем скачок интерфейса по горизонтали
  при появлении / исчезновении скроллбара
  */
scrollbar-gutter: stable;
/**
  Плавный скролл
  */
scroll-behavior: smooth;
}

body {
/**
  Пригодится в большинстве ситуаций
  (когда, например, нужно будет "прижать" футер к низу сайта)
  */
min-height: 100%;
/**
  Унифицированный интерлиньяж
  */
line-height: 1.5;
}

/**
Нормализация высоты элемента ссылки при его инспектировании в DevTools
*/
a:where([class]) {
display: inline-flex;
}

/**
Курсор-рука при наведении на элемент
*/
button,
label {
cursor: pointer;
}

/**
Убирает серую подсветку при тапе на мобильных устройствах (iOS/Android)
*/
button {
-webkit-tap-highlight-color: transparent;
}

/**
Приводим к единому цвету svg-элементы
(за исключением тех, у которых уже указан
атрибут fill со значением 'none' или начинается с 'url')
*/
:where(
  [fill^="none"]
) {
  fill: currentColor;
}


/**
Приводим к единому цвету svg-элементы
(за исключением тех, у которых уже указан
атрибут stroke со значением 'none')
*/
:where([stroke]:not(
[stroke="none"],
[stroke^="url"]
)) {
stroke: currentColor;
}

/**
Чиним баг задержки смены цвета при взаимодействии с svg-элементами
*/
svg * {
transition-property: fill, stroke;
}

/**
Приведение рамок таблиц в классический 'collapse' вид
*/
:where(table) {
border-collapse: collapse;
border-color: currentColor;
}

/**
Удаляем все анимации и переходы для людей,
которые предпочитают их не использовать
*/
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
}

h2{
font-weight: 300;
}


:root{
--border-radius: 10px;

--color-gray: #E8E6E1;
--color-gold: #D5C141;
--color-dark-gold: #231F08;
--color-light: #FFFFFF;

--color-dark-gray-light: #181818;
--color-dark-gray: #0B0B0B;
--color-dark: #000000;

--fnt-size48-adapt: 2.5vw;

--container-width: 1698px;
--container-width: 61vw;
--header-title-font-size: calc(0.08 * var(--container-width)); /*96*/

--transition-duration: 0.2s;
--transition-duration-appearance: 2s;

}

html::selection {
  background-color: var(--color-gold);
}

@keyframes logo-appearance {
  0% {
    translate: -30% 0;
    opacity: 0;
  }
  100% {translate: 0 0;}
}

@keyframes title-appearance {
  0% {
    translate: 0 -10%;
    opacity: 0;
  }
  100% {translate: 0 0;}
}

@keyframes star-line-appearance {
  0% {scale: 0 1;}
  100% {scale: 1 1;}  
}

@keyframes star-appearance {
  0% {scale: 1 0;}
  100% { scale: 1 1;}  
}

@keyframes nav-title-apperance {
  0% {
    translate: 15% 0;
    opacity: 0;
  }
  100% {translate: 0;}
}

@keyframes nav-line-appearance {
  0% { scale: 0 1;}
  100% { scale: 1 1;}  
}

@keyframes nav-item-appearance {
  0% {
    translate: 30% 0;
    opacity: 0;
  }
  100% {translate: 0;}
}

@keyframes burger-button-appearance {
  0% {
    translate: 0 -100%;
    opacity: 0;
  }
  100%{translate: 0}
}


@keyframes shake-hand {
  0%{
    rotate: 30deg;
  }

  50%{
    rotate: -10deg;
     translate: 0;
  }

  100% {
    rotate: 30deg;
  }

}

@keyframes animation-star-list-element {
  

  50% {
    opacity: 0;
  }

}

.animation-shake-hand {
  animation-name: shake-hand;
  animation-duration: 0.8s;
  animation-timing-function: ease;
  animation-timing-function: ease;
  animation-iteration-count: 3;
  animation-fill-mode: both; 
}

@keyframes hand-appearance {
  0% {
    rotate: 30deg;
    opacity: 0;
    translate: 10vw;
  }

}
.animation-hand-appearance {
  animation-name: hand-appearance;
  animation-duration: var(--transition-duration-appearance);
}

@keyframes introduction-text-appearance {
  0% {
    opacity: 0;
    translate: -10vw;
  }
}

@keyframes section-appearance {
  0% {
    translate: 0 -2vw;
    opacity: 0;
  }

  100% {
    translate: 0;
    opacity: 1;
  }
}

.header-nav-container *, svg *, .introduction *, .projects *{
transition-duration: var(--transition-duration)
}

h1, h2, h3 {
  font-weight: 300;
}


.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;
}

a {
text-decoration: none;
color: var(--color-light);
}

body {
padding-top: calc(0.032 * var(--container-width));
font-family: "Prosto One";
color: var(--color-light);
background-color: var(--color-dark);
transition-duration: var(--transition-duration)
}

.section-container {
  display: flex;
  width: 88.44vw;
  margin-inline: auto;
  flex-wrap: wrap;
}

.section-appearance {
  translate: 0 2vw;
  opacity: 0;
  transition-duration: 2s;
}

.section-container.scrolled {
  translate: 0;
  opacity: 1;
}

.title-section {
  display: inline;
  --title-height: 5vw;
  --line-height: 0.78vw;
  height: auto;
  position: relative;
  font-size: var(--title-height);
  color: var(--color-light);
  margin-right: 100%;
  margin-bottom: calc(var(--line-height) * 2.69);
  text-wrap: nowrap;
  &::before {
    content: "";
    position: absolute;
    top: 100%;
    height: auto;
    width: calc(100% + var(--line-height) * 2);
    height: var(--line-height);
    background: url('./icons/incrising-line.svg') no-repeat center/contain;
  }
}


.header-title-logo-container{
  padding-left: calc(0.025 * var(--container-width));
  display: flex;
  max-width: var(--container-width);
  column-gap: calc(0.03 * var(--container-width));
  user-select: none;
}

.gold-text{
color: var(--color-gold)
}

.header-logo-link{
display: block;
user-select: none;
min-width: calc(0.19 * var(--container-width));
aspect-ratio: 1.37;
align-self: start;
animation: logo-appearance var(--transition-duration-appearance);
}

@media (hover: hover) {
.logo:hover *{
  fill: var(--color-gold)
}
}

.header-title-container {
width: max-content;
flex-direction: column;
padding-top: calc(0.018 * var(--container-width));
cursor: default;
}

.header-title{
  color: var(--color-gray);
  font-size: calc(0.08 * var(--container-width)); /*96*/
  line-height: 0.9;
  animation: title-appearance var(--transition-duration-appearance);
}

.header-star-line{
  width: 100%;
}

.header-star-line-container{
position: relative;
display: block;
width: calc(0.75 * var(--container-width));
transform-origin: 0 0;
animation: star-line-appearance var(--transition-duration-appearance);
&::after{
  content: "";
  position: absolute;
  --width: calc(0.17 * var(--container-width));
  width: var(--width);
  aspect-ratio: 1;
  right: calc(
    var(--width) / -2 - 0.02 * var(--container-width)
    );
  top: calc(
    var(--width) / -2 + 0.005 * var(--container-width)
    );
  z-index: -1;
  background: url("./icons/header/star.svg") no-repeat center/contain ;
  animation: star-appearance var(--transition-duration-appearance);
}
}

.header-nav-container{
  color: var(--color-gray);
  margin-left: calc(0.16 * var(--container-width));
  width: calc(0.23 * var(--container-width));
  display: inline-flex;
  cursor: default;
}

.header-nav-item.here-or-is-pressed a{
  color: var(--color-gold)
}

.header-nav-item a {
  display: block;
}

.header-nav-title{
  font-size: calc(0.04 * var(--container-width));
  cursor: pointer;
  line-height: 1.2;
  animation: nav-title-apperance var(--transition-duration-appearance)
}

.header-nav-title-line{
  animation: nav-line-appearance var(--transition-duration-appearance);
  transform-origin: 100%;
  min-width: 100%;
}

.header-nav-item{
  animation: nav-item-appearance var(--transition-duration-appearance);
  transform-origin: 0 calc(1em / 2);
  font-size: calc(0.026 * var(--container-width));
  cursor: pointer;
}

.header-nav-item a {
color: var(--color-gray);
}

.header-nav-burger-button{

  right: 4vw;
  top: 7vw;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  row-gap: 1.2vw;
  margin-top: var(--px10);
  margin-inline: auto;
  width: 11vw;
  aspect-ratio: 1;

  z-index: 5;
  background-color: transparent;
  border: solid 0.3vw var(--color-gray);
  border-radius: 2.6vw;
  animation: burger-button-appearance var(--transition-duration-appearance);
  background-color: var(--color-dark);
}

.header-nav-burger-button.opened {
  border: none;
}

.header-nav-burger-button-line{
  height: 0.3vw;
  background-color: var(--color-gray);
  border-radius: 1.2vw;
  width: 80%;
  z-index: 2;
}

.introduction-body{
  display: flex;
  flex-direction: row;
  padding-left: 5.2vw;
  padding-bottom: 5.4vw;
}

.introduction-hand-conatainer{
  min-width: 32vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.introduction-hand {
  rotate: 30deg;
  width: 15vw;
  height: 20vw;
}

.introduction-text{
  font-size: 2.5vw;
  width: 51vw;
  animation: introduction-text-appearance var(--transition-duration-appearance);
}

.project-container:not(:last-child){
  margin-bottom: 10vw;
}

.project-container{
  display: grid;
  grid-template-columns: [video] 52vw [description] 24vw [links]9.5vw;
  grid-template-rows: 30vw auto;
  row-gap: 2vw;
}

.project-present-src {
  width: 52vw;
  height: 30vw;
  border: solid var(--color-gold) 20px;
  border-radius: 0 var(--border-radius) 0 var(--border-radius);
  object-fit: cover;
}

.project-present-src.is-fullscreen {
  border: 0;
  object-fit: contain;

}

.project-name {
  margin-top: 2vw;
  font-size: 2.5vw;
}

.project-header {
  grid-row: 1/3;
}

.project-description {
  font-size: 2vw;
  grid-column: 2/4;
  color: var(--color-gray);;
  overflow-y: scroll;
  scrollbar-color: var(--color-dark-gray-light) transparent;
}

.project-play-link, .project-link  {
  grid-row: 2/3;
}

.project-play-link, .project-description {
  margin-left: 2.2vw;
}

.project-play-link {
  display: inline;
  width: 20vw;
  height: 3.75vw;
  background-color: var(--color-gold);
  border-radius: var(--border-radius);
  font-size: 2.5vw;
  text-transform: uppercase;
  text-align: center;
}

.project-link {
  border-radius: 50%;
  background-color: var(--color-gray);
  width: 3.4vw;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-links-container {
  display: grid;
  grid-template-rows: auto auto;
}

.stack-and-skills {
  padding-block: 5.4vw;
  display: flex;
}

.title-section-margin-bottom {
  margin-bottom: 4vw;
}

.stack-list {
  width: 41vw;
  display: flex;  
  flex-shrink: 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2.5vw;
}

.list-element-programm {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 20%;
  min-height: min-content;
  aspect-ratio: 1;
  background-color: var(--color-gray);
  border-radius: 0 var(--border-radius) 0 var(--border-radius);
  transition-duration: var(--transition-duration);
}

.list-element-programm svg {
  width: 67%;
  aspect-ratio: 1;
  fill: var(--color-dark);
}

.skills-list {
  width: 40vw;
  margin-left: 5.5vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 2.5vw;
}

.list-element-skill {
  width: 87%;
  height: 43%;
  display: flex;
  position: relative;
  user-select: none;
  flex-direction: row;
  align-items: center;
  background-color: var(--color-gold);
  border-radius: 0 var(--border-radius) 0 var(--border-radius);
  padding-left: 1.7vw;
  padding-right: 2.3vw;
  transition-duration: var(--transition-duration);
}

.skill-name {
  font-size: 2.5vw;
}

.program-or-skill-icon {
  flex-shrink: 0;
  width: 5.6vw;
  min-height: min-content;
  aspect-ratio: 1;
}

.list-element-skill-star {
  position: absolute;
  width: 10%;
  aspect-ratio: 1;
  left: 95%;
  top: 70%;
  animation: animation-star-list-element 3s;
  animation-iteration-count: infinite;
}

.contacts-list {
  display: flex;
  flex-direction: row;
  column-gap: 8.6vw;
}

.contacts-list-element {
  width: 7.3vw;
  aspect-ratio: 1;
  background-color: var(--color-gold);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition-duration: var(--transition-duration);
}

.contact-link {
  display: block;
  width: 62.5%;
  height: 62.5%;
}

.contacts {
  padding-bottom: 6vw;
}

.modal-mobile-navigation{
  display: flex;
  visibility: hidden;
  position: fixed;
  opacity: 0;
  transition-duration: var(--transition-duration);
  top: 0;
  left: 0;
  background-color: var(--color-dark);
  width: 100vw;
  height: 100vh;
  z-index: 2;
  justify-content: center;
  align-items: center;
}

.modal-mobile-navigation.opened {
  opacity: 1;
  visibility: visible;
}

.nav-list-modal {
  display: flex;
  flex-direction: column;
}

.nav-list-item-modal {
  font-size: 7vw;
  height: 20vw;
  display: flex;
  justify-content: center;
}

.nav-list-item-modal a {
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media (hover: hover) {
  .header-nav-item:not(.here-or-is-pressed):hover{
    color: var(--color-light);
    scale: 1.2;
  }

  .project-play-link:hover {
    border-radius: var(--border-radius) 0 var(--border-radius) 0;
  }

  .project-link:hover, .contacts-list-element:hover {
    scale: 1.1;
  }

  .list-element-programm svg:hover{
    fill: var(--color-gold);
  }

  .list-element-programm:hover {
    border-radius: var(--border-radius) 0 var(--border-radius) 0;
  }

  .list-element-skill:hover{
    border-radius: var(--border-radius) 0 var(--border-radius) 0;
  }
}

@media (hover: none) {

  .header-nav-item:not(.here-or-is-pressed){
    transition-duration: 0.08s
  }

  .header-nav-item:not(.here-or-is-pressed):active{
    color: var(--color-light);
    scale: 0.9;
  }
}

@media (max-width: 700px) {


  .contacts-list-element {
    width: 12vw;
  }

  .list-element-skill {
    height: 16vw;
    padding-left: 4vw;
    padding-right: 5vw;
  }

  .skill-name {
    font-size: 5.1vw;
  }

  .stack-and-skills {
    flex-direction: column;
  }

  .title-section-margin-bottom {
  margin-bottom: 10vw;
}


  .skills-list, .stack-list {
    width: 100%;
  }

  .skills-list {
    margin-top: 9vw;
    margin-left: 0;;
    align-items: start;
    row-gap: 5vw;
  }

  .program-or-skill-icon {
    width: 11vw;
  }

  .list-element-programm {
    width: 30vw;
  }

  .project-container{
    row-gap: 3vw;;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto;
  }

  .project-header{
    grid-column: 1/1;
    grid-row: 1/2;
  }

  .project-present-src{
    width: 100%;
    height: auto;
    aspect-ratio: 1010 / 568;
  }

  .project-name {
    font-size: 6vw;
  }

  .project-description {
    grid-row: 3/4;
    grid-column: 1/1;
    margin: 0;
    font-size: 5vw;
  }

  .project-play-link {
    margin: 0;
    --height: 10vw;
    line-height: var(--height);
    font-size: 6vw;
    width: auto;
    height: var(--height);
    grid-column: 1/1;
    grid-row: 2/3;
  }

  .project-links-container {
    grid-row: 4/5;
    display: flex;
    column-gap: 5vw;
  }

  .project-link {
    width: 12vw;
  }

  .header-nav-dekstop{
    display: none
  }
  
  .header {
    margin-left: 0;
  }

  .header-logo-link{
    align-self: center;
    min-width: calc(0.30 * var(--container-width));
  }

  .header-title{
    width: 90%;
    font-size: calc(0.15 * var(--container-width)); /*96*/
  }

  .header-star-line-container{
    width: calc(0.70 * var(--container-width));
  }

  .title-section {
    --title-height: 15vw;
    --line-height: 2.34vw;
    margin-right: 0;
    text-wrap: wrap;
  }

  .title-section::before {
    width: 100%;
  }
 
  :root{
    --container-width: 85vw;
  }

  .header-nav-container{
    margin-left: calc(0.10 * var(--container-width));
  }

  .introduction-hand-conatainer{
    flex-basis: 100%;
  }

  .introduction-text{
    font-size: 5vw;
  }

  .introduction-hand{
    --hand-size-procent: 60%;
    width: var(--hand-size-procent);
    height: var(--hand-size-procent);
  }

  .introduction-body{
    padding-left: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 80vh;
  }

  .introduction-text{
    display: inline;
    order: 1;
    width: 85%;
  }
}


@media (min-width: 700px) {
  .visible-mobile {
    display: none !important;
  }
}