@media screen and (max-width: 1020px) {
    body.mobile {
        width: fit-content;
        min-width: unset;
    }
   
    .mobile #pun {
        width: auto;
        max-width: 1020px;
        min-width: 550px;
        margin: auto;
    }
   
    .mobile #pun .punbb {
        width: auto;
        height: auto;
        max-width: 970px;
        min-width: 500px;
        font-size: 16px;
        margin: 20px 6px 100px;
        padding: 0 16px 0;
    }
   
    .mobile .go-up, .mobile .go-down {
        display: none;
    }
   
    .mobile #pun-navlinks, .mobile #pun-navlinks.fixed {
        height: 70px;
        line-height: 70px;
        padding: 0;
    }
   
    .mobile #pun-navlinks.fixed {
        margin: 0 -23px;
    }
   
    .mobile #pun-navlinks .container {
        display: flex;
        justify-content: space-evenly;
        height: 70px;
        width: 100%;
    }
   
    .mobile #pun-navlinks .container:after,
    .mobile #pun-ulinks .container:after{
        display: none;
    }
   
    .mobile #pun-navlinks li a span {
        display: none;
    }
   
    .mobile #pun-navlinks li a .material-symbols-outlined {
        display: inline;
        font-size: 50px;
        line-height: 70px;
    }
   
    .mobile .punbb #pun-navlinks #form-login {
        left: -370px;
    }

    .mobile #pun-navlinks #New-exit img {
        height: 36px;
        margin-top: 17px;
    }
   
    .mobile #pun-navlinks #navextra1_child {
        top: 68px;
    }
   
    .mobile #html-header #header-table {
        grid-template-columns: 17px auto 17px;
        grid-template-rows: auto 10px auto 10px auto;
        -webkit-text-size-adjust: 100%;
        margin: 0 -17px 20px;
        background: none;
        border-radius: 30px 30px 0 0;
        overflow: hidden;
    }
   
    .mobile #html-header #header-table #header-left, .mobile #html-header #header-table #header-middle, .mobile #html-header #header-table #header-right, .mobile #html-header #header-table #header-right-top, .mobile #html-header #header-table #header-bottom, .mobile #html-header #header-table #bests {
        display: none;
    }
   
    .mobile #html-header #header-table #header-logo {
        grid-area: 1 / 1 / 2 / 4;
        width: 100%;
        background-size: cover;
    }
   
    .mobile #html-header #header-table #navigation {
        grid-area: 3 / 2 / 4 / 3;
        justify-content: space-between;
    }
     
    .mobile #html-header #header-table #navigation a {
        font-size: 20px;
        padding: 8px 16px;
        line-height: 20px;
    }
   
    .mobile #html-header #header-table #wanted {
        grid-area: 5 / 2 / 6 / 3;
        justify-content: space-evenly;
        width: 100%;
        background: none;
    }
   
    .mobile #html-header #header-table #wanted a, .mobile #html-header #header-table #wanted a img {
        height: 129px;
        width: 105px;
    }
   
    .mobile #header-table #header-bottom-right {
        grid-area: 1 / 1 / 6 / 4;
        background: var(--leaves)no-repeat bottom right;
        background-size: 38%;
        z-index: -1;
    }

    .mobile #pun-ulinks {
        height: auto;
        margin-top: -1px;
    }
   
    .mobile #pun-ulinks.fixed {
        height: 40px;
        top: 68px;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0 -23px;
    }
   
    .mobile #pun-ulinks .container {
        display: flex;
        position: relative;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        padding: 0;
        column-gap: 5px;
    }
   
    .mobile #pun-ulinks.fixed .container {
        height: 40px;
        flex-direction: column;
    }
   
    .mobile #pun-ulinks .container li a {
        font-size: 16px;
    }
   
    .mobile #pun-announcement {
        margin-top: -1px;
        padding: 0;
    }
   
    .mobile #pun-announcement .container {
        padding: 15px 10px;
    }
   
    .mobile #pun-announcement #news {
        gap: 10px 15px;
    }
   
    .mobile #pun-announcement #news a {
        font-size: 18px;
        padding: 6px 20px;
        line-height: 18px;
    }
   
    .mobile #pun-status .container, .mobile #pun-crumbs1 p.container, .mobile #pun-crumbs2 p.container {
        font-size: 22px;
    }
   
    .mobile #pun-main .category {
        padding: 10px;
    }
   
    .mobile #pun-main .category h2, .mobile #pun-stats h2 {
        font-size: 36px;
        line-height: 30px;
        -webkit-text-size-adjust: 100%;
    }
   
    .mobile #pun-index #pun-main .category tbody tr {
        width: auto;
        justify-content: space-between;
        padding: 10px 10px 10px 20px;
    }
   
    .mobile #pun-index #pun-main table .tcl {
        width: 49%;
    }
   
    .mobile #pun-index #pun-main table .tclcon h3 a {
        font-size: 26px;
        margin-top: 0;
        line-height: 26px;
    }
   
    .mobile #pun-index #pun-main table .tclcon .fname {
        font-size: 18px;
        line-height: 24px;
        text-transform: none;
    }
   
    .mobile #pun-index #pun-main table .tclcon .furl {
        display: flex;
        flex-wrap: wrap;
        justify-items: stretch;
        flex-direction: row;
        gap: 5px;
    }
   
    .mobile #pun-index #pun-main table .tclcon .furl a {
        margin-right: 0;
        margin-left: 0;
        padding: 2px 12px;
        line-height: 22px;
        font-size: 16px;
        /*flex: 1;*/
        text-align: center;
    }
   
    .mobile #pun-index #pun-main table .tclcon span {
        display: none;
    }
   
    .mobile #pun-index #pun-main table .tcr {
        width: 49%;
        grid-template-rows: auto auto;
        grid-template-columns: auto 75px;
    }
   
    .mobile #pun-index #pun-main table .tcr .user-avatar {
        width: 60px;
        height: 60px;
        align-self: center;
        grid-area: 1 / 2 / 3 / 3;
    }
   
    .mobile #pun-index #pun-main table .tcr .user-avatar .avatar-image {
        width: 58px;
        height: 58px;
    }
   
    .mobile #pun-index #pun-main table .tcr .user-avatar .isonline {
        width: 10px;
        height: 10px;
        top: 2px;
        right: 5px;
    }
   
    .mobile #pun-index #pun-main table .tcr .lastpost-link, .mobile #pun-index #pun-main table .tcr .lastpost {
        font-size: 18px;
        line-height: 24px;
        grid-column: 1 / 2;
    }
   
    .mobile #pun-index #pun-main table .tcr .lastpost-link {
        height: auto;
    }
   
    .mobile #pun-stats .statscon {
        padding: 0 10px;
    }
   
    .mobile #pun-index #pun-stats .stats-block {
        padding: 6px 0;
        font-size: 18px;
        line-height: 22px;
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: 6px;
    }
   
    .mobile #pun-index #pun-stats .stats-block li {
        margin: 0 10px;
        text-align: center;
    }
   
    /*.mobile #pun-index #pun-stats .stats-block li strong {*/
    /*    display: block;*/
    /*}*/
   
    .mobile #pun-index #pun-stats li#onlinelist {
        font-size: 16px;
        line-height: 20px;
    }
   
    .mobile #html-footer .container {
        width: auto;
    }
   
    .mobile #pun-main h1, .mobile #pun-debug h2 {
        font-size: 32px;
        line-height: 32px;
    }
   
    .mobile #pun-viewtopic #pun-main h1, .mobile #pun-post #pun-main h1 {
        padding: 0;
    }
   
    .mobile .punbb .linkst, .mobile .punbb .linksb {
        margin: 10px 20px 0;
        font-size: 22px;
        height: auto;
        line-height: 30px;
    }
   
    .mobile #pun-viewtopic .linkst, .mobile #pun-viewtopic .linksb {
        margin: 10px;
    }
   
    .mobile .postlink.long a {
        font-size: 22px;
    }
   
    .mobile .punbb .main table {
        width: 100%;
    }
   
    .mobile #pun-viewforum table tbody tr,
    .mobile #pun-viewforum table thead tr,
    .mobile #pun-searchtopics table tbody tr,
    .mobile #pun-searchtopics table thead tr {
        width: auto;
        font-size: 22px;
        padding: 10px 10px 10px 20px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 10px
    }
   
    .mobile #pun-viewforum table thead tr, .mobile #pun-searchtopics table thead tr {
        display: none;
    }
   
    .mobile #pun-viewforum table tbody tr.tr-divider {
        font-size: 24px;
    }
   
    .mobile #pun-viewforum table tr .tc2, .mobile #pun-viewforum table tr .tc3 {
        display: none;
    }
   
    .mobile #pun-viewforum table tr .tcl, .mobile #pun-searchtopics table tr .tcl {
        width: auto;
        grid-area: 1 / 1 / 3 / 2;
    }
   
    .mobile #pun-searchtopics table tbody tr .tc2, .mobile #pun-searchtopics table thead tr .tc2 {
        grid-area: 2 / 2 / 3 / 3;
        width: auto;
        justify-self: end;
        text-align: right;
    }
   
    .mobile #pun-viewforum table tr .tcr, .mobile #pun-searchtopics table tbody tr .tcr {
        width: auto;
        /*grid-template-columns: auto 66px;*/
        grid-template-columns: auto;
        grid-template-rows: auto auto;
    }
   
    .mobile #pun-viewforum table tr .tcr {
        grid-area: 1 / 2 / 3 / 3;
    }
   
    .mobile #pun-searchtopics table tr .tcr {
        grid-area: 1 / 2 / 2 / 3;
        width: auto;
    }
   
    .mobile #pun-viewforum table tbody tr .tcr .user-avatar,
    .mobile #pun-searchtopics table tbody tr .tcr .user-avatar {
        display: none;
    }
   
    /*.mobile #pun-viewforum table tbody tr .tcr .user-avatar .avatar-image, */
    /*.mobile #pun-searchtopics table tbody tr .tcr .user-avatar .avatar-image {*/
    /*    height: 50px;*/
    /*    width: 50px;*/
    /*}*/
   
    /*.mobile #pun-viewforum table tbody tr .tcr .user-avatar .isonline, */
    /*.mobile #pun-searchtopics table tbody tr .tcr .user-avatar .isonline {*/
    /*    width: 10px;*/
    /*    height: 10px;*/
    /*    top: 2px;*/
    /*    right: 2px;*/
    /*}*/
   
    .mobile #pun-searchtopics table tbody tr .tc3,
    .mobile #pun-searchtopics table thead tr .tc3 {
        display: none;
    }
   
    .mobile #pun-searchposts .post .post-author,
    .mobile #pun-post .post .post-author {
        border-radius: 0;
        border-width: 0;
    }
   
    .mobile .punbb .post {
        margin-top: -110px;
        padding-top: 110px;
        margin-bottom: 0;
    }
   
    .mobile .punbb .post h3 {
        margin-left: 0;
        padding: 0 10px;
    }
   
    .mobile .punbb .post h3 span {
        line-height: 24px;
        font-size: 18px;
    }
   
    .mobile .punbb .post h3 span a {
        font-size: 18px;
        -webkit-text-size-adjust: 100%;
    }

    .mobile .punbb .post .container {
        margin-top: 0;
        margin-left: 0;
        border: none;
        padding-top: 0;
        background: none;
        border-radius: 0;
    }
   
    .mobile .punbb .post .post-author {
        float: none;
        width: 100%;
        margin-left: 0;
        border-radius: 0;
        margin-top: 0;
        padding: 0;
    }
   
    .mobile .punbb .post .post-author ul {
        display: grid;
        grid-template-columns: 220px 1fr 1fr;
        grid-template-rows: repeat(6, auto);
        -webkit-text-size-adjust: 100%;
        border-radius: 0;
    }
   
    .mobile #pun-searchposts .post .post-author ul {
        display: block;
        text-align: left;
        padding-left: 10px;
    }
   
    .mobile #pun-searchposts .post .post-author ul .pa-author {
        text-align: left;
    }
   
    .mobile .punbb .post .post-author ul .pa-author {
        grid-column: 2 / -1;
        margin: 0 35px 0 0;
        text-align: left;
        padding: 5px 0 0;
        width: auto;
    }
   
    .mobile .punbb .post .post-author .pa-author a {
        font-size: 32px;
        line-height: 36px;
    }
   
    .mobile .punbb .post .post-author ul .pa-title {
        grid-column: 2 / -1;
        margin: 0 15px 0 0;
        text-align: left;
        border-bottom: var(--back-color) 1px dashed;
        font-size: 16px;
        line-height: 20px;
        padding: 0 0 2px;
        width: auto;
    }
       
    .mobile .punbb .post .post-author ul .pa-avatar {
        grid-area: 1 / 1 / 7 / 2;
        align-self: center;
        padding: 0;
        margin: 5px 0;
        justify-self: center;
    }
   
    .mobile .punbb .post .post-author ul .pa-fld2 {
        grid-area: 3 / 2 / 4 / -1;
        margin: 5px 15px 0 0;
        text-align: left;
        font-size: 18px;
        line-height: 24px;
        padding: 0;
        color: var(--text-color);
        background: none;
        width: auto;
    }
   
    .mobile .post .post-author .pa-fld1 {
        grid-column: 2 / -1;
        margin: 0;
        text-align: left;
    }
   
    .mobile .punbb .post .post-author ul .pa-fld3 {
        background: none;
        grid-area: 1 / 3 / 2 / 4;
        width: 16px;
        height: 16px;
        position: absolute;
        top: 4px;
        right: 4px;
        border-radius: 0;
        margin: 0;
        padding: 0;
    }
   
    .mobile .punbb .post .post-author ul .pa-fld1 {
        width: auto;
        margin: 4px 15px 6px 0;
    }
   
    .mobile .punbb .post .post-author ul .pa-fld1 .lzname {
        font-size: 20px;
        line-height: 24px;
        margin: 0;
        padding: 0;
    }
   
    .mobile .punbb .post .post-author ul .pa-fld1 .lztext {
        font-size: 16px;
        line-height: 18px;
        text-align-last: left;
        padding: 0 0 6px 0;
        border-bottom: var(--back-color) 1px dashed;
        color: var(--text-color);
    }
   
    .mobile .punbb .post .post-author ul .pa-fld6 {
        grid-column: 2 / -1;
        margin-right: 15px;
        display: flex;
        align-items: center;
        min-height: 35px;
        padding: 2px;
        margin-top: -1px;
        flex-wrap: wrap;
                display: none;
    }
   
    .mobile .punbb .post .post-author ul .pa-fld6 .plup {
        font-size: 24px!important;
        margin: 0 6px;
        line-height: 35px;
    }
   
    .mobile .punbb .post .post-author ul .pa-fld6 .pldown {
        font-size: 24px!important;
        line-height: 35px;
        margin-left: 6px;
        text-align: left;
    }
   
    .mobile .pa-posts, .mobile .pa-respect, .mobile .pa-fld5, .mobile .pa-fld4 {
        justify-content: start;
        font-size: 16px;
        line-height: 18px;
    }
   
    .mobile .pa-posts span.fld-name, .mobile .pa-respect span.fld-name, .mobile .pa-fld5 span.fld-name, .mobile .pa-fld4 span.fld-name {
        margin: 0;
        justify-content: start;
        margin-top: 6px;
        background: none;
        flex-basis: auto;
    }
   
    .mobile .pa-respect a[href*="relation.php"] {
        font-size: 15px;
        width: 17px;
        height: 17px;
        line-height: 16px;
    }
   
    .mobile .pa-posts span.fld-name:before, .mobile .pa-respect span.fld-name:before, .mobile .pa-respect span.fld-name a:before, .mobile .pa-fld5 span.fld-name:before, .mobile .pa-fld4 span.fld-name:before {
        font-size: 24px;
        line-height: 18px;
        margin-right: 4px;
    }
   
    .mobile .punbb .post .post-author .pa-ip {
        grid-column: 2 / -1;
        text-align: left;
    }
   
    .mobile .post-author .indOnline {
        border-radius: 0;
        width: 100%;
        grid-column: 1 / 4;
    }
   
    .mobile .punbb .post-body {
        margin-left: 0;
    }
   
    .mobile .punbb .post-box {
        padding: 2em 1em;
        -webkit-text-size-adjust: 100%;
        font-size: 16px;
    }
   
    .mobile .punbb .post-sig img {
        max-width: 100%;
    }
   
    .mobile div.post-rating a, .mobile div.post-vote a {
        font-size: 160%!important;
    }
   
    .mobile .punbb .quote-box cite, .mobile .punbb .code-box strong.legend {
        font-size: 1.25em;
    }
   
    .mobile .punbb .code-box .scrollbox pre {
        white-space: pre-wrap;
    }
   
    .mobile .punbb .post-links ul {
        height: auto;
        min-height: 40px;
        padding: 0;
    }
   
    .mobile .punbb .post-links li a {
        font-size: 0;
        display: inline-block;
        line-height: 12px;
    }
   
    .mobile .punbb .post-links li a .material-symbols-outlined {
        display: inline-block;
        font-size: 24px;
        line-height: 24px;
    }
   
    .mobile .punbb .modmenu .container {
        font-size: 20px;
        -webkit-text-size-adjust: 100%;
    }
   
    .mobile .linksb .pagelink, .mobile .linksb .postlink {
        width: 45%;
        -webkit-text-size-adjust: 100%;
        font-size: 20px;
    }
   
    .mobile .subscribelink {
        text-align: right;
        width: 100%;
        -webkit-text-size-adjust: 100%;
        font-size: 20px;
    }
   
    .mobile #main-reply {
        font-size: 24px;
        -webkit-text-size-adjust: 100%;
    }
   
    .mobile #pun-userlist .usertable table tr {
        width: auto;
        font-size: 20px;
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 40% 10% 10% 20% 20%;
        grid-column-gap: 2px
    }
   
    .mobile #pun-userlist .usertable table thead {
        display: none;
    }
   
    .mobile #pun-userlist .usertable table tr td {
        hyphens: auto;
    }
   
    .mobile #pun-userlist .usertable table tr .tcl {
        grid-area: 1 / 1 / 2 / 2;
        width: 100%;
    }
   
    .mobile #pun-userlist .usertable table tr .tc2 {
        grid-area: 2 / 1 / 3 / 2;
        width: 100%;
    }
   
    .mobile #pun-userlist .usertable table tr .relation {
        grid-area: 1 / 2 / 3 / 3;
        width: 100%;
    }
   
    .mobile #pun-userlist .usertable table tr .num_posts {
        grid-area: 1 / 3 / 3 / 4;
        width: 100%;
    }
   
    .mobile #pun-userlist .usertable table tr .registered {
        grid-area: 1 / 4 / 3 / 5;
        width: 100%;
    }
   
    .mobile #pun-userlist .usertable table tr .last_visit {
        grid-area: 1 / 5 / 3 / 6;
        width: 100%;
    }
   
    .mobile #viewprofile table tr {
        display: grid;
    }
   
    .mobile #viewprofile table tr #profile-left {
        width: 100%;
        display: grid;
        grid-template-columns: 220px auto;
        grid-template-rows: repeat(6, auto);
        text-align: left;
        height: auto;
        -webkit-text-size-adjust: 100%;
        background: var(--forum-color);
    }
   
    .mobile #viewprofile table tr #profile-left #profile-name {
        grid-column: 2 / 3;
        font-size: 24px;
        padding: 10px 15px 0 0;
        line-height: 24px;
    }
   
    .mobile #viewprofile table tr #profile-left #profile-title {
        grid-column: 2 / 3;
        font-size: 15px;
        margin: 3px 15px 0 0;
        border-bottom: var(--back-color) 1px dashed;
    }
   
    .mobile #viewprofile table tr #profile-left #pa-avatar {
        grid-area: 1 / 1 / -1 / 2;
        align-self: center;
        justify-self: center;
    }
   
    .mobile #viewprofile table tr #profile-left #pa-fld2 {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        margin: 10px 15px 10px 0;
        padding: 0;
        background: none;
        text-align: left;
    }
   
    .mobile #viewprofile table tr #profile-left #pa-fld2 .fan2 {
        padding: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--back-color);
    }
   
    .mobile #viewprofile table tr #profile-left #pa-fld1 {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
        margin: 0 15px 0 0;
    }
   
    .mobile #viewprofile table tr #profile-left #pa-fld1 .lzname {
        padding: 0;
    }
   
    .mobile #viewprofile table tr #profile-left #pa-fld1 .lzname a {
        font-size: 20px;
        line-height: 20px;
    }
   
    .mobile #viewprofile table tr #profile-left #pa-fld1 .lztext {
        background: transparent;
        margin: 3px 0;
        font-size: 14px;
        border-bottom: var(--back-color) 1px dashed;
        padding: 0 0 4px 0;
        text-align-last: left;
    }
   
    .mobile #viewprofile table tr #profile-left #pa-online {
        grid-column: 2 / 3;
        font-size: 14px;
        margin: 0;
        border-top: none;
    }
   
    .mobile #viewprofile table tr #profile-left #pa-edit {
        grid-column: 2 / 3;
    } 
   
    .mobile #viewprofile table tr #profile-left #pa-edit a {
        font-size: 16px;
    }
   
    .mobile #viewprofile table tr #profile-right {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 5px;
        margin-top: 10px;
        font-size: 16px;
        line-height: 22px;
        -webkit-text-size-adjust: 100%;
    }
   
    .mobile #viewprofile table tr #profile-right li {
        padding: 5px;
        background: var(--forum-color);
        display: grid;
        text-align: center;
        grid-template-rows: auto;
        grid-column: auto / span 1;
        border-radius: 20px;
    }
   
    .mobile #viewprofile table tr #profile-right li:last-child:nth-child(even) {
        grid-column: auto / span 2;
    }
   
    .mobile #viewprofile table tr #profile-right li span {
        margin-left: 0;
        width: auto;
        padding: 0;
        background: none;
        border: none;
    }
   
    .mobile #viewprofile table tr #profile-right li strong {
        padding: 0;
    }
   
    .mobile #viewprofile table tr #profile-right li#pa-fld6 strong {
        padding: 3px 0;
    }
   
    .mobile #viewprofile table tr #profile-right li#pa-posts {
        grid-area: 1 / 1 / 2 /-1;
    }
   
    .mobile #viewprofile table tr #profile-right li#pa-fld6 strong {
        justify-self: center;
    }
   
    .mobile #pun-profile #profile .container {
        margin-left: 20px!important;
    }
   
    .mobile #pun-profile .formal #viewprofile .container {
        background: none;
        border: none;
        margin: 0;
    }
   
    .mobile #profile .container #profilenav {
        float: none;
        width: 100%;
        margin-left: 0;
    }
   
    .mobile #viewprofile ul, .mobile #profilenav ul {
        padding: 5px 0;
    }
   
    .mobile #profilenav li {
        display: inline;
    }
   
    .mobile #profile .container #profilenav li a {
        border: var(--green) 1px solid;
        border-radius: 15px;
        padding: 3px 7px;
        margin-right: 7px;
        display: inline-block;
        margin-bottom: 7px;
    }
   
    .mobile #pun-messages table tr {
        padding: 5px 0;
    }
   
    .mobile #pun-messages .post-author .pa-reg {
        grid-column: 2 / -1;
        justify-self: left;
    }
   
    .mobile .punbb fieldset legend span {
        padding: 0;
        display: inline-block;
    }
   
    .mobile #pun-online table tr {
        width: 100%;
        padding: 8px 0;
    }
   
    .mobile .my-tabs>.tab-a {
        width: calc(100% - 20px);
    }
   
    .mobile .my-tabs {
        margin-left: 0!important;
    }
   
    .mobile .my-tabs>span {
        min-width: 50px;
        font-size: 10px;
    }
   
    .mobile .tipsy.tipsy-s {
        display: none!important;
    }
}