@media screen and (max-width: 720px) {
    html, body, #pun, .punbb {
    width: 100% !important;
    height: auto !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;
}
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;
}
#pun .punbb {
		padding: 15px !important;
    box-sizing: border-box
	}

    #pun #pun-redirect.punbb .info .container {
        width: 100% !important;
    }
    
    #pun-navlinks {
        margin: -15px -15px 0 !important;
        padding: 0 !important;
        align-items: center;
        justify-content: center;
        padding: 0 15px !important;
    }
    #pun-navlinks ul {
        gap: 5px;
    }
    #pun-navlinks span, #pun a#nav_fast-nav {
        font-size: 0 !important;
    }
    #navextra1 {
        display: block !important;
    }
    #pun-navlinks ul.container > li a {
        gap: 0 !important;
        padding: 3px 5px !important;
        background: var(--cover3);
        box-shadow: none
    }
    #nav_fast-nav:before {
        margin: 0 !important;
    }
#pun-ulinks {
    height: auto !important;
    flex-direction: column;
    padding: 10px 15px !important;
    margin: 0px -15px !important;
    justify-content: center;
    align-items: center;
}
    #pun-ulinks .container, #pun-ulinks {
        flex-wrap: wrap;
        height: auto !important;
        align-items: flex-start !important; 
        gap: 3px;
    }
    #pun-ulinks .container a, #pun a#my_settings  {
        background: var(--cover3);
        padding: 2px 5px;
    }
    #pun a#my_settings {
        align-self: flex-end
    }
    #pun-navlinks ul.container > li a:before {
        background: var(--text3) !important;
        display: block;
    }
    #fast-nav-container {
        position: relative;
        margin-left: calc(100% - 220px);
        top: 5px
    }
    #pun-ulinks.fixed, #pun-navlinks.fixed {
        position: relative;
        width: 100% !important;
    }
    #pun-status {
        margin-left: 0 !important;
        width: 100% !important;
        left: 0;
        position: relative;
        margin: 20px 0 0 !important;
        top: 0;
        padding: 0 !important;
        height: auto
    }
    #pun-status .container {
        padding: 0 !important;
        height: auto !important;
        color: var(--text1)
    }
    #pun-status .item3, #pun-status .item4, #pun-status .item2 {
        display: none !important;
    }
    #header_wrapper {
        width: auto;
        overflow: hidden;
        height: auto !important;
        padding: 0 !important;
        margin: 0px -15px 0 !important;
        border-radius: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header_logo {
        margin: 0 !important;
    }
    .logo {
        display: none
    }
    .logo.logo-alt {
        display: block
    }
    .bg_decor,
    .header_block,
    .header__persons-wrapper,
    .header_section.header-center,
    .Add,
    #pun .user-avatar {
        display: none !important;
    }
    .header_section.header-bottom {
        height: auto !important;
        justify-content: flex-start;
        display: flex;
        width: 100%;
    }
    .tab_cards-wrap a {
        flex: 0 0 auto;
        justify-content: center;
    }
    .header_section.header-top {
            background: 
        var(--header3) no-repeat top center / cover;
        align-items: center !important;
        justify-content: center !important;
        height: 200px;
        width: 100%
    }
    #pun-index .category h2 span:after, #pun-index .category h2 span:before {
        display: none !important;
    }
    #pun-index .category span, #pun-stats h2 span {
        text-align: center;
        justify-content: center;
        padding: 0 !important;
    }
    #pun-index .category h2 {
        padding: 0 !important;
        margin: 0 -15px 15px !important;
        font-size: 13px !important;
        text-align: center;
        justify-content: center;
        background: var(--nav)
    }
    #pun-index .category .container {
        padding: 0
    }
    #pun-index .category tr {
        flex-direction: column;
        width: 100% !important;
        align-items: flex-end;
        gap: 10px !important;
    }
    #pun-index .tcl, #pun-index .tcr {
        width: 100% !important;
        overflow: visible;
    }
    #pun-index .tcr {
        display: flex;
    }
    #pun-index td.tcr {
        border-top: 1px solid var(--borders) !important;
        padding: 10px 0 0 !important;
        border-radius: 0px;
        box-sizing: border-box;
    }
    #pun .lastmess_wrap {
        display: flex;
        flex-direction: column;
        line-height: 100%;
        gap: 3px;
        flex: 1;
        align-items: flex-end;
        text-align: right
    }
    #pun-index .tcr a.lastpost-link {
        width: 100% !important;
        white-space: wrap
    }
    #pun #pun-stats {
        padding-bottom: 10px
    }
   #pun #pun-stats .container {
       margin: 0 0px 0px;
       padding: 0 !important;
    }
    .ststitems {
        position: relative;
        top: 0;
        border: none;
        flex-direction: row;
        width: 100%
    }
    #pun .banners-wrap {
        width: 100vw;
        margin: 0 0 -15px !important;
        margin-left: -15px !important;
        padding: 10px !important;
        border-radius: 0
    }
    #pun .banners-wrap:before,  #pun .banners-wrap:after {
        display: none !important;
    }
    #pun .banners_part1 {
        flex: 1;
        padding: 0 !important;
    }
    #pun .banners_part2 {
        margin: 0;
    }
#pun-viewforum .forum .tc2, #pun-viewforum .forum .tc3,
    #pun-searchtopics .forum .tc3 {
	display: none
}

    #pun .forum tr {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }
    #pun .forum tr td {
        width: auto !important;
    }
