body {
  --text-color: #000;
  --second-text-color: #7d7f81;
  --accent-btn-color: #2481cc;
  --accent-color-hover: #1a8ad5;
  --body-bg: #fff;
  --box-bg: #fff;
  --box-bg-blured: rgba(255, 255, 255, .84);
  --tme-logo-color: #363b40;
}

html.theme_dark body {
  --text-color: #fff;
  --accent-btn-color: #1c93e3;
  --accent-color-hover: #1a8ad5;
  --body-bg: #000;
  --box-bg: #1e1e1e;
  --box-bg-blured: rgba(34, 34, 34, .84);
  --tme-logo-color: #fff;
}

body {
  margin: 0;
  background: var(--body-bg);
}

.no_transition,
.no_transition * {
  transition: none !important;
}

.tgme_background_pattern {
  mix-blend-mode: overlay;
  background: center repeat;
  background-size: 420px auto;
  background-image: url('../assets/pattern.svg');
  opacity: .3;
  display: block;
}

/* в тёмной теме паттерн работает как маска для градиента */
html.theme_dark .tgme_background {
  -webkit-mask: center repeat;
  mask: center repeat;
  -webkit-mask-size: 420px auto;
  mask-size: 420px auto;
  -webkit-mask-image: url('../assets/pattern.svg');
  mask-image: url('../assets/pattern.svg');
  opacity: .3;
}

html.theme_dark .tgme_background_pattern {
  display: none;
}

.tgme_head_wrap {
  background: var(--box-bg-blured);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}

.tgme_page_photo_image {
  width: 122px;
  height: 122px;
  border-radius: 61px;
  object-fit: cover;
}

.tgme_page_description {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 125px;
  word-break: break-word;
}

a.tgme_action_button_new.shine {
  background-image: linear-gradient(270deg,
    rgba(100, 181, 239, 0) 48.44%,
    #64b5ef 75.52%,
    rgba(100, 181, 239, 0) 100%);
  background-repeat: no-repeat;
  animation: bg-move linear 5s infinite;
}

@keyframes bg-move {
  0%   { background-position: -500px 0; }
  100% { background-position: 1000px 0; }
}

a,
a:hover,
a:active {
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  a.tgme_action_button_new.shine { animation: none; }
}

/* брейкпоинт t.me */
@media (max-width: 480px) {
  .tgme_page_photo_image {
    width: 110px;
    height: 110px;
    border-radius: 55px;
  }

  .tgme_page {
    margin-top: 0;
  }

  .tgme_page_additional {
    display: block;
  }
}