body {
    background: #f1f1f1;
  }

  body a {
    text-decoration: none;
  }

  p {
    text-align: justify !important;
  }

  .title {
    display: block;
    background-image: linear-gradient(#ccc, #eee, #ccc);

  }

  .title h1 {
    color: #000;
    font-family: 'Audiowide', cursive !important;
    font-size: clamp(1.5rem, 2.25vw, 2.5rem);
    text-shadow: white 1px 1px 1px;
    padding: 0 0 0 8px;
  }

  /* HEADER */
  header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 48px 48px;
    flex-wrap: nowrap;
    gap: 0px;
    padding: 0;
    margin: 0;
    /* --- */
    background-image: linear-gradient(#012, #034, #012);
    color: #ccc;
    font-family: 'Audiowide', cursive;
  }

  .hdr1 {
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: clamp(1.2rem, 2vw, 2rem);
    padding-left: 32px;
  }

  .hdr2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
  }

  .hdr3 {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-direction: row-reverse;
    font-size: clamp(0rem, 2vw, 2rem);
    padding-right: 32px;
  }

  .hdr3 .icon {
    width: 32px;
  }

  .hdr4 {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding-left: 16px;
  }

  .hdr4 .logo {
    width: auto;
    height: 48px;
    margin-bottom: 8px;
    margin-left: 14px;
  }

  .hdr5 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    color: #078;
  }

  .hdr6 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 32px;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    color: #078;
  }

  .hdr6 span {
    margin-right: 34px;
  }


  /* --- 600 --- */
  @media (max-width: 600px) {
    header {
      grid-template-columns: 25% 55% 20% !important;
      grid-template-rows: 36px 36px !important;
    }

    .hdr1 {
      padding-left: 12px !important;
      flex-direction: row !important
    }

    .hdr2 {
      justify-content: center !important;
    }

    .hdr3 {
      justify-content: center !important;
      padding-right: 10px !important;
      gap: 8px;
    }

    .hdr4 .logo {
      height: 24px;
      margin: 0px;
    }

    .hdr5 {
      justify-content: left !important;
      margin-left: 55px !important;
    }

    .ftr2 {
      justify-content: left !important;
      gap: 0 !important;
      z-index: 2 !important;
    }

    .btt,
    .mob-btn {
      bottom: 18px !important;
      z-index: 1 !important;
    }

    .btt {
      right: 52px !important;
    }

    .mob-btn {
      right: 2px !important;
    }

    .container {
      padding: 0.01em 8px;
    }

  }

  /* --601---992-- */
  @media (max-width:992px) and (min-width:601px) {
    header {
      grid-template-rows: 42px 42px !important;
    }

    .hdr3 {
      gap: 24px !important;
      padding-right: 16px !important;
    }

    .hdr4 .logo {
      height: 30px !important;
      margin: 0px;
      margin-left: 12px;
    }

    .hdr6 {
      justify-content: flex-end !important;
      padding-right: 36px !important;
    }

    footer {
      display: grid;
      grid-template-columns: 35% 65% !important;
    }

    .ftr2 {
      justify-content: left !important;
    }

    .btt,
    .mob-btn {
      bottom: 20px !important;
    }
  }

  /* FOOTER */
  footer {
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-rows: repeat(1, 1fr);
    gap: 0px;
    /* --- */
    background: #034;
    color: #ccc;
    font-family: 'Audiowide', cursive;
    text-shadow: black 1px 1px 1px;
  }

  .komcat-ltd {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0px;
  }

  .ltd1 {
    color: #056;
    display: flex;
    align-items: self-end;
    justify-content: center;
    margin-bottom: -8px;
  }

  .ltd2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 2vw, 2.5rem);
  }

  .ltd3 {
    color: #056;
    display: flex;
    align-items: self-start;
    justify-content: center;
    margin-top: -8px;
  }

  .ftr2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.5rem, 2vw, 2.5rem);
    gap: 16px;
  }

  /* footer end*/

  /* Кнопка menu */
  .reveal {
    animation: revealUp 1s cubic-bezier(.16, 1, .3, 1) forwards;
  }

  .sr {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
  }

  .sr.vis {
    opacity: 1;
    transform: translateY(0);
  }

  .toc-link {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    color: #ddd;
    text-decoration: none;
    border-bottom: 1px solid rgba(28, 28, 28, .08);
    transition: color .5s, padding-left .5s;
  }

  .toc-link:hover {
    color: aqua;
    padding-left: 8px;
  }

  .side-nav {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 320px;
    max-width: 85vw;
    background: #045;
    color: #ddd;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    overflow-y: auto;
    padding: 28px 20px;
    border-right: 1px solid rgba(28, 28, 28, .1);
  }

  .side-nav.open {
    transform: translateX(0);
  }

  .side-ov {
    position: fixed;
    inset: 0;
    background: rgba(28, 28, 28, .3);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s;
  }

  .side-ov.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* кнопка меню */
  .mob-btn {
    position: fixed;
    bottom: 38px;
    right: 22px;
    z-index: 100;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #034;
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(42, 56, 46, .3);
    transition: transform .3s;
    border: none;
    font-size: 22px;
    display: flex;
  }

  .mob-btn:hover {
    transform: scale(1.2);
  }

  /* кнопка up */
  .btt {
    position: fixed;
    bottom: 38px;
    right: 80px;
    z-index: 100;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #0346;
    color: whitesmoke;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* box-shadow: 0 4px 20px aqua; */
    border: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s;
    font-size: 16px;
  }

  .btt.show {
    opacity: 1;
    pointer-events: auto;
  }

  @keyframes revealUp {
    from {
      opacity: 0;
      transform: translateY(30px)
    }

    to {
      opacity: 1;
      transform: translateY(0)
    }
  }

  /* end menu */
  /* NAV */
  nav .flex {
    justify-content: space-between;
    margin-bottom: 24px;
  }

  nav span {
    font-size: 22px;
    border-bottom: 3px solid #078;
  }

  nav button {
    background: #078;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 20px;
  }

  /* end nav */