#pun .punbb .forum .tcr {
	display: flex;
	text-align: left !important;
	align-items: flex-start !important;
}
#pun .linkst, #pun .linksb {
	flex-wrap: wrap !important;
	gap: 5px !important;
}
    .topic {
        padding: 10px 15px
    }
   #pun .post-author {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .field_wrap2, .pa-fld1, .pa-fld2, .pa-fld3, .pa-fld4, .pa-fld5 {
        display: none !important;
    }
    .post-author ul {
display: grid; 
  grid-template-columns: 50px 1fr; 
  grid-template-rows: minmax 1fr; 
  gap: 0px 10px; 
  grid-template-areas: 
    "ava name"
    "ava title"; 
        margin: 0 0 15px !important;
}
#pun .pa-author {
  align-self: self-end; 
    justify-content: flex-start;
  grid-area: name; 
    margin: 0 !important;
    text-align: left !important;
}
#pun .pa-title {
  align-self: start; 
  grid-area: title; 
    margin: 0 !important;
    text-align: left !important;
}
    
    .pa-avatar, .pa-avatar img {
        width: 50px;
        height: 50px;
        object-fit: cover
    }
    #pun .pa-avatar {
        grid-area: ava;
    }
    #pun .post-body {
        margin: 0
    }
    #pun .punbb .post-links {
        padding: 0 !important;
        margin: 10px 0 0 !important;
    }
        #pun .post-links ul:after {
        display: none !important;
    }
    #pun .punbb .post-links ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 5px;
    }
        .post-links li a:before {
	display: block;
}
    #pun .punbb .post-links ul a {
        background: var(--cover);
        padding: 5px 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;
    }
    #pun #form-buttons {
        flex-direction: column;
    }
    .tcl.username {
        width: 20% !important;
    }
    .tc3.num_posts, .tc3.registered {
        display: none
    }
    .tc3.last_visit {
        width: 20% !important;
    }
    #viewprofile .container, #viewprofile .container ul {
        padding: 0
    }
    #viewprofile tr {
        flex-direction: column;
    }
    #pun-messages .linksb {
        margin: 0 0px -10px !important;
    }
    .punbb .formal .container:not(#post) {
        padding: 0px !important;
    }
    #pun #viewprofile #profile-left {
        width: 100% !important;
    }
    #pun-messages #profile > .container {
        padding: 10px
    }
    #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: 0px;
        justify-content: flex-end;
        height: calc(100% - 20px)
    }
    .go-up span, .go-down span {
        background: var(--accent2) !important;
        padding: 5px
    }
    .go-up span:after, .go-down span:after {
        display: none
    }
    #profile {
        flex-wrap: wrap;
    }
    #profilenav {
        margin: 0 !important;
        width: 100%
    }
    #profilenav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding: 0;
        padding: 0 0 10px
    }
    #profilenav li {
        background: var(--pun);
        padding: 4px 10px;
        flex: auto;
        text-align: center;
    }
    #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)
    }
    #kings_html_wrapper-positive,#kings_html_wrapper.roles-teme {
        flex-direction: column;
    }
    #kings_html_wrapper-positive .html_section {
        width: 100%;
        box-sizing: border-box
    }
.news_1,
.news_2 {
    flex-direction: column;
}
    #tags .container {
        max-width: 100%;
        box-sizing: border-box
    }
    #pun-navlinks #New-exit img {
        max-width: 15px !important;
    }
    #pun #pun-navlinks #form-login {
        margin-left: -150px !important;
        width: 220px;
        box-sizing: border-box
    }
     #pun.gid3 #pun-navlinks #form-login {
        margin-left: -160px !important;
        box-sizing: border-box
    }
    #form-login span {
        font-size: 11px !important;
    }
    #List-UserNames {
        margin-top: 10px;
        top: 100%;
        margin-right: 0 !important;
        right: 0;
        box-sizing: border-box;
        width: 220px;
    }
    .punbb #List-UserNames input {
        width: 100% !important;
    }
    #pun #guestbook-wrapper {
        margin: 0 !important;
        flex-direction: column;
        gap: 10px
    }
    .guestbook-image-wrap, .guestbook-image {
        width: 100%;
    }
    .guestbook-image img {
        width: 100%;
        height: 190px;
        object-fit: cover
    }
    .guestbook-image-wrap {
        text-align: center;
        position: relative;
    }
    .guestbook-image-wrap span {
        font-size: 25px;
    }
    .guestbook-needs span {
        font-size: 10px
    }
    .guest-book-content {
        padding: 20px;
        margin: 0;
    }
    .copycode {
        position: relative;
        margin: 0 !important;
        width: 100%;
        bottom: 0;
        margin-top: 30px !important;
        top: 0
    }
    .post-sig {
        display: none
    }
    #pun-messages input.longinput {
        max-width: 100%;
        box-sizing: border-box;
    }
    .custom_tag_quentacenter, .custom_tag_quentacenterneed {
        margin: 0
    }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
        font-size: 16px;
    }
}
    #forum_f25 .tclcon {
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start
    }
    #forum_f25 .tclcon > a {
        flex: 1;
        min-width: 150px;
        max-width: auto;
    }
    .need_block {
        width: 100%
    }
    .need_block-img {
        width: 100%;
    }
#profilenav {
	display: flex;
	margin: 0 !important;
	height: auto !important;
}
#character {
    display: none
}
    .roles-ltrs {
        height: auto;
        flex-wrap: wrap;
        padding: 0 20px
    }
    .roles-ltr {
        flex: 1;
        white-space: nowrap;
        padding: 5px 10px;
        justify-content: center
    }
}