* {
	margin: 0;
	padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    flex: 1;
}

main {
    flex: 1 1 auto;
 	font-family: sans-serif;
    background: rgb(245, 245, 245);
    background: linear-gradient(170deg, rgba(245, 245, 220,1) 1%, rgba(250, 240, 230,1) 11%, rgba(255, 240, 245,1) 34%, rgba(245, 255, 250,1) 69%, rgba(255, 228, 225,1) 86%, rgba(240, 255, 255,1) 99%); 	color: black;
	padding: 10px;
	padding-top: 30px;
	display: flex;
	width: 100%;
	position: relative;
}
header {
	background-color: #4682B4;
	background-image: url(/img/headerimg.png);
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	color: #ffb500;
	font-family: 'Unbounded', cursive;
    vertical-align: middle;
    font-size: 2em;
	padding: 10px;
	width: 100%;
	border-bottom: 4px solid #330000;
	position: sticky;
	top: 0;
	z-index: 100;
}
header img {
	vertical-align: middle;
	margin: 10px 20px 10px 10px;
}
footer {
	background-color: #1D334A;
	color: #ffb500;
	padding: 10px;
	font-family: 'Unbounded', cursive;
	font-size: small;
	font-weight: 200;
	width: 100%;
	border-top: 7px solid #663333;
	flex-shrink: 0;
	position: sticky;
	bottom: 0;
	z-index: 90;
}
table {
	border-collapse: collapse;
    border-spacing: 0px 0px;
    text-align: left;
}
td {
  	padding: 4px 5px;
	vertical-align: top;
	color: #000977;
	font-size: small;
}
thead {
	background-color: rgba(0,130,195,0.5);
	color: #330000;
	font-weight: bolder;
	font-family: 'Unbounded', cursive;
}
tr:nth-child(odd) {
  background-color: rgba(99, 184, 255, 0.2);
}
tr:nth-child(even) {
  background-color: rgba(240, 255, 240, 0.5);
}
.imgborder {
	  border: 10px solid #663333;
}
.contentall {
	padding-left: 40px;
	float: left;
	width: calc(70% - 30px);
	position: relative;
  z-index: 3;
}
.imgright {
   	float: right;
 	  width: 30%;
   	margin-left: 20px;
   	position: fixed;
   	right: 10px;
   	top: 130px;
   	z-index: 1;
}
.txtsimple {
	padding-left: 40px;
	float: left;
	width: 100%;
	line-height: 1.2;
	margin-bottom: 2;
}
.table_header {	
	background-color: rgba(0,130,195,0.5);
	color: #330000;
	font-weight: bolder;
}
.table_even, .table_even_bold, .table_odd {	
	vertical-align: top;
	color: #000977;
	font-size: small;
}
.table_odd {	
	background-color: rgba(230, 254, 130, 0.2);
}
.table_even_bold {	
	font-weight: bold;
}
.table_odd:hover, .table_even:hover, .table_even_bold:hover {
	color: #792f14;
}
.headerlink {
	background-color: rgba(0,130,195,0.7);
	color: #330000;
	font-size: x-large;
	text-decoration: none;
	padding: 5px 30px;
	font-family: 'Unbounded', cursive;
	font-weight: 600;
}
.headerlink:hover {
 background: rgb(0, 225, 195);
}
.linknodeco, .linknodeco:visited, .linknodeco:active {
	text-decoration: none;
  color: #ffb500;
}
.linknodeco:hover {
	text-decoration: underline;

}
.link_noident {
	color: #ffb500;
	text-decoration: none;
}
.link_noident:hover {
	text-decoration: underline;
	color: yellowgreen;
}

/* Accessible navigation links - replaces onclick divs */
a.btntxt {
	text-decoration: none;
	color: #663333;
	display: flex;
	align-items: center;
	justify-content: center;
}
a.btntxt:visited {
	color: #663333;
}
a.btntxt:hover {
	background-color: rgba(0, 130, 195, 0.1);
}
.link_noident:visited {
	text-decoration: none;
}
.link_internal {
	color: #330000;
	text-decoration: none;
}
.link_internal:hover {
	font-weight: bold;
	text-decoration: underline;
	text-decoration-color: #330000;
}
.link_internal:visited {
	text-decoration: none;
}
.tabcontent {
  width: 640px;
  word-break: all;
  display: inline-block;	
}
.tabcontentbutton {
    width: 200px;
    height: 100px;
	background-color: rgba(31, 200, 230, 0.5);
	text-align: center;
	vertical-align: middle;
	word-break: all;
}
.tabcontentbutton:hover {
 	background-color: rgba(230, 254, 130, 0.2);
	text-align: center;
	vertical-align: middle;
	word-break: all;
}

.tabcontentspace {
  width: 20px;
	background-color: #ffe603;
}
.table_light {
	background-color: #FFEBCD;
	font-size: small;
	line-height: 1.5;
	vertical-align: top;
}
.coro {
	text-indent: 15px;
	font-weight: bold;
		color: darkslategray;
}
.text_in_song {
	font-style: italic;
	color: darkslategray;
}
.btntxt {
	color: #663333;
  	word-break: all;	
	text-decoration: none;	
	font-family: 'Unbounded', cursive;
	font-weight: 400;
	text-align: center;
}
.btntxt:hover {
	font-weight: 600;
}	
.remark {
	color: #002277;
  	word-break: all;	
	text-decoration: none;	
	font-family: 'Unbounded', cursive;
	font-size: small;
	font-style: italic;
	font-weight: 200;
}
.list {
	color: #060045;
  	word-break: all;	
	text-decoration: none;	
	font-family: 'Unbounded', cursive;
	font-size: small;
	font-weight: 400;
	text-indent: -15px;
}
.txtindent {
	margin-bottom: 20px;
}
.lastchange {
	color: #ffb500;
	text-decoration: none;
	font-family: 'Unbounded', cursive;
	 font-weight: 400;

background: linear-gradient(to right,  rgb(62, 95, 138) 50%,rgb(188, 143, 143), transparent 100%);
	font-weight: bold;
	padding: 2px;
}
#lastchangebtn {
	color: #330000;
	text-decoration: none;
  background: rgb(0, 225, 195);
  border: none;
	padding: 3px 7px;	
	font-family: 'Unbounded', cursive;
	font-weight: 200;
}

