* {
  margin: 0;

  padding: 0;

  transition: 0.15s all;
}

@font-face {
  font-family: sfns_f;

  src: url(../fonts/sfns-display-bold.ttf);
}

.layout {
  display: flex;

  flex-direction: column;

  min-height: 100vh;
}

.layout__strip {
  margin-bottom: 8px;
}

.header__strip {
  background-color: rgb(60, 179, 113);

  height: 8px;

  position: fixed;

  top: 0;

  width: 100%;

  z-index: 40;
}

.layout__header {
  --header-height: 96px;

  height: var(--header-height);
}

.header {
  display: flex;

  position: fixed;

  width: 100%;

  background-color: rgb(33, 33, 33);

  color: rgb(255, 255, 255);

  z-index: 30;

  margin-top: 8px;
}

.header a {
  color: rgb(255, 255, 255);

  text-decoration: none;
}

.header--scrolled {
  margin-top: 0;

  background-color: rgba(44, 44, 44, 0.995);

  transition: 0.1s all;
}

.navigation {
  max-width: 1440px;

  display: flex;

  flex-grow: 1;

  padding: 16px 0;

  position: relative;

  justify-content: space-between;

  align-items: center;

  margin-inline: auto;

  gap: 65px;
}

.navigation a {
  display: flex;

  align-items: center;
}

.navigation-logo {
  .logo img {
    margin-right: 5px;
  }
}

.navigation-logo a {
  padding: 0.5em;

  margin: -0.5em;

  font-size: 48px;
}

.button__opener__container {
  display: none;
}

.button__opener {
  display: flex;

  align-items: center;
}

.navigation__list ul {
  display: flex;

  list-style: none;

  align-items: center;

  gap: 65px;

  font-size: 20px;

  padding-left: 0;

  line-height: 1.22;
}

.list li svg {
  width: 25px;

  height: 25px;
}

.list li svg path {
  padding: 1em;

  margin: -1em;
}

.list li:hover path {
  stroke: rgb(60, 179, 113);

  transition: all 0.25s;
}

.list a {
  padding: 1em;

  margin: -1em;
}

.list a:hover {
  color: rgb(60, 179, 113);

  transition: all 0.2s;
}

.list a:not(:hover) {
  color: rgb(255, 255, 255);

  transition: all 0.2s;
}

.list li:not(:hover) path {
  stroke: rgb(255, 255, 255);

  transition: all 0.25s;
}

body {
  font-family: sfns_f, sans-serif;

  color: azure;

  background-color: rgb(33, 33, 33);

  margin: 0;

  min-height: 100vh;

  position: relative;

  width: 100%;
}

.logo {
  font-size: 55px;

  font-weight: 700;
}

.navigation-logo a:hover {
  color: rgb(60, 179, 113);

  transition: 0.2s ease;
}

.navigation-logo a:not(:hover) {
  color: rgb(255, 255, 255);

  transition: 0.2s ease;
}

.layout__main {
  flex: 1;

  width: 100%;
}

.main__content {
  display: flex;

  flex-direction: column;

  flex-grow: 1;

  margin-bottom: auto;

  margin-inline: auto;

  position: relative;

  max-width: 1440px;

  padding: 60px 0 0;
}

.main__content h1 {
  font-size: 44px;

  margin-bottom: 150px;
}

.main-description__container {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

  margin-bottom: 150px;
}

.main-description__container h3 {
  font-size: 24px;

  margin-bottom: 20px;
}

.main-description__container p {
  font-size: 16px;

  color: rgb(156, 156, 156);
}

.description-first,
.description-second,
.description-third,
.description-fourth {
  display: flex;

  background-color: rgb(40, 40, 40);

  border-radius: 2px;

  gap: 10px;
}

.stick {
  min-width: 10px;

  height: 100%;

  background-color: rgb(60, 179, 113);
}

.description-inside__container {
  padding: 5px 5px 5px 0;
}

.main__text span {
  color: rgb(60, 179, 113);

  font-size: 54px;
}

.launcher-view__container {
  display: flex;

  margin: 0 auto 150px;

  border: 3px solid;

  border-color: rgb(56, 56, 56);
}

.launcher-view__container__image-medium {
  display: none;
}

.launcher-view__container__image-small {
  display: none;
}

.launcher-description__conatainer {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap:40px;
}

