#display_switch {
	width: 20px;
	height: 21px;
	font-size: 0;
	z-index: 999;
  position: fixed;
  display: block;
	align-self: center;
    top: 50px;
    right: 50px;
}

#display_switch.style_mobile-off:before {
	content: "";
	background: url(https://forumstatic.ru/files/001c/04/9e/86663.svg);
	width: 20px;
	height: 21px;
	position: absolute;
	display: block;
	top: 0;
	left: 0
}

#display_switch.style_mobile-on:before {
	content: "";
	background: url(https://forumstatic.ru/files/001c/04/9e/13841.svg);
	width: 20px;
	height: 21px;
	position: absolute;
	display: block;
	top: 0;
	left: 0
}

.mobile_header {
    display: none;
}


@media screen and (max-width: 540px) {
	
	.best_post, .quests, .persons, .mini-info, .ams, .slide_button, .fire_gif, .bottle_gif, #tk_persons, #pun-title, .void_gif, .rain_gif, .header-music {
    display: none !important;
	}

	body {
    background-size: cover !important;
	}

	#pun {
    background: #939e9c url(https://forumstatic.ru/files/001c/26/f5/60852.png) center;
    background-size: auto !important;
    position: relative;
	}

	.punbb {
    padding: 0px !important;
	}

	.punbb:after {
    display: none
	}

	#pun-main {
    padding: 10px
	}

	.multipage {
    margin: 0 !important;
	}

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

	#pun-navlinks {
    position: relative;
    left: -1px;
    background: #000;
    border-bottom: 1px solid #251f25 !important;
    box-shadow: 0 1px 10px #000, 0 -1px 0 0 #251f25 inset, 0 -2px 0 0 #000;
    justify-content: flex-start
	}

	#pun-navlinks.section {
    width: auto !important;
	}


	#pun-navlinks ul.container {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    padding: 0 10px !important;
	}

	#pun #pun-navlinks .container li a {
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    -moz-background-clip: padding-box !important;
    -o-background-clip: padding-box !important;
    width: auto !important;
	}

	#pun-navlinks a {
    color: #42425c !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    -moz-background-clip: padding-box !important;
    -o-background-clip: padding-box !important;
    margin: 0
	}

	#pun-navlinks li a span {
    font-size: 0;
    display: none
	}

	#navpr_1 li span {
    font-size: 0;
    display: none
	}

	#navpr_2 li span {
    font-size: 0;
    display: none
	}

	#navindex a:before {
    content: "\f015";
    font-family: FontAwesome;
    font-size: 14px
	}

	#navuserlist a:before {
    content: "\f0c0";
    font-family: FontAwesome;
	}

	#navsearch a:before {
    content: "\f002";
    font-family: FontAwesome;
	}

	#navpm a:before {
    content: "\f0e0";
    font-family: FontAwesome;
	}

	#navprofile a:before {
    content: "\f2bb";
    font-family: FontAwesome;
	}

	#navadmin a:before {
    content: "\f085";
    font-family: FontAwesome;
	}

	#navlogin a:before {
    content: "\f090";
    font-family: FontAwesome;
	}

	#navlogout a:before {
    content: "\f08b";
    font-family: FontAwesome;
	}

	#navregister a:before {
    content: "\f067";
    font-family: FontAwesome;
	}

	#navpr_2 a:before {
    content: "\f0f3";
    font-family: FontAwesome;
	}

	#navpr_1 a:before {
    content: "\f21b";
    font-family: FontAwesome;
	}


	#navindex a span {
    display: block;
	}

	#navuserlist a span {
    display: block;
	}

	#navawards a span {
    display: block;
	}

	#navsearch a span {
    display: block;
	}

	#navpm a span {
    display: block;
	}

	#navprofile a span {
    display: block;
	}

	#navadmin a span {
    display: block;
	}

	#navlogin a span {
    display: block;
	}

	#navlogout a span {
    display: block;
	}

	#navregister a span {
    display: block;
	}

	#navpr_1 a span {
    display: block;
	}

	#navpr_2 a span {
    display: block;
	}

	#pun-ulinks:before,
	#pun-ulinks:after {
    display: none
	}

	#pun #pun-ulinks .container {
    background: #070d0f;
    border: 1px solid #251f25 !important;
    box-shadow: 0 1px 10px #000, 0 1px 0 0 #251f25 inset, 0 2px 0 0 #000;
    padding: 10px !important;
    width: auto !important;
	}

	#pun #pun-ulinks {
    background: transparent !important;
    box-shadow: none !important;
    right: 0px !important;
    top: 0px !important;
    position: absolute;
	}

	#pun #pun-ulinks:before {
    content: "\f0c9";
    font-family: FontAwesome;
    font-size: 22px;
    color: #42425c;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat;
    text-align: center;
    line-height: 45px
	}

	#pun .category h2 {
    margin: -20px -10px -20px !important;
    white-space: normal;
    background-position-x: center !important;
    width: auto !important;
	}

	#pun-index #pun-category1 h2 {
    margin-top: -65px !important;
	}

	#pun .category .container {
    padding: 20px;
    margin: 0px !important;
	}

	#pun .category tr {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px
	}

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

	#pun .category .tcr, #pun .category .tclcon {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px !important;
	}

	#pun .Add {
    display: none
	}
	
	#pun-stats {
    margin: -90px 0 0 !important;
	}

	.ststitems {
    flex-wrap: wrap;
    margin-top: -30px !important;
	}

	#pun-stats .container {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
	}
	
	#pun-about .container .item1 {
    width: 100%;
    text-align: center;
	}
	
	#pun-about .container .item1 a {
    color: #9e9e9e
	}
	
	#pun-about p.container {
    background: #070d0f;
    width: auto !important;
    margin: 0 0 0px !important;
    padding: 0 !important;
    border: none !important;
    height: 120px !important;
	}
	
	.bottom_banners {
    width: 100%;
	}

	div#html-footer {
    height: 0 !important;
    border: none !important;
	}

	#pun #pun-crumbs1,
	#pun #pun-crumbs2 {
    display: block !important;
    width: auto !important;
    margin: 0 10px 0px !important;
	}

	#pun-index #pun-crumbs2 {
    display: none !important;
	}

	.forum tr {
    display: table;
    padding: 0 10px !important;
	}

	.forum div.icon {
    display: block !important;
    width: 10px;
    height: 10px
	}

	#pun tbody.hasicon td.tcl {
    padding: 0 !important;
	}

	#pun .intd .tclcon {
    flex: 1
	}

	#pun-index table Div.icon.inew {
    display: block !important;
	}

	#pun .post h3 {
    width: auto !important;
    margin: 30px -10px -27px !important;
    background-position-x: center
	}
	
	#pun-messages .post h3 {
    margin-top: 0 !important;
    height: auto !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
	}
	
	#pun .post h3 span {
    background: transparent !important;
    text-align: left !important;
	}
	
	#pun-messages .post h3 span {
    padding: 10px !important;
	}
	
	#pun .post-author {
    margin: 0 -10px 10px !important;
    background: #070d0f !important;
    border: 1px solid #251f25 !important;
    box-shadow: 0 1px 10px #000, 0 1px 0 0 #251f25 inset, 0 2px 0 0 #000;
    width: auto !important;
    padding: 0 !important;
	}

	#pun .post-author ul {
    margin: 0 !important;
    width: 100%;
    padding: 10px !important;
    box-sizing: border-box;
    text-align: left
	}

	#pun .pa-author, #pun .post-author .pa-title {
    display: block;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto
	}
	
	#pun .pa-avatar {
    position: absolute;
    right: 10px;
    top: 10px
	}

	#pun textarea {
    max-width: 100% !important;
	}

	#pun #profile-left,
	#pun #profile-right {
    background: rgba(116, 109, 101, .15) !important;
	border-radius: 15px !important;
	border: 1px solid #495144 !important;
	}

	#pun #profile-left li {
    background: transparent !important;
    border: none !important;
	}

	#profile-right {
    margin-top: 10px
	}

	#pun #profile-right li {
    border: none !important;
    background: var(--fill2) !important;
	}

	#profilenav {
    width: 100%
	}

	#profilenav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 !important;
	}

	#profilenav li {
    background: rgba(116, 109, 101, .15) !important;
	border-radius: 15px !important;
	border: 1px solid #495144 !important;
    border-radius: 10px;
    padding: 4px 10px;
    flex: auto;
    text-align: center
	}

	#pun-messages .fs-box .container tr {
    display: table;
    width: 100% !important;
	}

	#pun-messages div.icon {
    display: block !important;
	}

	.go-up {
    bottom: 180px;
    margin-left: 0 !important;
    right: 0px;
	}

	.go-down {
    bottom: 50px;
    margin-left: 0 !important;
    right: 0
	}
	#pun-announcement {
    position: relative;
    z-index: 1;
    border: none !important;
	}
	#pun .user-avatar {
    display: none !important;
	}
	#form-buttons tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	}
	#pun-announcement .html-box {
    padding: 0 0 10px !important;
    border: none !important;
	}
	
	.mobile_header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #070d0f;
    border-bottom: 1px solid #251f25 !important;
    box-shadow: 0 1px 10px #000, 0 1px 0 0 #251f25 inset, 0 2px 0 0 #000;
    margin: -5px 0px 20px !important;
    color: var(--text2);
	  text-shadow: 1px 1px 0px rgba(0, 0, 0, .4);
    font-family: alice;
    box-sizing: border-box;
    padding: 15px 20px;
	}
	.mobile_hello {
    font-size: 12px;
	}
	.mobile_header p {
    padding: 0 !important;
    height: 50px;
    overflow-y: auto;
    text-align: left
	}
	#display_switch {
    top: 60px;
    right: 10px;
	}
}

