@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200;400;600&display=swap');
* {
	margin: 0;
	padding: 0;
    box-sizing: border-box;
}
body, html {
    height: 100%;
}
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 1 auto;
/*    padding: 20px;*/
 	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;	
/*	margin-top: 100px;*/
	width: 100%;
	position: relative;
/*  z-index: 2;*/
}
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:  fixed;
	top: 0px;
	left: 0px;
	position: relative;
/*   z-index: 1;*/
}
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;
}
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);
}
.restofpage {
	background: #4682B4;
	float: left;
  height: 500px;	
  width: 100%;
	padding: 10px;
}
.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: 50px;
   	z-index: 0;
}
.txtsimple {
	padding-left: 40px;
	float: left;
/*	width: 90%;	*/
	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;
}
.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: -moz-linear-gradient(left,  rgb(62, 95, 138) 50%,rgb(188, 143, 143), transparent 100%);
background: linear-gradient(to right,  rgb(62, 95, 138) 50%,rgb(188, 143, 143), transparent 100%);
background: -webkit-linear-gradient(left,  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 {
  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 {
 	background-color: rgba(230, 254, 130, 0.2);
 	cursor: pointer;
}

        .lang-selector {
            position: fixed;
            bottom: 5px;
            right: 20px;
            display: flex;
            gap: 10px;
        }

        .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;
        }
@media only screen and (orientation: portrait) {
ul {
    font-size: 30px;
}    
ol {
    font-size: 30px;
}    
li {
    font-size: 30px;
}    
.txtindent {
	margin-bottom: 20px;
	font-size: 30px;
}
.table_header {
	font-size: 40px;    
}
}