/* Общие стили шапки и подвала сайта - начало */

	.profile {
		align-content: center;
		justify-self: center;
		border: 0;
		background: 0;
		line-height: 0; /* Фикс для центрирования кнопки */
	}
	
	.profile #avatar { border-radius: 60px; }

/* Настройки светлой темы (начало) */
@media (prefers-color-scheme: light) {

	.TOP-MENU {
		background: #BB874D;
	}

	.sandwich {
		color: #F5F5F5;
	}	
	
	.sandwich-dropdown, .profile-dropdown, .fable1-dropdown, .fable2-dropdown,
	.fable3-dropdown, .other-dropdown, .modding-dropdown {
		background-color: rgba(226, 202, 175, 0.9);		
	}
	.sandwich-dropdown > a, .sandwich-dropdown > a:link, .sandwich-dropdown > a:visited,
	.profile-dropdown a, .profile-dropdown a:link, .profile-dropdown a:visited,
	.fable1-dropdown > a, .fable1-dropdown > a:link, .fable1-dropdown > a:visited,
	.fable2-dropdown > a, .fable2-dropdown > a:link, .fable2-dropdown > a:visited,
	.fable3-dropdown > a, .fable3-dropdown > a:link, .fable3-dropdown > a:visited,
	.other-dropdown > a, .other-dropdown > a:link, .other-dropdown > a:visited,
	.modding-dropdown > a, .modding-dropdown > a:link, .modding-dropdown > a:visited {
		color: #8C6E32;
	}
	.profile-dropdown p:nth-child(n+2):hover {
		background-color: #F5F5F5;
	}
	
	.headline svg {
		fill: #F5F5F5;					
	}

	.headline, .headline a,
	.headline a:link, .headline a:visited {
		color: #F5F5F5;
		text-decoration: none;
	}

	.top-menu-list, .top-menu-list li {
		color: #F5F5F5;	
	}
		.top-menu-list > li:hover {
			background-color: #F5F5F5;
		}

		.top-menu-list > li > a, .top-menu-list > li > a:link, .top-menu-list > li > a:visited {
			color: #F5F5F5;
			text-decoration: none;
		}
		
		.top-menu-list > li:hover > a,
		.top-menu-list > li:hover > a:link,
		.top-menu-list > li:hover > a:visited {
			color: #b5977b;
		}
			.top-menu-list > li:hover > a::after {
				content: '▼';
				color: #b5977b;
			}
	
	.profile > svg:last-child { display: none; }
	
		.profile	.tsst1, .tsst2, .tsst3, .tsst4 {
			stroke: #F5F5F5;
			fill: #F5F5F5;
			stroke-linejoin: round;
		}
	
	#SITE-COVER > form > .search-form-2nd-class {
		background: #BB874D;
	}
	#SITE-COVER > form > .search-form-2nd-class > svg {
		fill: #F5F5F5;
		stroke: #F5F5F5;
	}

}
/* Настройки светлой темы (конец) */

