@media screen and (max-width: 1000px) {
  body,
  html {
    background: var(--base-bg) no-repeat fixed top center !important;
    background-size: cover !important;
    background-blend-mode: normal !important;
  }
}

@media screen and (max-width: 720px) {
  html,
  body,
  #pun,
  .punbb {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-size: contain;
    -webkit-text-size-adjust: none;
    overflow-wrap: break-word;
    float: none;
  }

  body {
    position: relative;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    z-index: 1;
    background-size: cover;
    background: #191a19;
    background-blend-mode: normal;
  }

  img {
    max-width: 100% !important;
    height: auto;
  }

  #pun_wrap #pun {
    width: 100% !important;
    border-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  #header_wrapper .header_item,
  .type-decor {
    display: none;
  }

  #header_wrapper {
    height: 150px;
    margin: -15px -15px 0 !important;
    border-radius: 0;
    display: flex;
    align-items: center;
    padding: 20px;
    padding-right: 0;
    box-sizing: border-box;
  }

  #header_wrapper:after {
    mask-size: cover;
    -webkit-mask-size: cover;
  }

  .header_banners-wrapper {
    position: relative;
    width: 100%;
    top: unset;
    right: unset;
    margin-top: -30px !important;
  }

  .logo {
    margin: -30px 0 10px !important;
  }

  #styleToggle {
    top: 100px;
  }

  #pun .punbb {
    padding: 15px !important;
    box-sizing: border-box;
  }

  #pun #pun-redirect.punbb .info .container {
    width: 100% !important;
  }

  #pun-navlinks {
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 0 !important;
    width: 100% !important;
    padding: 0
  }

  #pun-navlinks .underline {
    display: none;
  }

  #pun-navlinks .container:after {
    display: none !important;
  }

  #pun-navlinks span,
  #pun #nota-ql-navbtn {
    font-size: 0 !important;
    position: relative;
  }

  #pun-navlinks > ul {
    gap: 10px;
    justify-content: flex-start;
    height: auto;
    padding: 0px !important;
    align-items: center;
    height: 100%;
  }

  #pun-navlinks ul.container > li > a {
    background: transparent;
    padding: 5px !important;
    border-radius: 5px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #pun-navlinks a span:before {
    font-size: 14px !important;
  }

  #navindex a span:before {
    content: "\f015";
    font-family: FontAwesome;
    display: block;
    font-weight: normal !important;
  }

  #navuserlist a span:before {
    content: "\f0c0";
    font-family: FontAwesome;
    display: block;
    font-weight: normal !important;
  }

  #navsearch a span:before {
    content: "\f002";
    font-family: FontAwesome;
    display: block;
    font-weight: normal !important;
  }

  #navprofile a span:before {
    content: "\f2bb";
    font-family: FontAwesome;
    display: block;
    font-weight: normal !important;
  }

  #navpm a span:before {
    content: "\f0e0";
    font-family: FontAwesome;
    display: block;
    font-weight: normal !important;
  }

  .settings_wrap .slide_button {
    font-size: 0 !important;
  }

  #navadmin a span:before,
  .settings_wrap .slide_button:before {
    content: "\f013";
    font-family: FontAwesome;
    font-size: 14px;
    display: block;
    font-weight: normal !important;
  }

  #navlogout a span:before {
    content: "\f2f5";
    font-family: FontAwesome;
    display: block;
    font-weight: normal !important;
  }

  #nota-ql-navbtn span:before {
    display: none !important;
  }

  #navlogin a span:before {
    content: "\f2f6";
    font-family: FontAwesome;
    display: block;
    font-weight: normal !important;
  }

  #navregister a span:before {
    content: "\f234";
    font-family: FontAwesome;
    display: block;
    font-weight: normal !important;
  }

  #navpr_1 a span:before {
    content: "\f0f3";
    font-family: FontAwesome;
    display: block;
    font-weight: normal !important;
  }

  #navpr_2 a span:before {
    content: "\f02d";
    font-family: FontAwesome;
    display: block;
    font-weight: normal !important;
  }

  #navlogout {
    gap: 5px;
  }

  #pun #nota-ql-navbtn:after {
    content: "\f021";
    font: 14px FontAwesome !important;
    display: block;
    padding: 0 !important;
  }

  #pun #pun-navlinks ul > li > a {
    flex: unset !important;
  }

  #pun-ulinks .container,
  #pun-ulinks.section {
    flex-wrap: wrap;
    height: auto !important;
    align-items: center !important;
    justify-content: center;
    display: flex;
    gap: 5px;
    padding: 5px 15px !important;
    margin: 0px 0 20px !important;
    position: relative;
    top: 0;
    width: auto;
  }

  #pun-ulinks.section {
    margin-bottom: 0px !important;
  }

  #pun-ulinks li {
    display: block;
  }

  #pun-ulinks .container a {
    padding: 2px 10px 5px !important;
    background: var(--cover);
    border-radius: 3px;
    margin: 0 !important;
    display: block;
  }

  #pun-status {
    margin-left: 0 !important;
    width: 100% !important;
    right: 0;
    top: 0 !important;
    position: relative;
    text-align: left;
    margin: 15px 0 0 !important;
    background: transparent;
    padding: 0 !important;
    justify-content: flex-start;
    height: auto;
  }

  #pun-status:before,
  #pun-status:after {
    display: none;
  }

  #pun-status .container {
    text-transform: lowercase;
  }

  #pun-status .item3,
  #pun-status .item4,
  #pun-status .item2 {
    display: none !important;
  }

  #pun-index .category {
    padding: 0px 0px !important;
  }

  #pun-index .category .container {
    padding: 0px;
    background: transparent !important;
    border: none !important;
  }

  #pun-index .category tr {
    flex-direction: column;
    width: auto !important;
    min-width: 50% !important;
    align-items: flex-end;
    gap: 10px !important;
    margin: 0 0px !important;
    padding: 10px !important;
    border: none !important;
    background: var(--cover);
    border-radius: 8px;
  }

  #pun-index .category tr + tr {
    margin-top: 5px !important;
  }

  #pun-index table Div.icon {
    width: 20px !important;
    font-size: 30px;
  }

  #pun .icon[data-new-topics]::before {
    background: var(--cover);
    min-width: 20px !important;
  }

  #pun-index .category td.tcl,
  #pun-index td.tcr {
    width: 100% !important;
    overflow: visible;
    border: none !important;
    padding: 0 !important;
  }

  #pun-index .tclcon {
    display: flex;
    flex-direction: column;
    padding: 0px;
  }

  #pun-index .subforums {
    margin-top: 10px;
  }

  #pun-index td.tcr {
    box-sizing: border-box;
    border-top: 1px solid var(--borders) !important;
    overflow: visible !important;
    padding-top: 10px !important;
  }

  #pun .lastmess_wrap {
    display: flex;
    text-align: left;
  }

  #pun-index .tcr a.lastpost-link {
    width: auto !important;
    text-align: left;
    white-space: wrap;
  }

  #pun .user-avatar {
    display: none;
  }

  .ststitems {
    display: none;
  }

  .onlinelist,
  .users_24h {
    width: 100%;
  }

  #partners-banners:before {
    display: none;
  }

  #partners-banners #nc-banners {
    background: var(--pun);
    border-radius: 0 0 10px 10px;
  }

  #pun-viewforum .forum .tc2,
  #pun-viewforum .forum .tc3,
  #pun-searchtopics .forum .tc3 {
    display: none;
  }

  #pun .forum thead {
    display: none !important;
  }

  #pun .forum tr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }

  #pun .forum .tcr {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }

  #pun .forum .user-avatar {
    display: none;
  }

  #pun .forum tr td {
    width: auto !important;
  }

  #pun .post-author {
    float: none !important;
    width: 100% !important;
    margin: 10px 0 20px !important;
    padding: 10px;
    background: var(--base-bg) no-repeat top center / cover;
  }

  .toBlock {
    float: none !important;
  }

  .field_wrap {
    margin-top: 0 !important;
    width: 100%;
    display: flex;
    grid-area: fld;
    border-radius: 6px;
    padding: 5px 0px !important;
    gap: 10px;
    box-sizing: border-box;
  }

  .pa-fld1,
  .pa-fld2,
  .pa-fld3,
  .pa-fld4,
  .pa-fld5,
  .pa-fld6,
  .pa-ip {
    display: none !important;
  }

  .post-author ul {
    border-radius: 10px 10px 10px !important;
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-template-rows: minmax 1fr 1fr;
    gap: 10px;
    grid-template-areas:
      "ava name"
      "ava title"
      "fld fld";
    padding: 10px !important;
    width: auto;
  }

  #pun .pa-author {
    align-self: end;
    grid-area: name;
    margin: 0 0 -5px !important;
    justify-self: stretch;
    text-align: left !important;
    transform: rotate(0);
  }

  #pun .pa-title {
    align-self: start;
    grid-area: title;
    margin: 0 !important;
    text-align: left !important;
  }

  #pun .pa-avatar {
    grid-area: ava;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .pa-respect,
  .pa-posts {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    height: 20px;
    box-sizing: border-box;
  }
  .pa-respect .fld-name,
  .pa-posts .fld-name,
  .pa-respect .fld-name a {
    display: inline-flex !important;
    height: 20px;
    align-items: center;
    justify-content: center;
  }
  .pa-respect .fld-name br {
    display: none !important;
  }

  .pa-links ul {
    display: flex;
    margin: 0 !important;
    padding: 0 !important;
  }

  #pun .post h3 {
    border-top: 1px dashed var(--borders) !important;
  }

  .post h3 span {
    margin: 0 !important;
  }

  #pun .post-body {
    margin: 0 !important;
    padding: 0px !important;
  }

  #pun .post-box {
    padding: 0 !important;
  }

  #pun .punbb .post-links {
    padding: 0 !important;
    margin: 0 !important;
  }

  #pun .punbb .post-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 5px;
    padding-top: 10px;
  }

  #pun .punbb .post-links ul a {
    font-size: 10px !important;
  }

  .pl-email.pm {
    margin-right: auto !important;
  }

  .post-links li + li,
  .pa-links li + li {
    margin: 0 !important;
  }

  #pun #post.container {
    padding: 0 !important;
    padding: 10px !important;
  }

  .punbb .formsubmit {
    flex-wrap: wrap;
    gap: 5px;
  }

  .punbb .formsubmit input {
    margin: 0 !important;
  }

  #togglePreview {
    margin: 0;
  }

  #pun #post-form {
    padding: 0 !important;
  }

  #pun #form-buttons {
    flex-direction: column;
  }

  .tcl.username {
    width: 20% !important;
  }

  .tc3.num_posts,
  .tc3.registered {
    display: none;
  }

  .tc3.last_visit {
    width: 20% !important;
  }

  #profile .container {
    padding: 0;
  }

  #viewprofile-next .container {
    padding: 0px !important;
  }

  #viewprofile tr {
    flex-direction: column;
  }

  #pun #viewprofile #profile-left {
    width: 100% !important;
    align-items: center;
    padding: 10px !important;
    box-sizing: border-box;
  }

  #pun #viewprofile #profile-right {
    padding: 10px !important;
    margin: 10px 0 0;
  }

  #pun-messages #profilenav ul {
    flex-wrap: wrap;
  }

  #pun-messages .fs-box .container tr {
    padding: 0 !important;
  }

  #pun-messages .fs-box .container td {
    text-align: left;
    padding: 5px !important;
  }

  .tc2.pmtc22,
  .tc3.pmtc33 {
    white-space: wrap !important;
    width: 25% !important;
  }

  #punbbsearch.container {
    padding: 0 !important;
  }

  .forum div.tclcon {
    flex: 1;
  }

  #pun .arrow_wrap {
    margin: 0 !important;
    z-index: 9999;
    right: 10px;
    justify-content: flex-end;
    height: auto;
    bottom: 50px;
    width: 30px;
    gap: 5px;
    top: unset;
    left: unset;
  }

  .arrow-divider {
    display: none;
  }

  .go-up,
  .go-down {
    width: 30px;
    height: 30px;
  }

  .go-up span,
  .go-down span {
    padding: 0 0px !important;
    font-size: 0;
    background: var(--accent);
    border-radius: 5px;
    width: 30px;
    height: 30px;
    margin: 0;
  }

  .go-up span:before {
    content: "";
    mask: url(https://forumstatic.ru/files/001c/97/9f/46223.svg) no-repeat
      center center;
    -webkit-mask: url(https://forumstatic.ru/files/001c/97/9f/46223.svg)
      no-repeat center center;
    mask-size: contain;
    -webkit-mask-size: contain;
    background: var(--text3);
    width: 15px;
    height: 15px;
    display: block;
  }

  .go-down span:before {
    content: "";
    mask: url(https://forumstatic.ru/files/001c/97/9f/97373.svg) no-repeat
      center center;
    -webkit-mask: url(https://forumstatic.ru/files/001c/97/9f/97373.svg)
      no-repeat center center;
    mask-size: contain;
    -webkit-mask-size: contain;
    background: var(--text3);
    width: 15px;
    height: 15px;
    display: block;
  }

  #profile {
    flex-wrap: wrap;
  }

  #profilenav {
    margin: 0 !important;
    width: 100%;
  }

  #profilenav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0;
  }

  #profilenav li {
    padding: 0px !important;
    flex: auto;
    text-align: center;
  }

  #profilenav li a {
    display: block;
    background: var(--cover2);
    padding: 3px 10px;
    border-radius: 7px;
  }

  #profile form.container {
    padding: 0;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
  }

  .post-links li a {
    font-size: 0 !important;
    gap: 0;
  }

  .post-links li a:before {
    background: var(--text1);
  }

  #tags .container {
    max-width: 100%;
    box-sizing: border-box;
  }

  .post-rating {
    margin-right: 20px;
  }

  .post-sig {
    display: none;
  }

  #pun-messages input.longinput {
    max-width: 100%;
    box-sizing: border-box;
  }

  #BookmCntToggle {
    top: 10px !important;
    left: 10px !important;
  }

  #character {
    display: none;
  }
  #pun-searchtopics .forum .tc2 {
    width: auto !important;
  }
  .brightness-track,
  #brightnessSlider {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .brightness-slider {
    width: 11px;
  }
  .slider-container {
    background: transparent;
  }
  .slider-track-wrapper:after {
    display: none;
  }
}