@charset "UTF-8";
/* reset start*/
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  outline: none;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol,
li {
  list-style: none;
}

/* Common */
aside,
nav,
footer,
header,
section,
main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}

/* Base settings */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1;
}

button,
input {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  font-family: inherit;
  outline: none;
}

button {
  cursor: pointer;
  background-color: inherit;
}

/* :focus,
:active {
  outline: none;
} */
/* a:focus,
a:active {
  outline: none;
} */
/* Links */
a,
a:link,
a:visited {
  /* color: inherit; */
  text-decoration: none;
  /* display: inline-block; */
}

a:hover {
  /* color: inherit; */
  text-decoration: none;
}

/* Images */
img {
  vertical-align: top;
  max-width: 100%;
}

/* font  */
input,
button,
textarea,
select {
  font: inherit;
}

/* Animation */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* reset end*/
._ibg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

._ibg img {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 48.75em) {
  .icon-menu {
    margin: 0.3125rem;
    z-index: 100;
    display: block;
    position: relative;
    width: 2.5rem;
    height: 1.5rem;
    cursor: pointer;
  }
  .icon-menu::before, .icon-menu::after, .icon-menu span {
    content: "";
    position: absolute;
    height: 0.125rem;
    width: 100%;
    transition: all 0.3s ease 0s;
    background-color: #fff;
  }
  .icon-menu::before, .icon-menu::after {
    content: "";
  }
  .icon-menu::before {
    right: 0;
    top: 0;
    width: 70%;
  }
  .icon-menu::after {
    left: 0;
    bottom: 0;
    width: 70%;
  }
  .icon-menu span {
    left: 0;
    top: 50%;
    transform: scale(1) translate(0px, -50%);
  }
  .icon-menu._active span {
    transform: scale(0);
  }
  .icon-menu._active::before {
    width: 100%;
    top: 50%;
    transform: rotate(-45deg) translate(0px, 0%);
  }
  .icon-menu._active::after {
    width: 100%;
    top: 50%;
    transform: rotate(45deg) translate(0px, 0%);
  }
}

@media (max-width: 48.75em) {
  .menu {
    display: flex;
    justify-content: end;
  }
}
.menu__body {
  display: flex;
  flex-direction: column;
  background: rgb(29, 29, 31);
  position: fixed;
  z-index: 50;
  top: 0;
  left: -130%;
  transition: left 0.3s ease;
  width: 100vw;
  height: 100vh;
  padding-top: 5.625rem;
  overflow: auto;
}
@media (max-width: 20.125em) {
  .menu__body {
    padding-top: 4.375rem;
  }
}
@media (min-width: 20.125em) and (max-width: 48em) {
  .menu__body {
    padding-top: calc(
                4.375rem + 20 * ((100vw - 20.125rem) / 446)
            );
  }
}
.menu__body._active {
  transition: left 0.3s ease;
  left: 0;
}
.menu__body .header__nav {
  flex: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: stretch;
}
.menu__body .header__social {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: auto;
}
.menu__body .nav__list {
  border-top: 1px solid #3a3a3a;
  flex-direction: column;
  text-align: center;
  line-height: 2.5;
  width: 100%;
}
.menu__body .nav__item {
  border-bottom: 1px solid #3a3a3a;
}
.menu__body .social__list {
  column-gap: 3.75rem;
}
.menu__body .social__link::before {
  font-size: 1.75rem;
}

@font-face {
  font-family: "icons";
  src: url("../assets/src/icons-font/icons.eot?ymq3tt");
  src: url("../assets/src/icons-font/icons.eot?ymq3tt#iefix") format("embedded-opentype"), url("../assets/src/icons-font/icons.ttf?ymq3tt") format("truetype"), url("../assets/src/icons-font/icons.woff?ymq3tt") format("woff"), url("../assets/src/icons-font/icons.svg?ymq3tt#icons") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=_icon-]::before,
[class*=" _icon-"]::before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icons" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._icon-code:before {
  content: "\e900";
}

._icon-git:before {
  content: "\e902";
}

._icon-email:before {
  content: "\e901";
}

._icon-tg:before {
  content: "\e903";
}

._icon-phone:before {
  content: "\e908";
}

[class*=__container] {
  max-width: 93.125rem;
  box-sizing: content-box;
  margin: 0 auto;
  padding-left: 1.5625rem;
  padding-right: 1.5625rem;
}
@media (max-width: 20em) {
  [class*=__container] {
    padding-left: 0.625rem;
  }
}
@media (min-width: 20em) and (max-width: 48em) {
  [class*=__container] {
    padding-left: calc(
                0.625rem + 15 * ((100vw - 20rem) / 448)
            );
  }
}
@media (max-width: 20em) {
  [class*=__container] {
    padding-right: 0.625rem;
  }
}
@media (min-width: 20em) and (max-width: 48em) {
  [class*=__container] {
    padding-right: calc(
                0.625rem + 15 * ((100vw - 20rem) / 448)
            );
  }
}
@media (min-width: 47.99875em) {
  [class*=__container] {
    padding: 0 3.4375rem;
  }
}
@media (max-width: 80em) and (min-width: 47.99875em) {
  [class*=__container] {
    padding-left: 3.4375rem;
    padding-right: 3.4375rem;
  }
}
@media (max-width: 80em) and (min-width: 47.99875em) and (max-width: 48em) {
  [class*=__container] {
    padding-left: 1.5625rem;
  }
}
@media (max-width: 80em) and (min-width: 47.99875em) and (min-width: 48em) and (max-width: 80em) {
  [class*=__container] {
    padding-left: calc(
                1.5625rem + 30 * ((100vw - 48rem) / 512)
            );
  }
}
@media (max-width: 80em) and (min-width: 47.99875em) and (max-width: 48em) {
  [class*=__container] {
    padding-right: 1.5625rem;
  }
}
@media (max-width: 80em) and (min-width: 47.99875em) and (min-width: 48em) and (max-width: 80em) {
  [class*=__container] {
    padding-right: calc(
                1.5625rem + 30 * ((100vw - 48rem) / 512)
            );
  }
}

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #fafafa;
  background-image: url(../assets/src/images/bg.jpg);
  background-size: 50px;
  overflow-x: hidden;
}
body._lock {
  overflow: hidden;
}