/* Настройки темной темы (начало) */
@media (prefers-color-scheme: dark) {

	.TOP-MENU {
		background: #282420;
		border-bottom: 1px solid #dad5cd;
	}
	
	.sandwich,
	.sandwich-dropdown > a, .sandwich-dropdown > a:link, .sandwich-dropdown > a:visited,
	.profile-dropdown a, .profile-dropdown a:link, .profile-dropdown a:visited,
	.profile-dropdown,
	.fable1-dropdown > a, .fable1-dropdown > a:link, .fable1-dropdown > a:visited,
	.fable2-dropdown > a, .fable2-dropdown > a:link, .fable2-dropdown > a:visited,
	.fable3-dropdown > a, .fable3-dropdown > a:link, .fable3-dropdown > a:visited,
	.other-dropdown > a, .other-dropdown > a:link, .other-dropdown > a:visited,
	.modding-dropdown > a, .modding-dropdown > a:link, .modding-dropdown > a:visited {
		color: #dad5cd;
	}	
	
	.sandwich-dropdown, .profile-dropdown, .fable1-dropdown, .fable2-dropdown,
	.fable3-dropdown, .other-dropdown, .modding-dropdown {
		background-color: #282420;		
	}
	.profile-dropdown p:nth-child(n+2):hover {
		background-color: #F5F5F5;
	}
	.profile-dropdown p:nth-child(n+2):hover > a,
	.profile-dropdown p:nth-child(n+2):hover > a:link,
	.profile-dropdown p:nth-child(n+2):hover > a:visited {
		color: #8C6E32;
	}
	
	.headline svg {
		fill: #dad5cd;					
	}

	.headline, .headline a,
	.headline a:link, .headline a:visited {
		color: #dad5cd;
		text-decoration: none;
	}	

	.top-menu-list, .top-menu-list li {
		color: #dad5cd;	
	}
		.top-menu-list a, .top-menu-list a:link, .top-menu-list a:visited {
			color: #dad5cd;
			text-decoration: none;
		}
		.top-menu-list > li {
			border-right: 1px solid #dad5cd;
		}
	
	.profile > svg:first-child { display: none; }
	.profile > svg:last-child { display: initial !important; }

		.profile .tsdt1, .tsdt2, .tsdt3, .tsdt4 {
			stroke: #dad5cd;
			fill: #dad5cd;
			stroke-linejoin: round;
		}
	
	#SITE-COVER > form > .search-form-2nd-class {
		background: #282420;
	}
	#SITE-COVER > form > .search-form-2nd-class > svg {
		fill: #dad5cd;
		stroke: #dad5cd;
	}
	
}
/* Настройки темной темы (конец) */

	.headline { font-family: "Russo One", sans-serif; }

	.top-menu-list li {
		list-style-type: none;
		display: inline-block;
	}

	.top-menu-list > li > a::after {
		content: '▼';
	}

	.sandwich-dropdown, .fable1-dropdown, .fable2-dropdown,
	.fable3-dropdown, .other-dropdown, .modding-dropdown {
		display: block;
		position: absolute;
		visibility: hidden;
		height: auto;
		font-family: 'Open Sans Condensed';
		font-style: normal;
		font-weight: 600;
		z-index: 1000;
		transition: visibility 0.1s;
		border-radius: 0px 0px 10px 10px;
	}
	
	.sandwich:hover + .sandwich-dropdown, .sandwich-dropdown:hover,
	.top-menu-fable1:hover > .fable1-dropdown, .fable1-dropdown:hover,
	.top-menu-fable2:hover > .fable2-dropdown, .fable2-dropdown:hover,
	.top-menu-fable3:hover > .fable3-dropdown, .fable3-dropdown:hover,
	.top-menu-other:hover > .other-dropdown, .other-dropdown:hover,
	.top-menu-modding:hover > .modding-dropdown, .modding-dropdown:hover {
		visibility: visible;
	}
	
	.sandwich-dropdown > a, .sandwich-dropdown > a:link, .sandwich-dropdown > a:visited,
	.fable1-dropdown > a, .fable1-dropdown > a:link, .fable1-dropdown > a:visited,
	.fable2-dropdown > a, .fable2-dropdown > a:link, .fable2-dropdown > a:visited,
	.fable3-dropdown > a, .fable3-dropdown > a:link, .fable3-dropdown > a:visited,
	.other-dropdown > a, .other-dropdown > a:link, .other-dropdown > a:visited,
	.modding-dropdown > a, .modding-dropdown > a:link, .modding-dropdown > a:visited {
		display: block;
		width: 100%;
		padding-left: 8%;
		margin-bottom: 1%;
		text-decoration: none;
	}
	
	.sandwich-dropdown > a:hover, 
	.fable1-dropdown > a:hover, 
	.fable2-dropdown > a:hover, 
	.fable3-dropdown > a:hover, 
	.other-dropdown > a:hover,
	.modding-dropdown > a:hover {
		background-color: #F5F5F5;
		color: #8C6E32;
	}
	
	.profile-dropdown {
		z-index: 1000;
	}
	
	#SITE-COVER > form > .search-form-1st-class, #SITE-COVER > form > .search-form-2nd-class {
		border: 0px;
	}
	
/* Общие стили шапки и подвала сайта - конец */