.launcher-description__conatainer div{
  border: 3px solid;

  border-color: rgb(66, 66, 66);

  background-color: rgb(40, 40, 40);

  border-radius: 15px;

  margin-bottom: 90px;
}

.launcher-description__conatainer h2 {
  font-size: 36px;

  padding: 36px;
}

.launcher-description__conatainer p {
  font-size: 24px;

  color: rgb(212, 212, 212);
}

.launcher-description__conatainer ul {
  padding: 0 36px 36px 36px;

  display: flex;

  flex-direction: column;

  gap: 8px;
}

.launcher-description__conatainer li {
  list-style: none;

  color: rgb(212, 212, 212);
}

.video__container {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  margin-bottom: 90px;

  border: 3px solid;

  border-color: rgb(66, 66, 66);

  border-radius: 15px;

  background-color: rgb(40, 40, 40);
}

.frame {
  border: 3px solid;

  border-color: rgb(182, 32, 32);

  border-radius: 15px;

  background-color: rgb(40, 40, 40);

  width: 640px;

  height: 360px;

  align-content: center;
}

.frame p {
  display: flex;

  justify-content: center;

  font-size: 36px;
}

.iframe__container, .text__container {
  padding: 36px;
}

.iframe__container {
  display: flex;

  margin: 0 auto;
}

.iframe__container iframe {
  border-radius: 7px;

  border: 2px solid;

  border-color: rgb(209, 11, 11);
}

.text__container {
  display: flex;

  flex-direction: column;

  margin: 0 auto;
}

.text__container h2 {
  font-size: 32px;

  margin-bottom: 30px;
}

.text__container h2 span {
  color: rgb(60, 179, 113);
}

.text__container ul {
  display: flex;

  flex-direction: column;

  font-size: 20px;

  /* margin: 0 0 0 40px; */

  list-style: none;

  gap: 20px;

  color: darkgrey;
}

.text__container li {
  width: 100%;

  padding: 5px;
}

.main-strip {
  width: 100%;

  height: 3px;

  background-color: rgb(99, 99, 99);
}

.main-strip__container {
  margin-bottom: 120px;
}

.main-socials__container {
  display: flex;

  justify-content: space-between;

  gap: 50px;

  margin-bottom: 90px;

  background-color: rgb(40, 40, 40);

  border-radius: 15px;

  border: 3px solid;

  border-color: rgb(66, 66, 66);
}

.main-socials__container h2 {
  font-size: 32px;

  margin-bottom: 10px;
}

.socials, .telegram-bot__container {
  padding: 36px;
}

.socials-buttons__container,
.telegram-bot-button__container {
  margin: 30px 0 0;

  display: flex;

  align-items: center;

  gap: 40px;
}

svg {
  width: 50px;

  height: 50px;
}

.socials-description,
.telegram-bot-description {
  font-size: 18px;

  color: rgb(156, 156, 156);
}

.socials-buttons__container path {
  fill: rgb(99, 99, 99);
}

.socials-button-discord :hover path {
  fill: #5865f2;
}

.socials-button-telegram :hover path {
  fill: #27a7e7;
}

.socials-button-vk :hover path {
  fill: #0077ff;
}

path {
  transition: all 0.2s;
}

.telegram-bot-title span {
  color: #27a7e7;
}

.telegram-bot-button__container {
  display: inline-flex;
}

.telegram-bot-button__container a {
  padding: 10px 20px;
}

.telegram-bot-button__container a {
  background-color: rgb(56, 56, 56);

  display: flex;

  flex-direction: row;

  align-items: center;

  border-radius: 5px;
}

.telegram-bot-button__container img {
  margin-right: 10px;
}

.telegram-bot-button__container span {
  font-size: 40px;
}

.telegram-bot-button__container a:hover {
  color: rgb(60, 179, 113);

  background-color: rgb(47, 47, 47);

  transition: 0.15s ease-in-out;

  border-radius: 8px;
}

.footer {
  position: relative;

  width: 100%;

  background: rgb(40, 40, 40);
}

.socials-buttons__container a,
.telegram-bot-button__container a {
  color: rgb(255, 255, 255);

  text-decoration: none;
}

.footer__container {
  display: flex;

  max-width: 1440px;

  padding: 48px 0;

  justify-content: space-between;

  position: relative;

  margin-inline: auto;
}

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: rgb(45, 45, 45);
}

::-webkit-scrollbar-thumb {
  background: rgb(56, 56, 56);
}