.SectionTitle {
	width: calc(100% - 30px);
  height: 30px;
	word-break: all;
  background-color: rgba(0,130,195,0.5);
  font-family: 'Unbounded', cursive;
  color: #330000;
	font-weight: bolder;
  padding-left: 10px;
  display: flex;
  align-items: center;
  margin-left: 10px;
	margin-top: 20px;}

.flex-container {
  display: flex;
  flex-direction: row;
  font-family: 'Unbounded', cursive;
  flex-wrap: wrap;  /* переход на новую строку*/
/*  background-color: lavender;
*/  width: 100%;
}

.flex-container > div,
.flex-container > a {
  width: 150px;
  height: 100px;
  margin: 10px;
  padding: 3px;
	background-color: rgba(31, 200, 230, 0.5);
	text-align: center;
	word-break: all;
	flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
 }
.flex-container > div:hover,
.flex-container > a:hover {
 	background-color: rgba(230, 254, 130, 0.2);
 	cursor: pointer;
}

        .lang-selector {
            display: flex;
            gap: 8px;
            float: right;
            padding: 4px 8px;
            border-radius: 8px;
        }

        .lang-selector label {
            cursor: pointer;
            font-size: 14px;
            padding: 5px 10px;
            border-radius: 5px;
            background-color: #f8f9fa;
            transition: background-color 0.3s;
        }

        .lang-selector label:hover {
            background-color: #e9ecef;
        }

        .lang-selector input[type="radio"] {
            display: none;
        }

        .lang-selector input[type="radio"]:checked + label {
            background-color: #0099CC;
            color: white;
        }

        /* Text size utility class - replaces deprecated <font> tags */
        .text-lg {
            font-size: 1.15em;
        }

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */

/* Loading spinner */
.loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(0, 130, 195, 0.3);
    border-top-color: #0082C3;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 20px auto;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.content-loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

/* Responsive iframes */
iframe {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
}

/* Dynamic image sizing */
main img {
	max-width: 90vw;
	max-height: 50vh;
	height: auto;
}
main img[align="right"],
main img[style*="float: right"],
main img[style*="float:right"] {
	max-width: 45%;
}
@media screen and (max-width: 768px) {
	main img[align="right"],
	main img[style*="float: right"],
	main img[style*="float:right"] {
		float: none !important;
		display: block;
		margin: 10px auto;
		max-width: 90vw;
	}
}

/* Responsive tables */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Wide content overflow protection */
main table,
main pre {
	max-width: 100%;
	overflow-x: auto;
	display: block;
}

/* Tablets and small desktops (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .imgright {
        position: static;
        float: none;
        width: 100%;
        text-align: center;
        margin: 20px 0;
    }
    .imgright img {
        height: auto;
        max-height: 300px;
    }
    .contentall {
        width: 100%;
        float: none;
        padding-left: 20px;
        padding-right: 20px;
    }
    .txtsimple {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Mobile phones (max-width: 768px) */
@media screen and (max-width: 768px) {
    .contentall, .txtsimple, .list {
        overflow-x: hidden;
    }
    header {
        font-size: 1.2em;
        padding: 8px;
    }
    header img {
        width: 50px;
        margin: 5px 10px 5px 5px;
    }
    main {
        padding: 8px;
        padding-top: 15px;
        flex-direction: column;
    }
    .contentall {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        float: none;
    }
    .txtsimple {
        padding-left: 10px;
        padding-right: 10px;
    }
    .imgright {
        display: none;
    }
    .flex-container > div,
    .flex-container > a {
        width: calc(50% - 20px);
        height: 80px;
        font-size: 0.85em;
    }
    .SectionTitle {
        width: 100%;
        margin-left: 0;
        font-size: 0.85em;
    }
    .tabcontent {
        width: 100%;
    }
    /* Linearize tables for mobile: stack cells vertically */
    main table {
        display: block;
        width: 100% !important;
        overflow-x: visible;
    }
    main tbody, main thead {
        display: block;
        width: 100%;
    }
    main tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    main td, main th {
        display: block;
        width: 100% !important;
        padding: 3px 4px;
        font-size: 0.85em;
    }
    /* Hide empty spacer cells */
    main td:empty {
        display: none;
    }
    main td img {
        width: 100%;
        height: auto !important;
        max-height: 50vh;
        object-fit: contain;
    }
    footer {
        font-size: x-small;
        padding: 8px;
    }
    iframe {
        max-width: 100%;
    }
}

/* Small phones (max-width: 480px) */
@media screen and (max-width: 480px) {
    header {
        font-size: 1em;
        padding: 6px;
    }
    .flex-container > div,
    .flex-container > a {
        width: 100%;
        height: 60px;
        margin: 5px 0;
    }
    .contentall, .txtsimple {
        padding-left: 8px;
        padding-right: 8px;
    }
}