/* Начало медиазапроса на минимальную ширину экрана 1366px */
@media all and (min-width: 1366px) {
	
		.TOP-MENU {
			grid-area: TOP-MENU;
			width: 100%;
			display: grid; 
			grid-template-columns: 4% 11% auto 3%;
			grid-template-rows: 35px;
			gap: 0px 0px;
			grid-template-areas: 
				"sandwich headline top-menu-list profile"; 
			align-items: center;
			/*position: relative;*/
			position: sticky;
			top: 0;
			z-index: 1000;
		}
		
			.sandwich {
				grid-area: sandwich;
				height: 100%;
				align-content: center;
				justify-self: center;
				cursor: pointer;
				font-size: 1.4em;
				border: 0;
				background: none;
			}
			
			.sandwich-dropdown {
				top: 88%;
				left: 1%;
				width: 10%;
				padding-top: 0.7em;
				padding-bottom: 0.7em;
				font-size: 1em;
			}
			
			.fable1-dropdown, .fable2-dropdown,
			.fable3-dropdown, .other-dropdown,
			.modding-dropdown {
				width: 12%;
				font-size: 1.5em;
				padding-top: 0.7em;
				padding-bottom: 0.7em;
				top: 35px;
			}
			
			.headline {
				grid-area: headline;
				display: flex;
				align-items: center;
				font-size: 1em;
			}
				.headline svg {
					width: 0.9em;
					height: 0.9em;
					margin-right: 2%;
				}
			
		.top-menu-list {
			grid-area: top-menu-list;	
			font-family: "Open Sans", sans-serif;
			font-size: 0.7em;
			height: 100%;
			align-content: center; 
		}
		.top-menu-list > li {
			display: inline-flex;
			height: 100%;
			font-family: 'Open Sans';
			font-style: normal;
			font-weight: 400;
			letter-spacing: 1px;
			align-items: center;
			padding-left: 1%;
			padding-right: 1%;
		}
				
			.profile {
				grid-area: profile;
				display: flex;
				align-items: center;
				justify-content: right;
				height: 100%;
				cursor: pointer;
			}
			
			.profile-dropdown {
				visibility: hidden;
				position: absolute;
				top: 100%;
				left: 86%;
				width: 180px;
				height: auto;
				font-family: 'Open Sans Condensed';
				font-style: normal;
				font-weight: 500;
				font-size: 1em;
				padding-bottom: 0.7em;
				transition: visibility 0.1s;
				border-radius: 0px 0px 10px 10px;
			}
				.profile:hover + .profile-dropdown, .profile-dropdown:hover {
					visibility: visible;
				}
				.profile-dropdown > p:first-child {
					text-align: center;
					margin-top: 5%;
				}
				.profile-dropdown > p:first-child > img {
					width: 64px;
					height: 64px;
					border-radius: 30px 30px 30px 30px;
				}
				.profile-dropdown > p:nth-child(2) {
					font-size: 1.2em;
					text-align: center;
					font-weight: 600;
					margin-top: 5%;
				}
				.profile-dropdown > p:nth-child(n+3) {
					margin-top: 1%;
					padding-left: 6%;
				}
				.profile-dropdown a, .profile-dropdown a:link, .profile-dropdown a:visited {
					display: block;
					width: 100%;
					text-decoration: none;
				}
				.profile svg, .profile img {
					display: block;
					height: 28px;
					width: 28px;
				}
				
				
				.profile .tsst1, .profile .tsdt1 {
					stroke-width: 60px;
				}

				.profile .tsst1 {
					/* Нимб */
					stroke-width: 1px;
				}
				.profile .tsst2, .profile .tsdt2 {
					/* Ноздри и усы */
					stroke-width: 20px;
				}
				.profile .tsst3 {
					/* Овал лица и глаза */
					stroke-width: 45px;
				}
				.profile .tsst4, .profile .tsdt4 {
					/* Уши и рот */
					stroke-width: 22px;
				}
				.profile .tsdt1 {
					/* Нимб */
					stroke-width: 8px;
				}
				.profile .tsdt3 {
					/* Овал лица и глаза */
					stroke-width: 65px;
				}

		#SITE-COVER {
			grid-area: SITE-COVER;
			background-image: url('/images/bg.jpg');
			background-size: cover;
			background-position: bottom;
			height: 240px;
		}	
			#SITE-COVER > form {
				position: relative;
				width: 14%;
				height: 2em;
				left: 80%;
				top: 14%;
				border: 0px;
			}		
				#SITE-COVER > form > .search-form-1st-class {
					width: 100%;
					height: 100%;
					-webkit-border-radius: 5px 0 0 5px;
					border-radius: 5px 0 0 5px;
					padding-left: 7px;
					font-size: 0.7em;
					text-align: left;
					vertical-align: middle;
				}			
				#SITE-COVER > form > .search-form-2nd-class {
					position: absolute;
					top: 0%;
					left: 100%;
					width: 40px;
					height: 100%;
					cursor: pointer;
					border-radius: 0 5px 5px 0;
				}
				#SITE-COVER > form > .search-form-2nd-class > svg {
					width: 50%;
					height: 50%;
					text-align: center;
					vertical-align: middle;	
				}
		
		footer {
			display: grid;
			grid-area: FOOTER;
			font-size: 0.9em;
			font-family: "Open Sans Condensed";
			font-style: normal;
			font-weight: 300;
			letter-spacing: 0.5px;
			line-height: 18px;
			text-align: center;
			align-items: center;
		}
			footer > div {
				width: 60%;
				margin-left: 20%;
				margin-right: 20%;
			}

			@media (prefers-color-scheme: dark) {
				.top-menu-list li:first-child {
					border-left: 1px solid #dad5cd;
				}			
			}
		
}
/* Конец медиазапроса на минимальную ширину экрана 1366px */