.button {
  position: relative;
  z-index: 0;
  font-family: inherit;
  font-size: 20px;
  border-radius: 6px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3.7px);
  -webkit-backdrop-filter: blur(3.7px);
  border: 1px solid rgba(255, 255, 255, 0.222);
  background-color: rgba(255, 255, 255, 0.074);
  color: #fe6700;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  transition: all 0.2s;
}

.button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

.button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

.button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

.button:hover svg {
  transform: translateX(3em) rotate(45deg) scale(1.1);
}

.button:hover span {
  transform: translateX(10em);
}

.button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }
  to {
    transform: translateY(-0.1em);
  }
}
.text {
  width: 29ch;
  color: white;
  font-family: monospace;
  font-size: 30px;
  white-space: nowrap; /* не переносить текст на другую строку */
  overflow: hidden; /* скрываем переполнение контентом */
  border-right: 3px solid white; /* рисуем курсор */
  animation: cursor 0.75s step-end infinite, printed_text 5s steps(29);
}

@keyframes cursor {
  0% {
    border-color: white;
  }
  50% {
    border-color: transparent;
  }
  100% {
    border-color: white;
  }
}
@keyframes printed_text {
  from {
    width: 0;
  }
}
.header {
  position: fixed;
  width: 100%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #3a3a3a;
  z-index: 100;
}
.header__container {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 20em) {
  .header__container {
    height: 1.875rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .header__container {
    height: calc(
                1.875rem + 10 * ((100vw - 20rem) / 960)
            );
  }
}
.header__container > * {
  flex: 1;
}
.header__logo {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  column-gap: 0.375rem;
  font-size: 1.375rem;
  font-weight: 500;
  z-index: 200;
}
@media (max-width: 20em) {
  .header__logo {
    font-size: 1rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .header__logo {
    font-size: calc(
                1rem + 6 * ((100vw - 20rem) / 960)
            );
  }
}
.header__logo::before {
  font-size: 1.5rem;
}
@media (max-width: 20em) {
  .header__logo::before {
    font-size: 1.125rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .header__logo::before {
    font-size: calc(
                1.125rem + 6 * ((100vw - 20rem) / 960)
            );
  }
}
.header__nav {
  flex: 1.7;
}
.header__social {
  flex: 0.5;
}

.nav__list {
  display: flex;
  justify-content: center;
  column-gap: 3rem;
}
@media (max-width: 48em) {
  .nav__list {
    column-gap: 1.25rem;
  }
}
@media (min-width: 48em) and (max-width: 80em) {
  .nav__list {
    column-gap: calc(
                1.25rem + 28 * ((100vw - 48rem) / 512)
            );
  }
}
.nav__item {
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 500;
  transition: color 0.3s ease;
}
@media (max-width: 48em) {
  .nav__item {
    font-size: 0.875rem;
  }
}
@media (min-width: 48em) and (max-width: 80em) {
  .nav__item {
    font-size: calc(
                0.875rem + 6 * ((100vw - 48rem) / 512)
            );
  }
}
@media (max-width: 48.75em) {
  .nav__item {
    font-size: 1.5rem;
    font-weight: 300;
  }
}
@media (any-hover: hover) {
  .nav__item:hover {
    transition: color 0.3s ease;
    color: #fe6700;
  }
}

.social__list {
  display: flex;
  justify-content: end;
  column-gap: 1.375rem;
}
.social__link::before {
  transition: color 0.3s ease;
  font-size: 1.25rem;
}
@media (any-hover: hover) {
  .social__link:hover::before {
    transition: color 0.3s ease;
    color: #fe6700;
  }
}

.content__header {
  padding-top: 12.8125rem;
  padding-bottom: 7.5rem;
}
@media (max-width: 20em) {
  .content__header {
    padding-top: 7.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .content__header {
    padding-top: calc(
                7.5rem + 85 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .content__header {
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .content__header {
    padding-bottom: calc(
                2.5rem + 80 * ((100vw - 20rem) / 960)
            );
  }
}
.content__projects {
  padding-top: 6.25rem;
  padding-bottom: 3.75rem;
}
@media (max-width: 20em) {
  .content__projects {
    padding-top: 2.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .content__projects {
    padding-top: calc(
                2.5rem + 60 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .content__projects {
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .content__projects {
    padding-bottom: calc(
                2.5rem + 20 * ((100vw - 20rem) / 960)
            );
  }
}
.content__case {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}
@media (max-width: 20em) {
  .content__case {
    padding-top: 2.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .content__case {
    padding-top: calc(
                2.5rem + 20 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .content__case {
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .content__case {
    padding-bottom: calc(
                2.5rem + 20 * ((100vw - 20rem) / 960)
            );
  }
}
.content__technologies {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}
@media (max-width: 20em) {
  .content__technologies {
    padding-top: 2.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .content__technologies {
    padding-top: calc(
                2.5rem + 20 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .content__technologies {
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .content__technologies {
    padding-bottom: calc(
                2.5rem + 20 * ((100vw - 20rem) / 960)
            );
  }
}
.content__about {
  padding-top: 3.75rem;
  padding-bottom: 6.25rem;
}
@media (max-width: 20em) {
  .content__about {
    padding-top: 2.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .content__about {
    padding-top: calc(
                2.5rem + 20 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .content__about {
    padding-bottom: 3.75rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .content__about {
    padding-bottom: calc(
                3.75rem + 40 * ((100vw - 20rem) / 960)
            );
  }
}

.header-content__container::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20%;
  right: 7%;
  background-image: url(../assets/src/images/mainblock/drawing.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 34.875rem;
  height: 34.875rem;
}
@media (max-width: 20em) {
  .header-content__container::before {
    width: 18.75rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .header-content__container::before {
    width: calc(
                18.75rem + 258 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .header-content__container::before {
    height: 18.75rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .header-content__container::before {
    height: calc(
                18.75rem + 258 * ((100vw - 20rem) / 960)
            );
  }
}
.header-content__title {
  font-weight: 800;
  font-size: 4.6875rem;
  width: min-content;
  margin-bottom: 3rem;
}
@media (max-width: 20em) {
  .header-content__title {
    font-size: 1.875rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .header-content__title {
    font-size: calc(
                1.875rem + 45 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .header-content__title {
    margin-bottom: 1rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .header-content__title {
    margin-bottom: calc(
                1rem + 32 * ((100vw - 20rem) / 960)
            );
  }
}
.header-content__text {
  font-weight: 300;
  font-size: 1.375rem;
  max-width: 46.25rem;
  line-height: 1.4;
  margin-bottom: 3rem;
}
@media (max-width: 20em) {
  .header-content__text {
    font-size: 1rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .header-content__text {
    font-size: calc(
                1rem + 6 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .header-content__text {
    margin-bottom: 1rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .header-content__text {
    margin-bottom: calc(
                1rem + 32 * ((100vw - 20rem) / 960)
            );
  }
}

.projects {
  position: relative;
}
.projects__title {
  text-align: center;
  font-size: 2.8125rem;
  font-weight: 500;
  margin-bottom: 6.25rem;
}
@media (max-width: 20em) {
  .projects__title {
    font-size: 1.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .projects__title {
    font-size: calc(
                1.5rem + 21 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .projects__title {
    margin-bottom: 2.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .projects__title {
    margin-bottom: calc(
                2.5rem + 60 * ((100vw - 20rem) / 960)
            );
  }
}
.projects__items {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  row-gap: 3.75rem;
  column-gap: 2rem;
}
@media (max-width: 20em) {
  .projects__items {
    row-gap: 1rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .projects__items {
    row-gap: calc(
                1rem + 44 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 42.5em) {
  .projects__items {
    flex-direction: column;
  }
}
.item-project {
  position: relative;
  max-width: 28.125rem;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  row-gap: 1rem;
  padding: 1.5625rem;
  border-radius: 50px 0px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.222);
  background-color: rgba(255, 255, 255, 0.074);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media (max-width: 65.625em) {
  .item-project {
    max-width: 21.875rem;
  }
}
@media (max-width: 51.25em) {
  .item-project {
    max-width: 18.75rem;
  }
}
@media (max-width: 42.5em) {
  .item-project {
    max-width: 62.5rem;
  }
}
.item-project:hover {
  box-shadow: 0px 0px 20px 1px rgba(255, 187, 118, 0.2470588235);
  border: 1px solid rgba(255, 255, 255, 0.454);
}
.item-project__image {
  border-radius: 30px 4px 4px 4px;
  padding-bottom: 60%;
  transition: all 0.3s ease;
}
@media (any-hover: hover) {
  .item-project__image:hover {
    transition: all 0.3s ease;
    transform: scale(1.02);
    -webkit-box-shadow: 0px 24px 47px 1px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 24px 47px 1px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 24px 47px 1px rgba(0, 0, 0, 0.16);
  }
}
.item-project__title {
  font-size: 1.625rem;
  line-height: 1.4;
  font-weight: 500;
}
@media (max-width: 20em) {
  .item-project__title {
    font-size: 1.125rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .item-project__title {
    font-size: calc(
                1.125rem + 8 * ((100vw - 20rem) / 960)
            );
  }
}
.item-project__text {
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.4;
  padding: 1.125rem 0;
  border-top: 1px solid #3a3a3a;
  border-bottom: 1px solid #3a3a3a;
}
@media (max-width: 20em) {
  .item-project__text {
    font-size: 0.875rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .item-project__text {
    font-size: calc(
                0.875rem + 4 * ((100vw - 20rem) / 960)
            );
  }
}
.item-project__list {
  display: flex;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  flex-wrap: wrap;
}
.item-project__t {
  font-weight: 300;
  padding: 0.3125rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.222);
  border-radius: 0.5rem;
  font-size: 1.125rem;
}
.item-project__link {
  transition: color 0.3s ease;
  font-size: 1.25rem;
  text-align: center;
  border-top: 1px solid #3a3a3a;
  padding-top: 1rem;
  font-weight: 500;
}
@media (max-width: 20em) {
  .item-project__link {
    font-size: 1rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .item-project__link {
    font-size: calc(
                1rem + 4 * ((100vw - 20rem) / 960)
            );
  }
}
@media (any-hover: hover) {
  .item-project__link:hover {
    transition: color 0.3s ease;
    color: #fe6700;
  }
}

.case__title {
  font-size: 2.8125rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
@media (max-width: 20em) {
  .case__title {
    font-size: 1.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .case__title {
    font-size: calc(
                1.5rem + 21 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .case__title {
    margin-bottom: 0.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .case__title {
    margin-bottom: calc(
                0.5rem + 8 * ((100vw - 20rem) / 960)
            );
  }
}
.case__text {
  max-width: 37.5rem;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.4;
  margin-bottom: 4.375rem;
}
@media (max-width: 20em) {
  .case__text {
    font-size: 0.875rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .case__text {
    font-size: calc(
                0.875rem + 4 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .case__text {
    margin-bottom: 1.5625rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .case__text {
    margin-bottom: calc(
                1.5625rem + 45 * ((100vw - 20rem) / 960)
            );
  }
}

.technologies__title {
  text-align: center;
  font-size: 2.8125rem;
  font-weight: 500;
  margin-bottom: 5rem;
}
@media (max-width: 20em) {
  .technologies__title {
    font-size: 1.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .technologies__title {
    font-size: calc(
                1.5rem + 21 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .technologies__title {
    margin-bottom: 2.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .technologies__title {
    margin-bottom: calc(
                2.5rem + 40 * ((100vw - 20rem) / 960)
            );
  }
}
.technologies__items {
  width: 80%;
  margin: 0 auto;
}
.item-technologies__body {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding: 0 0.625rem;
}
.item-technologies__tech {
  font-size: 1.5rem;
  font-weight: 500;
}
@media (max-width: 20em) {
  .item-technologies__tech {
    font-size: 1rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .item-technologies__tech {
    font-size: calc(
                1rem + 8 * ((100vw - 20rem) / 960)
            );
  }
}
.item-technologies__level {
  font-weight: 300;
  font-size: 1.25rem;
}
@media (max-width: 20em) {
  .item-technologies__level {
    font-size: 0.875rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .item-technologies__level {
    font-size: calc(
                0.875rem + 6 * ((100vw - 20rem) / 960)
            );
  }
}
.item-technologies__grade {
  height: 0.875rem;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.074);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  box-shadow: 0px 24px 47px 1px rgba(0, 0, 0, 0.16);
  margin-bottom: 2.5rem;
}
@media (max-width: 20em) {
  .item-technologies__grade {
    height: 0.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .item-technologies__grade {
    height: calc(
                0.5rem + 6 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .item-technologies__grade {
    margin-bottom: 1.25rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .item-technologies__grade {
    margin-bottom: calc(
                1.25rem + 20 * ((100vw - 20rem) / 960)
            );
  }
}
.item-technologies__pr {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #4d1489, #fe6700);
  width: 0%;
  transition: width 1.5s ease-in;
}
.item-technologies ._html._active {
  width: 100%;
}
.item-technologies ._css._active {
  width: 100%;
}
.item-technologies ._next._active {
  width: 85%;
}
.item-technologies ._js._active {
  width: 90%;
}
.item-technologies ._react._active {
  width: 85%;
}
.item-technologies ._redux._active {
  width: 80%;
}
.item-technologies ._git._active {
  width: 80%;
}
.item-technologies ._figma._active {
  width: 70%;
}
.item-technologies ._php._active {
  width: 30%;
}
.item-technologies ._python._active {
  width: 50%;
}
.item-technologies ._tailwind._active {
  width: 80%;
}
.item-technologies ._wordpress._active {
  width: 75%;
}

.about__title {
  font-size: 2.8125rem;
  font-weight: 500;
  margin-bottom: 3.125rem;
}
@media (max-width: 20em) {
  .about__title {
    font-size: 1.5rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .about__title {
    font-size: calc(
                1.5rem + 21 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .about__title {
    margin-bottom: 1.875rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .about__title {
    margin-bottom: calc(
                1.875rem + 20 * ((100vw - 20rem) / 960)
            );
  }
}
.about__text {
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.4;
  margin-bottom: 2.5rem;
}
@media (max-width: 20em) {
  .about__text {
    font-size: 0.875rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .about__text {
    font-size: calc(
                0.875rem + 6 * ((100vw - 20rem) / 960)
            );
  }
}
@media (max-width: 20em) {
  .about__text {
    margin-bottom: 1.125rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .about__text {
    margin-bottom: calc(
                1.125rem + 22 * ((100vw - 20rem) / 960)
            );
  }
}

.mast__title {
  letter-spacing: 0.1em;
}
.mast__title span {
  animation: letter-glow 0.7s 0s ease both;
}
.mast__title span:nth-child(1) {
  animation-delay: 0.1s;
}
.mast__title span:nth-child(2) {
  animation-delay: 0.2s;
}
.mast__title span:nth-child(3) {
  animation-delay: 0.3s;
}
.mast__title span:nth-child(4) {
  animation-delay: 0.4s;
}
.mast__title span:nth-child(5) {
  animation-delay: 0.5s;
}
.mast__title span:nth-child(6) {
  animation-delay: 0.6s;
}
.mast__title span:nth-child(7) {
  animation-delay: 0.7s;
}
.mast__title span:nth-child(8) {
  animation-delay: 0.8s;
}
.mast__title span:nth-child(9) {
  animation-delay: 0.9s;
}
.mast__title span:nth-child(10) {
  animation-delay: 1s;
}
.mast__title span:nth-child(11) {
  animation-delay: 1.1s;
}
.mast__title span:nth-child(12) {
  animation-delay: 1.2s;
}
.mast__title span:nth-child(13) {
  animation-delay: 1.3s;
}
.mast__title span:nth-child(14) {
  animation-delay: 1.4s;
}
.mast__title span:nth-child(15) {
  animation-delay: 1.5s;
}
.mast__title span:nth-child(16) {
  animation-delay: 1.6s;
}
.mast__title span:nth-child(17) {
  animation-delay: 1.7s;
}
.mast__title span:nth-child(18) {
  animation-delay: 1.8s;
}
.mast__title span:nth-child(19) {
  animation-delay: 1.9s;
}
.mast__title span:nth-child(20) {
  animation-delay: 2s;
}
.mast__title span:nth-child(21) {
  animation-delay: 2.1s;
}
.mast__title span:nth-child(22) {
  animation-delay: 2.2s;
}
.mast__title span:nth-child(23) {
  animation-delay: 2.3s;
}
.mast__title span:nth-child(24) {
  animation-delay: 2.4s;
}
.mast__title span:nth-child(25) {
  animation-delay: 2.5s;
}
.mast__text span {
  animation: letter-glow 1s 0s ease both;
}
.mast__text span:nth-child(1) {
  animation-delay: 0.03s;
}
.mast__text span:nth-child(2) {
  animation-delay: 0.06s;
}
.mast__text span:nth-child(3) {
  animation-delay: 0.09s;
}
.mast__text span:nth-child(4) {
  animation-delay: 0.12s;
}
.mast__text span:nth-child(5) {
  animation-delay: 0.15s;
}
.mast__text span:nth-child(6) {
  animation-delay: 0.18s;
}
.mast__text span:nth-child(7) {
  animation-delay: 0.21s;
}
.mast__text span:nth-child(8) {
  animation-delay: 0.24s;
}
.mast__text span:nth-child(9) {
  animation-delay: 0.27s;
}
.mast__text span:nth-child(10) {
  animation-delay: 0.3s;
}
.mast__text span:nth-child(11) {
  animation-delay: 0.33s;
}
.mast__text span:nth-child(12) {
  animation-delay: 0.36s;
}
.mast__text span:nth-child(13) {
  animation-delay: 0.39s;
}
.mast__text span:nth-child(14) {
  animation-delay: 0.42s;
}
.mast__text span:nth-child(15) {
  animation-delay: 0.45s;
}
.mast__text span:nth-child(16) {
  animation-delay: 0.48s;
}
.mast__text span:nth-child(17) {
  animation-delay: 0.51s;
}
.mast__text span:nth-child(18) {
  animation-delay: 0.54s;
}
.mast__text span:nth-child(19) {
  animation-delay: 0.57s;
}
.mast__text span:nth-child(20) {
  animation-delay: 0.6s;
}
.mast__text span:nth-child(21) {
  animation-delay: 0.63s;
}
.mast__text span:nth-child(22) {
  animation-delay: 0.66s;
}
.mast__text span:nth-child(23) {
  animation-delay: 0.69s;
}
.mast__text span:nth-child(24) {
  animation-delay: 0.72s;
}
.mast__text span:nth-child(25) {
  animation-delay: 0.75s;
}
.mast__text span:nth-child(26) {
  animation-delay: 0.78s;
}
.mast__text span:nth-child(27) {
  animation-delay: 0.81s;
}
.mast__text span:nth-child(28) {
  animation-delay: 0.84s;
}
.mast__text span:nth-child(29) {
  animation-delay: 0.87s;
}
.mast__text span:nth-child(30) {
  animation-delay: 0.9s;
}
.mast__text span:nth-child(31) {
  animation-delay: 0.93s;
}
.mast__text span:nth-child(32) {
  animation-delay: 0.96s;
}
.mast__text span:nth-child(33) {
  animation-delay: 0.99s;
}
.mast__text span:nth-child(34) {
  animation-delay: 1.02s;
}
.mast__text span:nth-child(35) {
  animation-delay: 1.05s;
}
.mast__text span:nth-child(36) {
  animation-delay: 1.08s;
}
.mast__text span:nth-child(37) {
  animation-delay: 1.11s;
}
.mast__text span:nth-child(38) {
  animation-delay: 1.14s;
}
.mast__text span:nth-child(39) {
  animation-delay: 1.17s;
}
.mast__text span:nth-child(40) {
  animation-delay: 1.2s;
}
.mast__text span:nth-child(41) {
  animation-delay: 1.23s;
}
.mast__text span:nth-child(42) {
  animation-delay: 1.26s;
}
.mast__text span:nth-child(43) {
  animation-delay: 1.29s;
}
.mast__text span:nth-child(44) {
  animation-delay: 1.32s;
}
.mast__text span:nth-child(45) {
  animation-delay: 1.35s;
}
.mast__text span:nth-child(46) {
  animation-delay: 1.38s;
}
.mast__text span:nth-child(47) {
  animation-delay: 1.41s;
}
.mast__text span:nth-child(48) {
  animation-delay: 1.44s;
}
.mast__text span:nth-child(49) {
  animation-delay: 1.47s;
}
.mast__text span:nth-child(50) {
  animation-delay: 1.5s;
}
.mast__text span:nth-child(51) {
  animation-delay: 1.53s;
}
.mast__text span:nth-child(52) {
  animation-delay: 1.56s;
}
.mast__text span:nth-child(53) {
  animation-delay: 1.59s;
}
.mast__text span:nth-child(54) {
  animation-delay: 1.62s;
}
.mast__text span:nth-child(55) {
  animation-delay: 1.65s;
}
.mast__text span:nth-child(56) {
  animation-delay: 1.68s;
}
.mast__text span:nth-child(57) {
  animation-delay: 1.71s;
}
.mast__text span:nth-child(58) {
  animation-delay: 1.74s;
}
.mast__text span:nth-child(59) {
  animation-delay: 1.77s;
}
.mast__text span:nth-child(60) {
  animation-delay: 1.8s;
}
.mast__text span:nth-child(61) {
  animation-delay: 1.83s;
}
.mast__text span:nth-child(62) {
  animation-delay: 1.86s;
}
.mast__text span:nth-child(63) {
  animation-delay: 1.89s;
}
.mast__text span:nth-child(64) {
  animation-delay: 1.92s;
}
.mast__text span:nth-child(65) {
  animation-delay: 1.95s;
}
.mast__text span:nth-child(66) {
  animation-delay: 1.98s;
}
.mast__text span:nth-child(67) {
  animation-delay: 2.01s;
}
.mast__text span:nth-child(68) {
  animation-delay: 2.04s;
}
.mast__text span:nth-child(69) {
  animation-delay: 2.07s;
}
.mast__text span:nth-child(70) {
  animation-delay: 2.1s;
}
.mast__text span:nth-child(71) {
  animation-delay: 2.13s;
}
.mast__text span:nth-child(72) {
  animation-delay: 2.16s;
}
.mast__text span:nth-child(73) {
  animation-delay: 2.19s;
}
.mast__text span:nth-child(74) {
  animation-delay: 2.22s;
}
.mast__text span:nth-child(75) {
  animation-delay: 2.25s;
}
.mast__text span:nth-child(76) {
  animation-delay: 2.28s;
}
.mast__text span:nth-child(77) {
  animation-delay: 2.31s;
}
.mast__text span:nth-child(78) {
  animation-delay: 2.34s;
}
.mast__text span:nth-child(79) {
  animation-delay: 2.37s;
}
.mast__text span:nth-child(80) {
  animation-delay: 2.4s;
}
.mast__text span:nth-child(81) {
  animation-delay: 2.43s;
}
.mast__text span:nth-child(82) {
  animation-delay: 2.46s;
}
.mast__text span:nth-child(83) {
  animation-delay: 2.49s;
}
.mast__text span:nth-child(84) {
  animation-delay: 2.52s;
}
.mast__text span:nth-child(85) {
  animation-delay: 2.55s;
}
.mast__text span:nth-child(86) {
  animation-delay: 2.58s;
}
.mast__text span:nth-child(87) {
  animation-delay: 2.61s;
}
.mast__text span:nth-child(88) {
  animation-delay: 2.64s;
}
.mast__text span:nth-child(89) {
  animation-delay: 2.67s;
}
.mast__text span:nth-child(90) {
  animation-delay: 2.7s;
}
.mast__text span:nth-child(91) {
  animation-delay: 2.73s;
}
.mast__text span:nth-child(92) {
  animation-delay: 2.76s;
}
.mast__text span:nth-child(93) {
  animation-delay: 2.79s;
}
.mast__text span:nth-child(94) {
  animation-delay: 2.82s;
}
.mast__text span:nth-child(95) {
  animation-delay: 2.85s;
}
.mast__text span:nth-child(96) {
  animation-delay: 2.88s;
}
.mast__text span:nth-child(97) {
  animation-delay: 2.91s;
}
.mast__text span:nth-child(98) {
  animation-delay: 2.94s;
}
.mast__text span:nth-child(99) {
  animation-delay: 2.97s;
}
.mast__text span:nth-child(100) {
  animation-delay: 3s;
}
.mast__text span:nth-child(101) {
  animation-delay: 3.03s;
}
.mast__text span:nth-child(102) {
  animation-delay: 3.06s;
}
.mast__text span:nth-child(103) {
  animation-delay: 3.09s;
}
.mast__text span:nth-child(104) {
  animation-delay: 3.12s;
}
.mast__text span:nth-child(105) {
  animation-delay: 3.15s;
}
.mast__text span:nth-child(106) {
  animation-delay: 3.18s;
}
.mast__text span:nth-child(107) {
  animation-delay: 3.21s;
}
.mast__text span:nth-child(108) {
  animation-delay: 3.24s;
}
.mast__text span:nth-child(109) {
  animation-delay: 3.27s;
}
.mast__text span:nth-child(110) {
  animation-delay: 3.3s;
}
.mast__text span:nth-child(111) {
  animation-delay: 3.33s;
}
.mast__text span:nth-child(112) {
  animation-delay: 3.36s;
}
.mast__text span:nth-child(113) {
  animation-delay: 3.39s;
}
.mast__text span:nth-child(114) {
  animation-delay: 3.42s;
}
.mast__text span:nth-child(115) {
  animation-delay: 3.45s;
}
.mast__text span:nth-child(116) {
  animation-delay: 3.48s;
}
.mast__text span:nth-child(117) {
  animation-delay: 3.51s;
}
.mast__text span:nth-child(118) {
  animation-delay: 3.54s;
}
.mast__text span:nth-child(119) {
  animation-delay: 3.57s;
}
.mast__text span:nth-child(120) {
  animation-delay: 3.6s;
}
.mast__text span:nth-child(121) {
  animation-delay: 3.63s;
}
.mast__text span:nth-child(122) {
  animation-delay: 3.66s;
}
.mast__text span:nth-child(123) {
  animation-delay: 3.69s;
}
.mast__text span:nth-child(124) {
  animation-delay: 3.72s;
}
.mast__text span:nth-child(125) {
  animation-delay: 3.75s;
}
.mast__text span:nth-child(126) {
  animation-delay: 3.78s;
}
.mast__text span:nth-child(127) {
  animation-delay: 3.81s;
}
.mast__text span:nth-child(128) {
  animation-delay: 3.84s;
}
.mast__text span:nth-child(129) {
  animation-delay: 3.87s;
}
.mast__text span:nth-child(130) {
  animation-delay: 3.9s;
}
.mast__text span:nth-child(131) {
  animation-delay: 3.93s;
}
.mast__text span:nth-child(132) {
  animation-delay: 3.96s;
}
.mast__text span:nth-child(133) {
  animation-delay: 3.99s;
}
.mast__text span:nth-child(134) {
  animation-delay: 4.02s;
}
.mast__text span:nth-child(135) {
  animation-delay: 4.05s;
}
.mast__text span:nth-child(136) {
  animation-delay: 4.08s;
}
.mast__text span:nth-child(137) {
  animation-delay: 4.11s;
}
.mast__text span:nth-child(138) {
  animation-delay: 4.14s;
}
.mast__text span:nth-child(139) {
  animation-delay: 4.17s;
}
.mast__text span:nth-child(140) {
  animation-delay: 4.2s;
}
.mast__text span:nth-child(141) {
  animation-delay: 4.23s;
}
.mast__text span:nth-child(142) {
  animation-delay: 4.26s;
}
.mast__text span:nth-child(143) {
  animation-delay: 4.29s;
}
.mast__text span:nth-child(144) {
  animation-delay: 4.32s;
}
.mast__text span:nth-child(145) {
  animation-delay: 4.35s;
}
.mast__text span:nth-child(146) {
  animation-delay: 4.38s;
}
.mast__text span:nth-child(147) {
  animation-delay: 4.41s;
}
.mast__text span:nth-child(148) {
  animation-delay: 4.44s;
}
.mast__text span:nth-child(149) {
  animation-delay: 4.47s;
}
.mast__text span:nth-child(150) {
  animation-delay: 4.5s;
}
.mast__text span:nth-child(151) {
  animation-delay: 4.53s;
}
.mast__text span:nth-child(152) {
  animation-delay: 4.56s;
}
.mast__text span:nth-child(153) {
  animation-delay: 4.59s;
}
.mast__text span:nth-child(154) {
  animation-delay: 4.62s;
}
.mast__text span:nth-child(155) {
  animation-delay: 4.65s;
}
.mast__text span:nth-child(156) {
  animation-delay: 4.68s;
}
.mast__text span:nth-child(157) {
  animation-delay: 4.71s;
}
.mast__text span:nth-child(158) {
  animation-delay: 4.74s;
}
.mast__text span:nth-child(159) {
  animation-delay: 4.77s;
}
.mast__text span:nth-child(160) {
  animation-delay: 4.8s;
}
.mast__text span:nth-child(161) {
  animation-delay: 4.83s;
}
.mast__text span:nth-child(162) {
  animation-delay: 4.86s;
}
.mast__text span:nth-child(163) {
  animation-delay: 4.89s;
}
.mast__text span:nth-child(164) {
  animation-delay: 4.92s;
}
.mast__text span:nth-child(165) {
  animation-delay: 4.95s;
}
.mast__text span:nth-child(166) {
  animation-delay: 4.98s;
}
.mast__text span:nth-child(167) {
  animation-delay: 5.01s;
}
.mast__text span:nth-child(168) {
  animation-delay: 5.04s;
}
.mast__text span:nth-child(169) {
  animation-delay: 5.07s;
}
.mast__text span:nth-child(170) {
  animation-delay: 5.1s;
}
.mast__text span:nth-child(171) {
  animation-delay: 5.13s;
}
.mast__text span:nth-child(172) {
  animation-delay: 5.16s;
}
.mast__text span:nth-child(173) {
  animation-delay: 5.19s;
}
.mast__text span:nth-child(174) {
  animation-delay: 5.22s;
}
.mast__text span:nth-child(175) {
  animation-delay: 5.25s;
}
.mast__text span:nth-child(176) {
  animation-delay: 5.28s;
}
.mast__text span:nth-child(177) {
  animation-delay: 5.31s;
}
.mast__text span:nth-child(178) {
  animation-delay: 5.34s;
}
.mast__text span:nth-child(179) {
  animation-delay: 5.37s;
}
.mast__text span:nth-child(180) {
  animation-delay: 5.4s;
}
.mast__text span:nth-child(181) {
  animation-delay: 5.43s;
}
.mast__text span:nth-child(182) {
  animation-delay: 5.46s;
}
.mast__text span:nth-child(183) {
  animation-delay: 5.49s;
}
.mast__text span:nth-child(184) {
  animation-delay: 5.52s;
}
.mast__text span:nth-child(185) {
  animation-delay: 5.55s;
}
.mast__text span:nth-child(186) {
  animation-delay: 5.58s;
}
.mast__text span:nth-child(187) {
  animation-delay: 5.61s;
}
.mast__text span:nth-child(188) {
  animation-delay: 5.64s;
}
.mast__text span:nth-child(189) {
  animation-delay: 5.67s;
}
.mast__text span:nth-child(190) {
  animation-delay: 5.7s;
}
.mast__text span:nth-child(191) {
  animation-delay: 5.73s;
}
.mast__text span:nth-child(192) {
  animation-delay: 5.76s;
}
.mast__text span:nth-child(193) {
  animation-delay: 5.79s;
}
.mast__text span:nth-child(194) {
  animation-delay: 5.82s;
}
.mast__text span:nth-child(195) {
  animation-delay: 5.85s;
}
.mast__text span:nth-child(196) {
  animation-delay: 5.88s;
}
.mast__text span:nth-child(197) {
  animation-delay: 5.91s;
}
.mast__text span:nth-child(198) {
  animation-delay: 5.94s;
}
.mast__text span:nth-child(199) {
  animation-delay: 5.97s;
}
.mast__text span:nth-child(200) {
  animation-delay: 6s;
}
.mast__text span:nth-child(201) {
  animation-delay: 6.03s;
}
.mast__text span:nth-child(202) {
  animation-delay: 6.06s;
}
.mast__text span:nth-child(203) {
  animation-delay: 6.09s;
}
.mast__text span:nth-child(204) {
  animation-delay: 6.12s;
}
.mast__text span:nth-child(205) {
  animation-delay: 6.15s;
}
.mast__text span:nth-child(206) {
  animation-delay: 6.18s;
}
.mast__text span:nth-child(207) {
  animation-delay: 6.21s;
}
.mast__text span:nth-child(208) {
  animation-delay: 6.24s;
}
.mast__text span:nth-child(209) {
  animation-delay: 6.27s;
}
.mast__text span:nth-child(210) {
  animation-delay: 6.3s;
}
.mast__text span:nth-child(211) {
  animation-delay: 6.33s;
}
.mast__text span:nth-child(212) {
  animation-delay: 6.36s;
}
.mast__text span:nth-child(213) {
  animation-delay: 6.39s;
}
.mast__text span:nth-child(214) {
  animation-delay: 6.42s;
}
.mast__text span:nth-child(215) {
  animation-delay: 6.45s;
}
.mast__text span:nth-child(216) {
  animation-delay: 6.48s;
}
.mast__text span:nth-child(217) {
  animation-delay: 6.51s;
}
.mast__text span:nth-child(218) {
  animation-delay: 6.54s;
}
.mast__text span:nth-child(219) {
  animation-delay: 6.57s;
}
.mast__text span:nth-child(220) {
  animation-delay: 6.6s;
}
.mast__text span:nth-child(221) {
  animation-delay: 6.63s;
}
.mast__text span:nth-child(222) {
  animation-delay: 6.66s;
}
.mast__text span:nth-child(223) {
  animation-delay: 6.69s;
}
.mast__text span:nth-child(224) {
  animation-delay: 6.72s;
}
.mast__text span:nth-child(225) {
  animation-delay: 6.75s;
}
.mast__text span:nth-child(226) {
  animation-delay: 6.78s;
}
.mast__text span:nth-child(227) {
  animation-delay: 6.81s;
}
.mast__text span:nth-child(228) {
  animation-delay: 6.84s;
}
.mast__text span:nth-child(229) {
  animation-delay: 6.87s;
}
.mast__text span:nth-child(230) {
  animation-delay: 6.9s;
}
.mast__text span:nth-child(231) {
  animation-delay: 6.93s;
}
.mast__text span:nth-child(232) {
  animation-delay: 6.96s;
}
.mast__text span:nth-child(233) {
  animation-delay: 6.99s;
}
.mast__text span:nth-child(234) {
  animation-delay: 7.02s;
}
.mast__text span:nth-child(235) {
  animation-delay: 7.05s;
}
.mast__text span:nth-child(236) {
  animation-delay: 7.08s;
}
.mast__text span:nth-child(237) {
  animation-delay: 7.11s;
}
.mast__text span:nth-child(238) {
  animation-delay: 7.14s;
}
.mast__text span:nth-child(239) {
  animation-delay: 7.17s;
}
.mast__text span:nth-child(240) {
  animation-delay: 7.2s;
}
.mast__text span:nth-child(241) {
  animation-delay: 7.23s;
}
.mast__text span:nth-child(242) {
  animation-delay: 7.26s;
}
.mast__text span:nth-child(243) {
  animation-delay: 7.29s;
}
.mast__text span:nth-child(244) {
  animation-delay: 7.32s;
}
.mast__text span:nth-child(245) {
  animation-delay: 7.35s;
}
.mast__text span:nth-child(246) {
  animation-delay: 7.38s;
}
.mast__text span:nth-child(247) {
  animation-delay: 7.41s;
}
.mast__text span:nth-child(248) {
  animation-delay: 7.44s;
}
.mast__text span:nth-child(249) {
  animation-delay: 7.47s;
}
.mast__text span:nth-child(250) {
  animation-delay: 7.5s;
}
.mast__text span:nth-child(251) {
  animation-delay: 7.53s;
}
.mast__text span:nth-child(252) {
  animation-delay: 7.56s;
}
.mast__text span:nth-child(253) {
  animation-delay: 7.59s;
}
.mast__text span:nth-child(254) {
  animation-delay: 7.62s;
}
.mast__text span:nth-child(255) {
  animation-delay: 7.65s;
}
.mast__text span:nth-child(256) {
  animation-delay: 7.68s;
}
.mast__text span:nth-child(257) {
  animation-delay: 7.71s;
}
.mast__text span:nth-child(258) {
  animation-delay: 7.74s;
}
.mast__text span:nth-child(259) {
  animation-delay: 7.77s;
}
.mast__text span:nth-child(260) {
  animation-delay: 7.8s;
}
.mast__text span:nth-child(261) {
  animation-delay: 7.83s;
}
.mast__text span:nth-child(262) {
  animation-delay: 7.86s;
}
.mast__text span:nth-child(263) {
  animation-delay: 7.89s;
}
.mast__text span:nth-child(264) {
  animation-delay: 7.92s;
}
.mast__text span:nth-child(265) {
  animation-delay: 7.95s;
}
.mast__text span:nth-child(266) {
  animation-delay: 7.98s;
}
.mast__text span:nth-child(267) {
  animation-delay: 8.01s;
}
.mast__text span:nth-child(268) {
  animation-delay: 8.04s;
}
.mast__text span:nth-child(269) {
  animation-delay: 8.07s;
}
.mast__text span:nth-child(270) {
  animation-delay: 8.1s;
}
.mast__text span:nth-child(271) {
  animation-delay: 8.13s;
}
.mast__text span:nth-child(272) {
  animation-delay: 8.16s;
}
.mast__text span:nth-child(273) {
  animation-delay: 8.19s;
}
.mast__text span:nth-child(274) {
  animation-delay: 8.22s;
}
.mast__text span:nth-child(275) {
  animation-delay: 8.25s;
}
.mast__text span:nth-child(276) {
  animation-delay: 8.28s;
}
.mast__text span:nth-child(277) {
  animation-delay: 8.31s;
}
.mast__text span:nth-child(278) {
  animation-delay: 8.34s;
}
.mast__text span:nth-child(279) {
  animation-delay: 8.37s;
}
.mast__text span:nth-child(280) {
  animation-delay: 8.4s;
}
.mast__text span:nth-child(281) {
  animation-delay: 8.43s;
}
.mast__text span:nth-child(282) {
  animation-delay: 8.46s;
}
.mast__text span:nth-child(283) {
  animation-delay: 8.49s;
}
.mast__text span:nth-child(284) {
  animation-delay: 8.52s;
}
.mast__text span:nth-child(285) {
  animation-delay: 8.55s;
}
.mast__text span:nth-child(286) {
  animation-delay: 8.58s;
}
.mast__text span:nth-child(287) {
  animation-delay: 8.61s;
}
.mast__text span:nth-child(288) {
  animation-delay: 8.64s;
}
.mast__text span:nth-child(289) {
  animation-delay: 8.67s;
}
.mast__text span:nth-child(290) {
  animation-delay: 8.7s;
}
.mast__text span:nth-child(291) {
  animation-delay: 8.73s;
}
.mast__text span:nth-child(292) {
  animation-delay: 8.76s;
}
.mast__text span:nth-child(293) {
  animation-delay: 8.79s;
}
.mast__text span:nth-child(294) {
  animation-delay: 8.82s;
}
.mast__text span:nth-child(295) {
  animation-delay: 8.85s;
}
.mast__text span:nth-child(296) {
  animation-delay: 8.88s;
}
.mast__text span:nth-child(297) {
  animation-delay: 8.91s;
}
.mast__text span:nth-child(298) {
  animation-delay: 8.94s;
}
.mast__text span:nth-child(299) {
  animation-delay: 8.97s;
}
.mast__text span:nth-child(300) {
  animation-delay: 9s;
}

@keyframes letter-glow {
  0% {
    color: #dfa372;
    transform: translate(0, 1000%);
    opacity: 0;
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.1);
  }
  66% {
    color: #d88b4c;
    transform: translate(0, 500%);
    opacity: 1;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
  }
  77% {
    transform: translate(0, 100%);
    opacity: 1;
  }
  100% {
    transform: translate(0, 50%);
    opacity: 0.9;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
  }
}
.footer {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid #3a3a3a;
  padding: 1.125rem 0;
}
.footer__social {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.625rem;
}
.footer__item {
  display: flex;
  column-gap: 0.5rem;
  transition: color 0.3s ease;
  font-size: 1.125rem;
}
@media (max-width: 20em) {
  .footer__item {
    font-size: 0.875rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .footer__item {
    font-size: calc(
                0.875rem + 4 * ((100vw - 20rem) / 960)
            );
  }
}
@media (any-hover: hover) {
  .footer__item:hover {
    transition: color 0.3s ease;
    color: #fe6700;
  }
}
.footer__copy {
  text-align: center;
  font-size: 0.875rem;
}
@media (max-width: 20em) {
  .footer__copy {
    font-size: 0.75rem;
  }
}
@media (min-width: 20em) and (max-width: 80em) {
  .footer__copy {
    font-size: calc(
                0.75rem + 2 * ((100vw - 20rem) / 960)
            );
  }
}