@media screen and (max-width: 1000px) {

body, html {
	background:
		#191719 !important;
	background-size: auto !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;
	}

	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;
		background: var(--main-bg)
	}

	#pun #pun-redirect.punbb .info .container {
		width: 100% !important;
	}
	
	.header_wrapper {
		height: 150px !important;
		margin: -15px -15px 0 !important;
		border-radius: 0;
	}
	
	.header_links_wrapper,
	.header_section {
		display: none
	}
	
	.header_logo-section.header_logo-section {
		background: var(--header) no-repeat center / cover !important;
	}
	
	.header-logo {
		mask-size: contain;
		-webkit-mask-size: contain;
		width: 100%;
		height: 150px;
	}
	
	#stylelist {
		top: 20px;
		margin: 0 !important;
		left: 20px;
		z-index: 10;
		width: calc(100% - 40px);
	}
	
	#stylelist a {
		border-radius: 10px;
	}

	#pun-navlinks {
		justify-content: center;
		padding: 0 !important;
		box-sizing: border-box;
		margin: 0 !important;
		width: calc(100vw - 30px) !important;
		position: relative;
		top: 0;
		left: 0;
		margin: 15px 0 0 !important;
		height: auto
	}
	
	#pun-navlinks .container:after {
		display: none !important;
	}

	#pun-navlinks span {
		font-size: 0;
		position: relative
	}

	#pun-navlinks>ul {
		gap: 10px;
		justify-content: center;
		height: auto;
		padding: 0 !important;
	}
	
	#pun-navlinks ul.container >li > a {
		background: var(--accent);
		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 {
		left: 10px;
		top: 20px;
		position: absolute
	}

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


	#navlogout a span:before {
		content: "\f2f5";
		font-family: FontAwesome;
		display: block;
		font-weight: normal !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;
	}
	
	#pun-announcement .container .html-box {
		margin: 15px 0 0 !important;
	}

	#pun-ulinks {
		position: relative;
		top: 0;
		padding: 0;
		margin: 10px 0 0px !important;
		left: 0 !important;
	}

	#pun-ulinks .container,
	#pun-ulinks.section {
		flex-wrap: wrap;
		height: auto !important;
		align-items: flex-start !important;
		justify-content: center;
		display: flex;
		gap: 5px;
		padding: 0 !important;
		background: transparent;
		margin: 10px 0 10px !important;
	}
	#pun-ulinks li {
		display: block
	}

	#pun-ulinks .container a {
		padding: 2px 10px 3px !important;
		background: var(--cover);
		border-radius: 10px;
		margin: 0 !important;
		display: block
	}
	
 #pun-ulinks.fixed {
		display: none
	}
	
	#pun #pun-navlinks.section.fixed {
		top: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		left: 0 !important;
		border-bottom: 1px solid var(--border)
	}

	#pun-status {
		margin-left: 0 !important;
		width: 100% !important;
		right: 0;
		top: 0 !important;
		position: relative;
		text-align: left;
		margin: 0 !important;
		color: var(--text1);
		background: transparent;
		padding: 0 !important;
		margin-bottom: 20px !important;
	}
	

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

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

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

	#pun-index .category tr {
		padding: 0 0 15px !important;
		flex-direction: column;
		width: auto !important;
		align-items: flex-end;
		gap: 10px !important;
		margin: 0 0px !important;
	}
	
	#pun-index .category tr + tr {
		margin-top: 15px !important;
	}

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

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

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


	#pun-index td.tcr {
		padding: 10px 0 !important;
		box-sizing: border-box;
		border-top: 1px solid var(--borders) !important;
		border-bottom: 1px solid var(--main-border) !important;
		overflow: visible !important;
	}
	
	#pun .lastmess_wrap {
		display: flex;
		flex-direction: column;
		gap: 3px;
		flex: 1;
		align-items: flex-end;
		text-align: right
	}

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

	#pun-stats {
		margin: 20px 0 0px !important;
	}

	#pun #pun-stats .container {
		padding: 15px 15px 0px !important;
		flex-direction: column;
		display: flex;
		height: auto
	}
	

	.ststitems {
		display: none
	}

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

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

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

	#pun .forum tr {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 5px;
		background: var(--cover2);
		padding: 10px !important;
		border-radius: 10px;
	}

	#pun .forum .tcr {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: right
	}
	
	#pun .forum .user-avatar {
		display: none;
	}

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

	#pun-messages .fs-box {
		padding: 25px 15px 15px !important;
	}

	#pun .post-author {
		float: none !important;
		width: 100% !important;
		margin: 0 0 20px !important;
		background: var(--accent);
		padding: 10px
	}

	.toBlock {
		float: none !important;
	}
	
	.field_wrap {
		background: red;
		margin-top: 5px !important;
		width: 100%;
		display: flex;
		grid-area: fld;
		background: var(--pun);
		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 -10px !important;
		justify-self: stretch;
		text-align: left !important;
	}

	#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-body {
		margin: 0 !important;
		padding: 10px !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: calc(100% - 20px)
	}

	.go-up span,
	.go-down span {
		padding: 0 0px !important;
		font-size: 0
	}

	#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;
		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)
	}

	#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;
	}
	#pun-navlinks #New-exit {
		top: 2px
	}

	#pun-messages input.longinput {
		max-width: 100%;
		box-sizing: border-box;
	}
	    #pun-navlinks #New-exit img {
        max-width: 15px !important;
    }
    #pun #pun-navlinks #form-login {
        margin-left: -200px !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;
    }
	#BookmCntToggle {
		top: 60px !important;
		left: 10px !important;
	}
	.banners_wrapper {
		margin: 0 -15px -15px !important;
	}
}