/* Начало медиазапроса на ширину экрана 1024-1365px */
@media all and (min-width: 1024px) and (max-width: 1366px) {
	
		.TOP-MENU {
			grid-area: TOP-MENU;
			width: 100%;
			display: grid; 
			grid-template-columns: 4% 11% auto 3%;
			grid-template-rows: 35px;
			gap: 0px 0px;
			grid-template-areas: 
				"sandwich headline top-menu-list profile"; 
			align-items: center;
			/*position: relative;*/
			position: sticky;
			top: 0;
			z-index: 1000;
		}
		
			.sandwich {
				grid-area: sandwich;
				height: 100%;
				align-content: center;
				justify-self: center;
				cursor: pointer;
				font-size: 1.2em;
				border: 0;
				background: none;
			}
			
			.sandwich-dropdown {
				top: 88%;
				left: 1%;
				width: 10%;
				font-size: 0.8em;
				padding-top: 0.7em;
				padding-bottom: 0.7em;
			}
			
			.fable1-dropdown, .fable2-dropdown,
			.fable3-dropdown, .other-dropdown,
			.modding-dropdown {
				width: 12%;
				font-size: 1.2em;
				padding-top: 0.7em;
				padding-bottom: 0.7em;
				top: 35px;
			}
			
			.headline {
				grid-area: headline;
				display: flex;
				align-items: center;
				font-size: 0.9em;
			}
				.headline svg {
					width: 0.9em;
					height: 0.9em;
					margin-right: 2%;
				}
			
		.top-menu-list {
			grid-area: top-menu-list;	
			font-family: "Open Sans", sans-serif;
			font-size: 0.6em;
			height: 100%;
			align-content: center; 
		}	
		.top-menu-list > li {
			display: inline-flex;
			height: 100%;
			font-family: 'Open Sans';
			font-style: normal;
			font-weight: 400;
			letter-spacing: 1px;
			align-items: center;
			padding-left: 1%;
			padding-right: 1%;
		}
				
			.profile {
				grid-area: profile;
				display: flex;
				align-items: center;
				justify-content: right;
				height: 100%;
				cursor: pointer;
			}
			
			.profile-dropdown {
				visibility: hidden;
				position: absolute;
				top: 100%;
				left: 82%;
				width: 180px;
				height: auto;
				font-family: 'Open Sans Condensed';
				font-style: normal;
				font-weight: 500;
				font-size: 1em;
				padding-bottom: 0.7em;
				transition: visibility 0.1s;
				border-radius: 0px 0px 10px 10px;
			}
				.profile:hover + .profile-dropdown, .profile-dropdown:hover {
					visibility: visible;
				}
				.profile-dropdown > p:first-child {
					text-align: center;
					margin-top: 5%;
				}
				.profile-dropdown > p:first-child > img {
					width: 64px;
					height: 64px;
					border-radius: 30px 30px 30px 30px;
				}
				.profile-dropdown > p:nth-child(2) {
					color: #F5F5F5;
					font-size: 1.2em;
					text-align: center;
					font-weight: 600;
					margin-top: 5%;
				}
				.profile-dropdown > p:nth-child(n+3) {
					margin-top: 1%;
					padding-left: 6%;
				}
				.profile-dropdown a, .profile-dropdown a:link, .profile-dropdown a:visited {
					display: block;
					width: 100%;
					text-decoration: none;
				}
			
		#SITE-COVER {
			grid-area: SITE-COVER;
			background-image: url('/images/bg.jpg');
			background-size: cover;
			background-position: bottom;
			height: 180px;
		}
			#SITE-COVER > form {
				position: relative;
				width: 10%;
				height: 2em;
				left: 85%;
				top: 10%;
				border: 0px;
			}		
				#SITE-COVER > form > .search-form-1st-class {
					width: 100%;
					height: 100%;
					-webkit-border-radius: 5px 0 0 5px;
					border-radius: 5px 0 0 5px;
					padding-left: 7px;
					font-size: 0.7em;
					text-align: left;
					vertical-align: middle;
				}			
				#SITE-COVER > form > .search-form-2nd-class {
					position: absolute;
					top: 0%;
					left: 100%;
					width: 40px;
					height: 100%;
					cursor: pointer;
					border-radius: 0 5px 5px 0;
				}
				#SITE-COVER > form > .search-form-2nd-class > svg {
					width: 50%;
					height: 50%;
					text-align: center;
					vertical-align: middle;	
				}	
				.profile svg, .profile img {
					display: block;
					height: 28px;
					width: 28px;
				}
				.profile .tsst1 {
					stroke-width: 60px;
				}
				.profile .tsst1 {
					/* Нимб */
					stroke-width: 1px;
				}
				.profile .tsst2 {
					/* Ноздри и усы */
					stroke-width: 20px;
				}
				.profile .tsst3 {
					/* Овал лица и глаза */
					stroke-width: 45px;
				}
				.profile .tsst4 {
					/* Уши и рот */
					stroke-width: 22px;
				}
				.profile .tsdt1 {
					stroke-width: 60px;
				}
				.profile .tsdt1 {
					/* Нимб */
					stroke-width: 8px;
				}
				.profile .tsdt2 {
					/* Ноздри и усы */
					stroke-width: 20px;
				}
				.profile .tsdt3 {
					/* Овал лица и глаза */
					stroke-width: 65px;
				}
				.profile .tsdt4 {
					/* Уши и рот */
					stroke-width: 22px;
				}
		
		footer {
			display: grid;
			grid-area: FOOTER;
			font-size: 0.9em;
			font-family: "Open Sans Condensed";
			font-style: normal;
			font-weight: 300;
			letter-spacing: 0.5px;
			line-height: 18px;
			text-align: center;
			align-items: center;
		}	
			footer > div {
				width: 60%;
				margin-left: 20%;
				margin-right: 20%;
			}
			
			@media (prefers-color-scheme: dark) {
				.top-menu-list li:first-child {
					border-left: 1px solid #dad5cd;
				}
			}
		
}
/* Конец медиазапроса на ширину экрана 1024-1365px */