/* музыка */
.header-music {
    position: absolute;
    width: 27px;
    height: 30px;
    z-index: 13;
    margin-left: 282px;
    top: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.music-container {
    width: 27px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
}

audio {
	display: none;
}

.play-button {
    width: 29px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 46px;
    left: 645px;
}

.play-button::before,
.play-button.playing::before {
	content: '';
	display: inline-block;
	border: 0;
	box-sizing: border-box;
	width: 29px;
	height: 33px;
	background: url(https://forumstatic.ru/files/001c/26/f5/34075.png);
	transition: 100ms all ease;
	cursor: pointer;
}


	#display_switch {
	width: 20px;
	height: 21px;
	font-size: 0;
	z-index: 999;
  position: fixed;
  display: block;
	align-self: center;
    top: 50px;
    right: 50px;
}

#display_switch.style_mobile-off:before {
	content: "";
	background: url(https://forumstatic.ru/files/001c/04/9e/86663.svg);
	width: 20px;
	height: 21px;
	position: absolute;
	display: block;
	top: 0;
	left: 0
}

#display_switch.style_mobile-on:before {
	content: "";
	background: url(https://forumstatic.ru/files/001c/04/9e/13841.svg);
	width: 20px;
	height: 21px;
	position: absolute;
	display: block;
	top: 0;
	left: 0
}

.mobile_header {
    display: none;
}


@media screen and (max-width: 540px) {
	
	.best_post, .quests, .persons, .mini-info, .ams, .slide_button, .fire_gif, .bottle_gif, #tk_persons, #pun-title {
    display: none !important;
	}

	body {
    background-size: cover !important;
	}

	#pun {
    background: #a2988e url(https://forumstatic.ru/files/001c/04/9e/34017.png) center;
    background-size: auto !important;
    position: relative;
	}

	.punbb {
    padding: 0px !important;
	}

	.punbb:after {
    display: none
	}

	#pun-main {
    padding: 10px
	}

	.multipage {
    margin: 0 !important;
	}

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

	#pun-navlinks {
    position: relative;
    left: -1px;
    background: #070d0f;
    border-bottom: 1px solid #251f25 !important;
    box-shadow: 0 1px 10px #000, 0 -1px 0 0 #251f25 inset, 0 -2px 0 0 #000;
    justify-content: flex-start
	}

	#pun-navlinks.section {
    width: auto !important;
	}


	#pun-navlinks ul.container {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    padding: 0 10px !important;
	}

	#pun #pun-navlinks .container li a {
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    -moz-background-clip: padding-box !important;
    -o-background-clip: padding-box !important;
    width: auto !important;
	}

	#pun-navlinks a {
    color: #42425c !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    -moz-background-clip: padding-box !important;
    -o-background-clip: padding-box !important;
    margin: 0
	}

	#pun-navlinks li a span {
    font-size: 0;
    display: none
	}

	#navpr_1 li span {
    font-size: 0;
    display: none
	}

	#navpr_2 li span {
    font-size: 0;
    display: none
	}

	#navindex a:before {
    content: "\f015";
    font-family: FontAwesome;
    font-size: 14px
	}

	#navuserlist a:before {
    content: "\f0c0";
    font-family: FontAwesome;
	}

	#navsearch a:before {
    content: "\f002";
    font-family: FontAwesome;
	}

	#navpm a:before {
    content: "\f0e0";
    font-family: FontAwesome;
	}

	#navprofile a:before {
    content: "\f2bb";
    font-family: FontAwesome;
	}

	#navadmin a:before {
    content: "\f085";
    font-family: FontAwesome;
	}

	#navlogin a:before {
    content: "\f090";
    font-family: FontAwesome;
	}

	#navlogout a:before {
    content: "\f08b";
    font-family: FontAwesome;
	}

	#navregister a:before {
    content: "\f067";
    font-family: FontAwesome;
	}

	#navpr_2 a:before {
    content: "\f0f3";
    font-family: FontAwesome;
	}

	#navpr_1 a:before {
    content: "\f21b";
    font-family: FontAwesome;
	}


	#navindex a span {
    display: block;
	}

	#navuserlist a span {
    display: block;
	}

	#navawards a span {
    display: block;
	}

	#navsearch a span {
    display: block;
	}

	#navpm a span {
    display: block;
	}

	#navprofile a span {
    display: block;
	}

	#navadmin a span {
    display: block;
	}

	#navlogin a span {
    display: block;
	}

	#navlogout a span {
    display: block;
	}

	#navregister a span {
    display: block;
	}

	#navpr_1 a span {
    display: block;
	}

	#navpr_2 a span {
    display: block;
	}

	#pun-ulinks:before,
	#pun-ulinks:after {
    display: none
	}

	#pun #pun-ulinks .container {
    background: #070d0f;
    border: 1px solid #251f25 !important;
    box-shadow: 0 1px 10px #000, 0 1px 0 0 #251f25 inset, 0 2px 0 0 #000;
    padding: 10px !important;
    width: auto !important;
	}

	#pun #pun-ulinks {
    background: transparent !important;
    box-shadow: none !important;
    right: 0px !important;
    top: 0px !important;
    position: absolute;
	}

	#pun #pun-ulinks:before {
    content: "\f0c9";
    font-family: FontAwesome;
    font-size: 22px;
    color: #42425c;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat;
    text-align: center;
    line-height: 45px
	}

	#pun .category h2 {
    margin: -20px -10px -20px !important;
    white-space: normal;
    background-position-x: center !important;
    width: auto !important;
	}

	#pun-index #pun-category1 h2 {
    margin-top: -65px !important;
	}

	#pun .category .container {
    padding: 20px;
    margin: 0px !important;
	}

	#pun .category tr {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px
	}

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

	#pun .category .tcr, #pun .category .tclcon {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px !important;
	}

	#pun .Add {
    display: none
	}
	
	#pun-stats {
    margin: -90px 0 0 !important;
	}

	.ststitems {
    flex-wrap: wrap;
    margin-top: -30px !important;
	}

	#pun-stats .container {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
	}
	
	#pun-about .container .item1 {
    width: 100%;
    text-align: center;
	}
	
	#pun-about .container .item1 a {
    color: #9e9e9e
	}
	
	#pun-about p.container {
    background: #070d0f;
    width: auto !important;
    margin: 0 0 0px !important;
    padding: 0 !important;
    border: none !important;
    height: 120px !important;
	}
	
	.bottom_banners {
    width: 100%;
	}

	div#html-footer {
    height: 0 !important;
    border: none !important;
	}

	#pun #pun-crumbs1,
	#pun #pun-crumbs2 {
    display: block !important;
    width: auto !important;
    margin: 0 10px 0px !important;
	}

	#pun-index #pun-crumbs2 {
    display: none !important;
	}

	.forum tr {
    display: table;
    padding: 0 10px !important;
	}

	.forum div.icon {
    display: block !important;
    width: 10px;
    height: 10px
	}

	#pun tbody.hasicon td.tcl {
    padding: 0 !important;
	}

	#pun .intd .tclcon {
    flex: 1
	}

	#pun-index table Div.icon.inew {
    display: block !important;
	}

	#pun .post h3 {
    width: auto !important;
    margin: 30px -10px -27px !important;
    background-position-x: center
	}
	
	#pun-messages .post h3 {
    margin-top: 0 !important;
    height: auto !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
	}
	
	#pun .post h3 span {
    background: transparent !important;
    text-align: left !important;
	}
	
	#pun-messages .post h3 span {
    padding: 10px !important;
	}
	
	#pun .post-author {
    margin: 0 -10px 10px !important;
    background: #070d0f !important;
    border: 1px solid #251f25 !important;
    box-shadow: 0 1px 10px #000, 0 1px 0 0 #251f25 inset, 0 2px 0 0 #000;
    width: auto !important;
    padding: 0 !important;
	}

	#pun .post-author ul {
    margin: 0 !important;
    width: 100%;
    padding: 10px !important;
    box-sizing: border-box;
    text-align: left
	}

	#pun .pa-author, #pun .post-author .pa-title {
    display: block;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto
	}
	
	#pun .pa-avatar {
    position: absolute;
    right: 10px;
    top: 10px
	}

	#pun textarea {
    max-width: 100% !important;
	}

	#pun #profile-left,
	#pun #profile-right {
    background: rgba(116, 109, 101, .15) !important;
	border-radius: 15px !important;
	border: 1px solid #495144 !important;
	}

	#pun #profile-left li {
    background: transparent !important;
    border: none !important;
	}

	#profile-right {
    margin-top: 10px
	}

	#pun #profile-right li {
    border: none !important;
    background: var(--fill2) !important;
	}

	#profilenav {
    width: 100%
	}

	#profilenav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 !important;
	}

	#profilenav li {
    background: rgba(116, 109, 101, .15) !important;
	border-radius: 15px !important;
	border: 1px solid #495144 !important;
    border-radius: 10px;
    padding: 4px 10px;
    flex: auto;
    text-align: center
	}

	#pun-messages .fs-box .container tr {
    display: table;
    width: 100% !important;
	}

	#pun-messages div.icon {
    display: block !important;
	}

	.go-up {
    bottom: 180px;
    margin-left: 0 !important;
    right: 0px;
	}

	.go-down {
    bottom: 50px;
    margin-left: 0 !important;
    right: 0
	}
	#pun-announcement {
    position: relative;
    z-index: 1;
    border: none !important;
	}
	#pun .user-avatar {
    display: none !important;
	}
	#form-buttons tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	}
	#pun-announcement .html-box {
    padding: 0 0 10px !important;
    border: none !important;
	}
	
	.mobile_header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: url(https://forumstatic.ru/files/001c/26/f5/95720.png) no-repeat center / cover;
    border-style: solid;
    border-color: red;
    border-width: 8px 10px 8px 10px !important;
    border-image: url(https://forumstatic.ru/files/001c/26/f5/11957.png) stretch 8 10;
    box-sizing: border-box;
    margin: -5px 0px 20px !important;
    color: var(--text2);
	  text-shadow: 1px 1px 0px rgba(0, 0, 0, .4);
    font-family: alice;
    box-sizing: border-box;
    padding: 15px 20px;
    height: 184px;
	}
	.mobile_hello, .mobile_about {
    font-size: 12px;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 5px;
	}
	.mobile_header p {
    height: 70px;
    overflow-y: auto;
    text-align: left;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 5px !important;
	}
	#display_switch {
    top: 74px;
    right: 10px;
	}
}