/* ########################################################################## */
/* Mobile adaptation */
/* ########################################################################## */

@media (max-width: 1280px){
header .l6, .t5, .s5{ display: none; }
}
@media (max-width: 1220px){
header .l5, .t4, .s4{ display: none; }
}
@media (1140px <= width <= 1280px){
header .t3, .s3{ display: none; }
}

@media (max-width: 1100px) {

section#index_frame{
	background: none;
}

header#common_headersill{
	background: none; height: 190px;
	margin: 0;
}
header#common_sky, span#common_mobile1, span#common_mobile2, footer h3.banners {
	display: none;
}
header#common_header{
	background: url("./images/header_logo.webp") no-repeat center;
	width: 90%; height: 170px; margin: auto;
	display: block;
}

div#common_content, div#index_content{ padding: 0; }
div#common_artpost, div#blog_flex{ border-radius: unset; }
div#common_artpost, div#blog_left{ padding: 18px 18px; }
  
footer, section, article, div#index_content, div#common_content, .shrink{ width: 100%; }
header#index_header, header#common_header{
	background-size: calc(100% - 24px);
}
#index_tabs { padding: 0; }

#index_feature{
	/*width: calc(100% - 24px);*/
}
#index_feature #gallery_listing{
	margin: auto;
}
#index_feature #gallery_listing a{
	flex-basis: 100%;
}

#gallery_listing a:hover, .comm .art:hover{ transform: unset; }

article .avatar{ display: none; }
article #admin li{ width: calc(50%); }

.comm{ width: 100%; }

}
/* ########################################################################## */

@media (max-width: 844px) {

#index_tabs{
	grid-template-areas:
		'tab_a'
		'tab_b'
		'tab_c'
		'page';
	grid-template-rows: 40px 40px 40px 100%;
}
div#blog_flex{
	grid-template-areas:
		'left'
		'right';
	grid-template-columns: auto;
}
div#blog_right{
    border-top: 3px double var(--grey); border-left: none;
}

#index_about #contacts a{
	flex-basis: calc(50% - 8px); flex-grow: 1;
}

#gallery_listing a{
	flex-basis: 100%; flex-grow: 1;
}

#index_links a{ 
	display: block; position: relative;
	text-align: center !important;
	width: 100%; line-height: 150px !important;
	color: var(--secondary);
	padding: 0;	margin-bottom: 4px;
}
#index_about{ width: 100%; padding: 0 16px; }

#wiki_char a{
	flex-basis: calc(50% - 4px); line-height: 64px; text-shadow: 0 -2px 0 var(--link1);
}
.game_links a{
	flex-basis: calc(50% - 4px);
}
.misc_links a{ flex-basis: 100%; }
.game_logo{
	width: 100%;
}
.game_screen{ 
	float: unset; width: 100%; height: auto; 
	margin: 0 auto 12px auto; padding: 1px; 
}

.infobox{
	margin: 0 !important;
	float: unset !important; 
	width: 100% !important;
}
.comm .entry{ flex-basis: 100%; flex-direction: column; }
.comm .entry .art img{ width: 70%; height: auto; margin: auto; }

a#il_art, a#il_blog, a#il_games, a#il_chars, a#il_else{ top: unset; left: unset; width: unset; line-height: unset; }
a#il_else{ line-height: 70px !important; }

footer #columns{ display: block; }
footer #columns div{ width: calc(100% - 32px); margin: auto; }

footer h3{ width: calc(100% - 32px); font-size: inherit; flex-direction: column; margin: 0 auto 16px auto; }
footer h3 a{ line-height: 28px; display: block; }
footer h3.banners{ width: 100%; }

.error #errorbox{ width: 100%; }
}