/* Начало медиазапроса на ширину экрана 886-1023px */
@media all and (min-width: 886px) and (max-width: 1024px) {
	
		.TOP-MENU {
			grid-area: TOP-MENU;
			width: 100%;
			display: grid; 
			grid-template-columns: 4% 15% 76% 5%;
			grid-template-rows: 30px;
			gap: 0px 0px;
			grid-template-areas: 
				"sandwich headline top-menu-list profile"; 
			align-items: center;
			/*position: relative;*/
			position: sticky;
			top: 0;
			z-index: 1000;
		}
		
			.sandwich {
				grid-area: sandwich;
				height: 100%;
				align-content: center;
				justify-self: center;
				cursor: pointer;
				font-size: 1em;
				border: 0;
				background: none;
			}
			
			.sandwich-dropdown {
				top: 88%;
				left: 1%;
				width: 10%;
				font-size: 0.7em;
				padding-top: 0.7em;
				padding-bottom: 0.7em;
			}
			
			.fable1-dropdown, .fable2-dropdown,
			.fable3-dropdown, .other-dropdown,
			.modding-dropdown {
				width: 12%;
				font-size: 1.2em;
				padding-top: 0.7em;
				padding-bottom: 0.7em;
				top: 30px;
			}
			
			.headline {
				grid-area: headline;
				display: flex;
				align-items: center;
				font-size: 0.7em;
			}
				.headline svg {
					width: 1em;
					height: 1em;
					margin-right: 2%;

				}
			
		.top-menu-list {
			grid-area: top-menu-list;		
			font-family: "Open Sans", sans-serif;
			font-size: 0.5em;
			height: 100%;
			margin-left: 4%;
		}
		
		.top-menu-list > li {
			display: inline-flex;
			height: 100%;
			font-family: 'Open Sans';
			font-style: normal;
			font-weight: 400;
			letter-spacing: 1px;
			align-items: center;
			padding-left: 1%;
			padding-right: 1%;
		}
				
			.profile {
				grid-area: profile;
				display: flex;
				align-items: center;
				justify-content: right;
				height: 100%;
				cursor: pointer;
			}
			
			.profile-dropdown {
				visibility: hidden;
				position: absolute;
				top: 100%;
				left: 78%;
				width: 170px;
				height: auto;
				font-family: 'Open Sans Condensed';
				font-style: normal;
				font-weight: 500;
				font-size: 0.9em;
				padding-bottom: 0.7em;
				transition: visibility 0.1s;
				border-radius: 0px 0px 10px 10px;
			}
				.profile:hover + .profile-dropdown, .profile-dropdown:hover {
					visibility: visible;
				}
				.profile-dropdown > p:first-child {
					text-align: center;
					margin-top: 5%;
				}
				.profile-dropdown > p:first-child > img {
					width: 48px;
					height: 48px;
					border-radius: 30px 30px 30px 30px;
				}
				.profile-dropdown > p:nth-child(2) {
					color: #F5F5F5;
					font-size: 1.1em;
					text-align: center;
					font-weight: 600;
					margin-top: 5%;
				}
				.profile-dropdown > p:nth-child(n+3) {
					margin-top: 1%;
					padding-left: 6%;
				}		
				.profile-dropdown a, .profile-dropdown a:link, .profile-dropdown a:visited {
					display: block;
					width: 100%;
					text-decoration: none;
				}
				.profile svg, .profile img {
					display: block;
					height: 24px;
					width: 24px;
				}
				.profile .tsst1 {
					stroke-width: 60px;
				}
				.profile .tsst1 {
					/* Нимб */
					stroke-width: 1px;
				}
				.profile .tsst2 {
					/* Ноздри и усы */
					stroke-width: 20px;
				}
				.profile .tsst3 {
					/* Овал лица и глаза */
					stroke-width: 45px;
				}
				.profile .tsst4 {
					/* Уши и рот */
					stroke-width: 22px;
				}
				.profile .tsdt1 {
					stroke-width: 60px;
				}
				.profile .tsdt1 {
					/* Нимб */
					stroke-width: 8px;
				}
				.profile .tsdt2 {
					/* Ноздри и усы */
					stroke-width: 20px;
				}
				.profile .tsdt3 {
					/* Овал лица и глаза */
					stroke-width: 65px;
				}
				.profile .tsdt4 {
					/* Уши и рот */
					stroke-width: 22px;
				}

		#SITE-COVER {
			grid-area: SITE-COVER;
			background-image: url('/images/bg.jpg');
			background-size: cover;
			background-position: bottom;
			height: 160px;
		}
			#SITE-COVER > form {
				position: relative;
				width: 15%;
				height: 1.8em;
				left: 80%;
				top: 13%;
				border: 0px;
			}		
				#SITE-COVER > form > .search-form-1st-class {
					width: 100%;
					height: 100%;
					-webkit-border-radius: 5px 0 0 5px;
					border-radius: 5px 0 0 5px;
					padding-left: 7px;
					font-size: 0.7em;
					text-align: left;
					vertical-align: middle;
				}			
				#SITE-COVER > form > .search-form-2nd-class {
					position: absolute;
					top: 0%;
					left: 100%;
					width: 40px;
					height: 100%;
					cursor: pointer;
					border-radius: 0 5px 5px 0;
				}
				#SITE-COVER > form > .search-form-2nd-class > svg {
					width: 50%;
					height: 50%;
					text-align: center;
					vertical-align: middle;	
				}
		
		footer {
			display: grid;
			grid-area: FOOTER;
			font-size: 0.8em;
			font-family: "Open Sans Condensed";
			font-style: normal;
			font-weight: 300;
			letter-spacing: 0.5px;
			line-height: 18px;
			text-align: center;
			align-items: center;
		}
			footer > div {
				width: 60%;
				margin-left: 20%;
				margin-right: 20%;
			}

			@media (prefers-color-scheme: dark) {
				.top-menu-list li:first-child {
					border-left: 1px solid #dad5cd;
				}			
			}
	
}
/* Конец медиазапроса на ширину экрана 886-1023px */


