html {
color: #FFF;
font-style: normal;
font-family: 'HelveticaRegular', 'Arial', sans-serif;
height: 100%;
background-color: black;
}
html:after {
content: "";
position: fixed;
margin-top: -2560px;
margin-left: -2560px;
top: 50%;
left: 50%;
width: 5120px;
height: 5120px;
background: linear-gradient(rgba(0, 5, 5, .70) 33%, rgba(0, 0, 0, .35) 48%,rgba(0, 0, 5, .70) 63%),url("./resources/background.png");
z-index: -20;
-webkit-transform: rotate(-15deg);
background-size: 2.7%;
transform: rotate(-15deg);
animation:bk 900s infinite linear;
}
@font-face{font-family:'HelveticaRegular';src:url("./resources/fonts/HelveticaRegular.ttf");}
body {
background: transparent;
max-width: 800px;
height: 100%;
margin: auto;
box-shadow: -2px 0 0 #333,2px 2px 0 #333, 0 0 15px #000;
}
footer {
display: grid;
gap: 4px;
padding: 5px;
text-align: center;
grid-template-columns: repeat(8,minmax(10px,1fr));
grid-template-rows: 1fr 40px 15px;
justify-content: space-between;
background-color: transparent;
box-shadow: 0 -2px 0 #333;
}
.footer-button {
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
transition: 0.6s;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.75);
border: 2px solid #959595;
}
.header {
background: linear-gradient(to bottom, #696969 0%, #555555 49%, #303030 50%, #262626 100%);
display: grid;
gap: 0;
grid-template-columns: 35px 35px 1fr 35px 35px;
grid-template-rows: 40px;
outline: 2px solid #333;
place-items: center;
padding-left: 3px;
padding-right: 3px;
}
.header a {
border-radius: 4px;
}
.header button, h4 {
color: #eee;
background: transparent;
width: 28px;
height: 28px;
line-height: 28px;
border: 1px solid #393939;outline: 1px solid #878787;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
border-radius: 4px;
font-size: 75%;
letter-spacing: 1px;
text-indent: 2px;
transition: 0.3s;
}
.header .center {overflow: hidden;white-space: nowrap;border: none;outline: none;box-shadow: none;text-overflow: ellipsis; width: auto; font-size: 110%;}
.header-button { backdrop-filter: brightness(120%);cursor: pointer;}
.header-button:disabled {cursor: auto;color: #bbb;box-shadow: inset 0 0 2px #111;backdrop-filter: brightness(60%) contrast(80%)}
.header-button#yarusskiy {cursor: url("./resources/rus_switch.png"), auto;}
.header a:link, a:visited {box-shadow: inset 0 0 2px #aaa;text-decoration: none;}
.header a:hover, .header-button:hover:enabled {box-shadow: inset 0 0 3px #ddd;background: radial-gradient(at 50% 150%, #c00 0%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, #696969 0%, #555555 49%, #303030 50%, #262626 100%);transition: 0.3s;}
.header .header-button:active {background: radial-gradient(at 50% 150%, #900 0%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, #696969 0%, #555555 49%, #303030 50%, #262626 100%);transition: 0.3s;}

hr {z-index:999;margin: auto;border: 1px solid #545b62;}

.tabcontent::-webkit-scrollbar {background: transparent;width: 6px;}
.tabcontent::-webkit-scrollbar-track {background: transparent;border-radius: 3px;margin: 6px;}
.tabcontent::-webkit-scrollbar-thumb {box-shadow: inset -1px -2px 2px #222;background: #333;border-radius: 5px;width: 1px;}
a:link, a:visited {color: white;background-color: transparent;text-decoration: none;}
a:hover {color: #fff;text-decoration: none;/*text-shadow: -2px 0 7px #ccc, 2px 0 7px #ccc;*/transition: 0.2s;}
a:active {color: #fff;text-decoration: none;/*text-shadow: -2px 0 7px #ccc, 2px 0 7px #ccc;*/transition: 0.2s;}
.tab {
display: flex;
gap: 2px;
padding: 0 20px;
padding-top: 10px;
}
.tab p {display:inline; font-size: 90%}
@media (max-width : 800px){.tab p{font-size: clamp(60%, 60% + 12 * (100vw - 200px) / 800, 90%);}
}
.tab button {
background: linear-gradient(to bottom, #696969 0%, #555555 49%, #303030 50%, #262626 100%);
border: none;
outline: none;
cursor: pointer;
color: white;
letter-spacing: 1pt;
border: 2px solid #555;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.tab button.active {
background: transparent;
box-shadow: inset 0 2px 3px rgba(150, 0, 0, .5);
border-top: 2px solid #711;
box-shadow: 0 4px 7px #111;
border-bottom: 2px solid #151515;
z-index: 10;
}
.tab button.active:hover {
background: transparent;
cursor: auto;
}
.tab button:hover {
background: linear-gradient(to bottom, #696969 0%, #888888 49%, #303030 50%, #262626 100%);
}
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
background: linear-gradient(45deg,#0000000D 4.2%, #8080800D 13.5%,#0000000D 13.6%,#0000000D 19.9%,#8080800D 20%,#0000000D 27.1%,#8080800D 27.2%,#0000000D 38.5%,#FFFFFF0D 38.6%,#0000000D 42.5%,rgba(128, 128, 128, 0) 44.9%,#0000000D 45%,#0000000D 47.5%,#8080800D 47.6%,#8080800D 52.4%,#0000000D 52.5%,#0000000D 60.8%,#8080800D 60.9%,#FFFFFF0D 66.6%,#0000000D 72.6%,#8080800D 72.7%,#0000000D 76.3%,#8080800D 76.4%,#FFFFFF0D 82.9%,#0000000D 83%,#0000000D 88%,#8080800D 90.2%,#0000000D 90.3%,#8080800D 100%);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: #333 transparent;
scroll-snap-type: x mandatory;
outline: 2px solid #555;
box-shadow: inset 1px 1px 5px #333,inset -1px -1px 5px #333;
margin: 0 10px;
border-radius: 13px;
margin-bottom: 10px;
}
.tabcontent h3, p {
  animation: fadeEffect 1s;
}
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
.content
{
display: grid;
width:100%;
grid-template-rows: 35px 1fr;
position: absolute;
overflow: hidden;
top: 42px;bottom:0;
max-width: 800px;
background-size: 100%;
backdrop-filter: blur(2px) contrast(95%);
}
.buttonpad
{
padding: 10px;
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 150px;
place-items: space-evenly;
background: transparent;
}
.button {
background: linear-gradient(to right, rgba(178, 69, 146, 1) 0%, rgba(241, 95, 121, 0.75)  35%, rgba(178, 69, 146, 0) 100%),url("./resources/background.png");
/*background-size: 100%;*/
display: flex;
justify-content: center;
align-items: center;
min-width: 50px;
border-radius: 10px;
transition: 0.7s;
box-shadow: inset 0 0 20px var(--a),0 0 10px rgba(30, 30, 30, 0.5);
}
.button:hover {transform: scale(0.975);animation:a 1s infinite alternate ease-in-out;box-shadow:inset 0 0 20px var(--a),0 0 10px rgba(30, 30, 30, 0.5);background-position: 0% -200%;transition: 0.7s;}
/*
#id1-btn,#id2-btn,#id3-btn,#id4-btn {background: linear-gradient(to right, rgba(178, 69, 146, 1) 0%, rgba(241, 95, 121, 0.75)  35%, rgba(178, 69, 146, 0) 100%),url("./resources/background.png");background-size: 100%;text-decoration: none;transition: 0.7s;}
#id1-btn:hover {animation:a 10s infinite linear;background: repeating-conic-gradient(from var(--a),  red 0%, green 15%, blue 20%);background-position: bottom;}*/
@keyframes bk{from {background-position: 0 100%;}to{background-position: 0 0;}}
@keyframes chan{from {transform: rotate(-5deg);}to{transform: rotate(2deg);}}
@keyframes a{from {--a:#000;}to {--a:#A00;}}
@property --a{syntax: '<color>';inherits: false;initial-value: #000;}

.wide{letter-spacing: 1px;padding: 5px;font-size: 70%;grid-column: -1 / 1; order:-1;}
.widetwo{box-shadow: none;border: none;letter-spacing: 1px;padding: 2px;font-size: 50%;grid-column: -1 / 1; order:1;}
.styleone:link,.styleone:visited  {background-color: transparent;text-decoration: none;}
.styleone:hover {border-color: #990c23;background-color: #560e1d;text-decoration: none;transition: 0.5s;}
.styleone:active {border-color: #ae021e;background-color: #830921;text-decoration: none;transition: 0.5s;}
.tyanochka {
transform: rotate(0deg);
transform-origin: 5% 56%;
animation:chan 0.75s infinite alternate ease-in-out;
}
.tyanochka-glass
{
display: block;
width:100%;
position: absolute;
top: 42px;bottom:0;
max-width: 800px;
overflow: hidden;
background: linear-gradient(40deg,#00000000 10.1%,#ffffff33 10.2%, #ffffff0D 13.5%,#00000000 13.6%,#00000000 23.4%,#ffffff4D 23.5%,#ffffff0D 28%,#00000000 28.1%,#00000000 32.9%,#ffffff0D 33%,#ffffff0D 40%,#00000000 40.1%,#00000000 54.9%,#ffffff0D 55%,#ffffff33 64.9%,#0000000D 65%,#00000000 100%);
background-size: 100%;
backdrop-filter: contrast(105%);
}
.tyanochka-grid
{
display: grid;
font-style: italic;
grid-template-rows: 31vh 7vh 7vh 7vh 1fr 7vh 4vh 8vh;
width:100%;
text-align: right;
position: absolute;
top: 42px;bottom:0;
max-width: 450px;
overflow: hidden;
background: transparent;
font-size: 200%;
white-space: nowrap;
text-shadow: 2px 2px 1px #333;
letter-spacing: 1px;
}