@import url('./interactive.css');
@import url('./header.css');
@import url('./main.css');
@import url('./footer.css');

html {
  font-family: 'Rubik', 'Helvetica', 'sans-serif';
  height: 100%;
}

body {
  background-color: var(--color-neutral-light);
  background-image: url('../images/background.svg');
  background-position: center center;
  margin: 0;
  scroll-behavior: smooth;
}

.container,
.main__content-wrapper {
  box-sizing: border-box;
  padding-left: 60px;
  padding-right: 60px;
  width: 100%;
  max-width: 1760px;
}

@media (max-width: 1500px) {
  .container,
  .main__content-wrapper {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 800px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .main__content-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

.main-navigation {
  position: fixed;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  background: linear-gradient(to right, var(--color-brand-dark) 50%, var(--color-brand-light) 50%);
  width: 100%;
  height: 84px;
  top: 0;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .4);
  z-index: 1;
}

.main-navigation__container {
  position: relative;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  background-color: var(--color-brand-light);
  background-image:
    url('../images/main-navigation-compilation_1.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: 350px center, right center;
  background-size: 400px;
  padding-left: 0;
  padding-right: 0;
  height: 84px;
}

@media (max-width: 800px) {
  .main-navigation__container {
    background-color: var(--color-brand-dark);
    background-image: none;
  }
}

.main-navigation__logotype-container {
  display: flex;
  align-items: center;
  background: linear-gradient(to right, var(--color-brand-dark) calc(100% - 72px), transparent calc(100% - 72px)), url('../images/main-navigation-compilation_2.svg');
  background-position: right center;
  background-repeat: no-repeat;
  padding-left: 60px;
  padding-right: 140px;
}

@media (max-width: 1500px) {
  .main-navigation__logotype-container {
    padding-left: 40px;
  }
}

@media (max-width: 800px) {
  .main-navigation__logotype-container {
    padding-left: 20px;
    padding-right: 0;
  }
}

.main-navigation__logotype {
  display: block;
  width: 144px;
}

.main-navigation__list {
  display: flex;
  list-style-type: none;
  padding-left: 0;
  padding-right: 120px;
  margin: 0;
}

@media (max-width: 1500px) {
  .main-navigation__list {
    display: none;
    padding-right: 0;
  }

  .main-navigation__list.main-navigation-list_showed {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 84px;
    right: 0;
  }
}

@media (min-width: 801px) {
  .main-navigation__list::after {
    position: absolute;
    display: block;
    background-image: url('../images/main-navigation-compilation_3.svg');
    background-repeat: no-repeat;
    background-position: left center;
    content: '';
    width: 231px;
    height: 100%;
    right: -120px;
    top: 0;
  }
}

.main-navigation__button-burger {
  transition: stroke .1s;
}

.main-navigation__button-burger,
.main-navigation__item {
  clip-path: polygon(82px 0, 100% 0, calc(100% - 82px) 100%, 0 100%);
}

@media (max-width: 1500px) {
  .button-burger_actived,
  .main-navigation__button-burger:focus
  .main-navigation__button-burger:active {
    clip-path: unset !important;
  }
}

.main-navigation__item {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 24px;
  line-height: 84px;
  margin-right: -70px;
}

@media (max-width: 1500px) {
  .main-navigation__item {
    clip-path: unset;
    margin-right: 0;
  }
}

.main-navigation__button-burger,
.main-navigation__link {
  clip-path: polygon(82px 0, 100% 0, calc(100% - 82px) 100%, 0 100%);
  background-color: var(--color-brand-primary);
  padding-left: 82px;
  padding-right: 82px;
  transition: background-color .1s, color .1s;
}

@media (max-width: 1500px) {
  .main-navigation__link {
    clip-path: unset;
    padding-left: 40px;
    padding-right: 40px;
  }
}


@media (max-width: 800px) {
  .main-navigation__link {
    clip-path: none !important;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.main-navigation__link {
  display: inline-block;
  text-decoration: none;
  color: var(--color-brand-light);
  width: 100%;
  height: 100%;
}

.main-navigation__button-burger:hover {
  stroke: var(--color-brand-accent-light-hover);
}

.main-navigation__button-burger:hover,
.main-navigation__link:hover {
  background-color: var(--color-brand-accent-primary-hover);
}

.main-navigation__link:hover {
  color: var(--color-brand-accent-light-hover);
}

.main-navigation__button-burger {
  display: none;
}

.button-burger__icon {
  stroke: var(--color-brand-light);
  width: 64px;
  height: 64px;
}

@media (max-width: 1500px) {
  .main-navigation__button-burger {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
  }
}