/* Начало медиазапроса на ширину экрана 640-885px */
@media all and (min-width: 640px) and (max-width: 885px) {
	
		.TOP-MENU {
			grid-area: TOP-MENU;
			width: 100%;
			display: grid; 
			grid-template-columns: 4% 15% 76% 5%;
			grid-template-rows: 30px;
			gap: 0px 0px;
			grid-template-areas: 
				"sandwich headline top-menu-list profile"; 
			align-items: center;
			position: relative; /* Для выпадающего меню */
		}
		
			.sandwich {
				grid-area: sandwich;
				height: 100%;
				align-content: center;
				justify-self: center;
				cursor: pointer;
				font-size: 1em;
				border: 0;
				background: none;
			}
			
			.sandwich-dropdown {
				top: 88%;
				left: 1%;
				width: 12%;
				font-size: 0.7em;
				padding-top: 0.7em;
				padding-bottom: 0.7em;
			}
			
			.fable1-dropdown, .fable2-dropdown,
			.fable3-dropdown, .other-dropdown, .modding-dropdown {
				width: 20%;
				font-size: 1.2em;
				padding-top: 0.7em;
				padding-bottom: 0.7em;
				top: 30px;
			}
			
			.headline {
				grid-area: headline;
				display: flex;
				align-items: center;
				font-size: 0.7em;
			}
				.headline svg {
					width: 1em;
					height: 1em;
					margin-right: 2%;
				}
				
		.top-menu-list {
			grid-area: top-menu-list;	
			font-family: "Open Sans", sans-serif;
			font-size: 0.5em;
			height: 100%;
			margin-left: 4%;
		}	
		.top-menu-list > li {
			display: inline-flex;
			height: 100%;
			font-family: 'Open Sans';
			font-style: normal;
			font-weight: 400;
			letter-spacing: 1px;
			align-items: center;
			padding-left: 1%;
			padding-right: 1%;
		}
				
			.profile {
				grid-area: profile;
				display: flex;
				align-items: center;
				justify-content: right;
				height: 100%;
				cursor: pointer;
			}
			
			.profile-dropdown {
				visibility: hidden;
				position: absolute;
				top: 100%;
				left: 76%;
				width: 140px;
				height: auto;
				font-family: 'Open Sans Condensed';
				font-style: normal;
				font-weight: 500;
				font-size: 0.8em;
				padding-bottom: 0.7em;
				transition: visibility 0.1s;
				border-radius: 0px 0px 10px 10px;
			}
				.profile:hover + .profile-dropdown, .profile-dropdown:hover {
					visibility: visible;
				}
				.profile-dropdown > p:first-child {
					text-align: center;
					margin-top: 5%;
				}
				.profile-dropdown > p:first-child > img {
					width: 48px;
					height: 48px;
					border-radius: 30px 30px 30px 30px;
				}
				.profile-dropdown > p:nth-child(2) {
					color: #F5F5F5;
					font-size: 1.1em;
					text-align: center;
					font-weight: 600;
					margin-top: 5%;
				}
				.profile-dropdown > p:nth-child(n+3) {
					margin-top: 1%;
					padding-left: 6%;
				}
				.profile-dropdown a, .profile-dropdown a:link, .profile-dropdown a:visited {
					display: block;
					width: 100%;
					text-decoration: none;
				}
			
		#SITE-COVER {
			grid-area: SITE-COVER;
			background-image: url('/images/bg.jpg');
			background-size: cover;
			background-position: bottom;
			height: 160px;
		}
			#SITE-COVER > form {
				position: relative;
				width: 15%;
				height: 1.7em;
				left: 77%;
				top: 13%;
				border: 0px;
			}		
				#SITE-COVER > form > .search-form-1st-class {
					width: 100%;
					height: 100%;
					-webkit-border-radius: 5px 0 0 5px;
					border-radius: 5px 0 0 5px;
					padding-left: 7px;
					font-size: 0.7em;
					text-align: left;
					vertical-align: middle;
				}			
				#SITE-COVER > form > .search-form-2nd-class {
					position: absolute;
					top: 0%;
					left: 100%;
					width: 40px;
					height: 100%;
					cursor: pointer;
					border-radius: 0 5px 5px 0;
				}
				#SITE-COVER > form > .search-form-2nd-class > svg {
					width: 50%;
					height: 50%;
					text-align: center;
					vertical-align: middle;	
				}
				
				.profile svg, .profile img {
					display: block;
					height: 26px;
					width: 26px;
				}
				.profile .tsst1 {
					stroke-width: 60px;
				}
				.profile .tsst1 {
					/* Нимб */
					stroke-width: 1px;
				}
				.profile .tsst2 {
					/* Ноздри и усы */
					stroke-width: 20px;
				}
				.profile .tsst3 {
					/* Овал лица и глаза */
					stroke-width: 45px;
				}
				.profile .tsst4 {
					/* Уши и рот */
					stroke-width: 22px;
				}
				.profile .tsdt1 {
					stroke-width: 60px;
				}
				.profile .tsdt1 {
					/* Нимб */
					stroke-width: 8px;
				}
				.profile .tsdt2 {
					/* Ноздри и усы */
					stroke-width: 20px;
				}
				.profile .tsdt3 {
					/* Овал лица и глаза */
					stroke-width: 65px;
				}
				.profile .tsdt4 {
					/* Уши и рот */
					stroke-width: 22px;
				}
		
		footer {
			display: grid;
			grid-area: FOOTER;
			font-size: 0.8em;
			font-family: "Open Sans Condensed";
			font-style: normal;
			font-weight: 300;
			letter-spacing: 0.5px;
			line-height: 18px;
			text-align: center;
			align-items: center;
		}	
			footer > div {
				width: 80%;
				margin-left: 10%;
				margin-right: 10%;
			}
			
		@media (prefers-color-scheme: dark) {
			.top-menu-list li:first-child {
				border-left: 1px solid #dad5cd;
			}
		}
		
}
/* Конец медиазапроса на ширину экрана 640-885px */


/* Начало медиазапроса на ширину экрана до 639px */
@media all and (max-width: 639px) {
	
		.TOP-MENU {
			width: 100%;
			display: grid; 
			grid-template-columns: 12% 77% 11%;
			grid-template-rows: 40px 80px 35px;
			gap: 0px 0px;
			grid-template-areas:
				"sandwich headline profile"
				"top-menu-list top-menu-list top-menu-list"
				"social social social";
			align-items: center;
			justify-items: center;
			position: relative;
		}
		
			.sandwich {
				grid-area: sandwich;
				width: 100%;
				height: 100%;
				align-content: center;
				cursor: pointer;
				font-size: 1.4em;
				border: 0;
				background: none;
				padding-left: 0.6em;
				padding-right: 0.6em;
			}
			
			.sandwich-dropdown {
				top: 26px;
				left: 4%;
				width: 40%;
				font-size: 1em;
				font-weight: 500;
				padding-top: 0.7em;
				padding-bottom: 0.7em;
				border-radius: 10px;
			}
			
			.fable1-dropdown, .fable2-dropdown,
			.fable3-dropdown, .other-dropdown, .modding-dropdown {
				width: 100%;
				font-size: 1em;
				padding-top: 0.6em;
				padding-bottom: 0.6em;
				text-align: left;
				top: 100%; /* Фикс для мобильных 30.01.2026 */
			}
			
			.headline {
				grid-area: headline;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1.2em;
			}
				.headline svg {
					width: 0.9em;
					height: 0.9em;
					margin-right: 2%;
				}
		
		.top-menu-list {
			grid-area: top-menu-list;
			display: grid;
			font-family: "Open Sans", sans-serif;
			font-size: 0.8em;
			width: 100%;
			height: 100%;
			grid-template-rows: 1fr 1fr 1fr;
			grid-template-columns: 1fr 1fr;
		}

			.top-menu-list > li {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: center;
				/*align-content: center;
				-webkit-align-content: center; /* Пытались сделать фикс для старых iPhone */
				font-family: 'Open Sans';
				font-style: normal;
				font-weight: 400;
				letter-spacing: 1px;
				border-right: 1px solid #f5f5f5;
				border-bottom: 1px solid #f5f5f5;
				position: relative; /* Фикс для мобильных 30.01.2026 */
			}
				
			.profile {
				grid-area: profile;
				display: flex;
				align-items: center;
				justify-content: center;
				/*width: 100%;
				height: 100%;*/
				cursor: pointer;
				margin-right: 1.2em;
			}
				.profile svg, .profile img {
					display: block;
					height: 27px;
					width: 27px;						
					}
					
				.profile .tsst1 {
					stroke-width: 60px;
				}
				.profile .tsst1 {
					/* Нимб */
					stroke-width: 1px;
				}
				.profile .tsst2 {
					/* Ноздри и усы */
					stroke-width: 20px;
				}
				.profile .tsst3 {
					/* Овал лица и глаза */
					stroke-width: 45px;
				}
				.profile .tsst4 {
					/* Уши и рот */
					stroke-width: 22px;
				}
				.profile .tsdt1 {
					stroke-width: 60px;
				}
				.profile .tsdt1 {
					/* Нимб */
					stroke-width: 8px;
				}
				.profile .tsdt2 {
					/* Ноздри и усы */
					stroke-width: 20px;
				}
				.profile .tsdt3 {
					/* Овал лица и глаза */
					stroke-width: 65px;
				}
				.profile .tsdt4 {
					/* Уши и рот */
					stroke-width: 22px;
				}
			
			.profile-dropdown {
				visibility: hidden;
				position: absolute;
				top: 31px;
				right: 3%;
				width: 40%;
				height: auto;
				font-family: 'Open Sans Condensed';
				font-style: normal;
				font-weight: 500;
				font-size: 1em;
				padding-bottom: 0.7em;
				transition: visibility 0.1s;
				border-radius: 10px;
			}
				.profile:hover + .profile-dropdown, .profile-dropdown:hover {
					visibility: visible;
				}	
				.profile-dropdown > p:first-child {
					text-align: center;
					margin-top: 5%;
				}
				.profile-dropdown > p:first-child > img {
					width: 48px;
					height: 48px;
					border-radius: 30px 30px 30px 30px;
				}
				.profile-dropdown > p:nth-child(2) {
					color: #F5F5F5;
					font-size: 1.1em;
					text-align: center;
					font-weight: 600;
					margin-top: 5%;
				}
				.profile-dropdown > p:nth-child(n+3) {
					margin-top: 1%;
					padding-left: 6%;
				}
				.profile-dropdown a, .profile-dropdown a:link, .profile-dropdown a:visited {
					display: block;
					width: 100%;
					text-decoration: none;
				}
			
		#SITE-COVER {
			grid-area: SITE-COVER;
			background-image: url('/images/bg.jpg');
			background-size: cover;
			background-position: bottom;
			height: 200px;
		}
			#SITE-COVER > form {
				position: relative;
				width: 25%;
				height: 1.4em;
				left: 60%;
				top: 14%;
				border: 0px;
			}		
				#SITE-COVER > form > .search-form-1st-class {
					width: 100%;
					height: 100%;
					-webkit-border-radius: 5px 0 0 5px;
					border-radius: 5px 0 0 5px;
					padding-left: 7px;
					font-size: 0.8em;
					text-align: left;
					vertical-align: middle;
				}			
				#SITE-COVER > form > .search-form-2nd-class {
					position: absolute;
					top: 0%;
					left: 100%;
					width: 40px;
					height: 100%;
					cursor: pointer;
					border-radius: 0 5px 5px 0;
				}
				#SITE-COVER > form > .search-form-2nd-class > svg {
					width: 50%;
					height: 50%;
					text-align: center;
					vertical-align: middle;	
				}
		
		footer {
			display: grid;
			height: 70px;
			font-size: 0.8em;
			font-family: "Open Sans Condensed";
			font-style: normal;
			font-weight: 300;
			letter-spacing: 0.4px;
			line-height: 12px;
			text-align: center;
			align-items: center;
		}	
			footer > div {
				width: 80%;
				margin-left: 10%;
				margin-right: 10%;
			}

		@media (prefers-color-scheme: light) {
			.top-menu-list {
				border-top: 1px solid #F5F5F5;
				border-bottom: 1px solid #F5F5F5;
			}					
		}
		
		@media (prefers-color-scheme: dark) {
			.top-menu-list {
				border-top: 1px solid #dad5cd;
				border-bottom: 1px solid #dad5cd;
			}
				.top-menu-list a:last-child {
					border: 0;
				}			
		}
	
}
/* Конец медиазапроса на ширину экрана до 639px */