/*NunitoSans-Regular.ttf*/
@font-face {
  font-family: 'NunitoSans';
  src: url('../fonts/NunitoSans-Regular.ttf') format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: 'NunitoSans';
  src: url('../fonts/NunitoSans-Bold.ttf') format('truetype');
  font-weight: bold;
}
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}

/* start style */
:root {
  --main-bg-color: #282a36;
  --main-text-color: #c4c7cf;
  --main-scrollthumb-color: #8be9fd;
  --main-shadow-color: #8be9fd;
  --primary-theme-color: #bd93f9;
  --secondary-theme-color: #6272a4;
}
html, body, .container{
  height: 100%;
}
body {
  font-size: 17px;
  line-height: 1.2;
  font-family: "NunitoSans", Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: var(--main-text-color);
  background-color: var(--main-bg-color);
}
a {
  color: var(--primary-theme-color);
  text-decoration: none;
}
a:hover, a:visited:hover {
  text-decoration: underline;
}
a:visited {
  color: var(--primary-theme-color);
}
.scroll {
  overflow: auto;
}
.scroll::-webkit-scrollbar {
  width: 10px;
}
.scroll::-webkit-scrollbar-track {
  background: transparent;
}
.scroll::-webkit-scrollbar-thumb {
  background-color: var(--main-scrollthumb-color);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--main-scrollthumb-color) transparent;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header {
  text-align: center;
  color: var(--secondary-theme-color);
}

.textblock {
  text-align: center;
  padding: 0 2rem;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 30%;
  min-width: 300px;
  transition: transform .5s;
  transform: translateX(100%);
  background-color: var(--main-bg-color);
  box-shadow: 0px 4px 8px var(--main-shadow-color);
}
.sidebar.sidebar_visible {
  transform: translateX(0%);
}
.sidebar__content {
  position: relative;
  height: 100%;
  width: 100%;
}
.sidebar__text {
  height: 100%;
  width: 100%;
  padding: 0 2rem 2rem;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  background-color: var(--main-bg-color);
}
.sidebar__text h2 {
  color: var(--secondary-theme-color);
}
.sidebar__toggler {
  position: absolute;
  left: -16px;
  top: 49%;
  transform: rotate(-90deg);
  transform-origin: left;
  cursor: pointer;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: var(--main-bg-color);
  padding: .5rem 1rem;
  z-index: 1;
  box-shadow: 0px 4px 8px var(--main-shadow-color);
  color: var(--primary-theme-color);
}
.sidebar__close {
  position: absolute;
  right: 15px;
  top: 25px;
  font-size: 20px;
  cursor: pointer;
  z-index: 3;
}
.since {
  margin-top: 30px;
  text-align: center;
  color: var(--secondary-theme-color);
}
.bank-logos {
  height: 25px;
  position: fixed;
  bottom: 0;
  top: auto;
  left: 0;
  right: 0;
}

.progressbar {
  display: block;
  height: 3px;
  width: 100%;
  max-width: 300px;
  background: var(--secondary-theme-color);
  position: relative;
  margin-top: 40px;
}
.progressbar::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--primary-theme-color);
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(20%);
  transform-origin: left;
  animation: progress 8s linear;
  animation-fill-mode: forwards;
}
.progressbar::after {
  content: "20%";
  color: var(--secondary-theme-color);
  top: -23px;
  position: absolute;
  display: block;
  text-align: center;
  width: 100%;
  animation: progressText 8s linear;
  animation-fill-mode: forwards;
}
.adddd {
  opacity: 0;
  animation: adddd 8s linear;
  animation-fill-mode: forwards;
}
@keyframes adddd {
  from {opacity: 0;}
  99% {opacity: 0;}
  to {opacity: 1;}
}
@keyframes progress {
  from {transform: scaleX(20%);}
  50% {transform: scaleX(70%);}
  to {transform: scaleX(95%);}
}
@keyframes progressText {
  from {content: "разработка: 20%";}
   1% {content: "разработка: 21%";}
   2% {content: "разработка: 22%";}
   3% {content: "разработка: 23%";}
   4% {content: "разработка: 24%";}
   5% {content: "разработка: 25%";}
   6% {content: "разработка: 26%";}
   7% {content: "разработка: 27%";}
   8% {content: "разработка: 28%";}
   9% {content: "разработка: 29%";}
  10% {content: "разработка: 30%";}
  11% {content: "разработка: 31%";}
  12% {content: "разработка: 32%";}
  13% {content: "разработка: 33%";}
  14% {content: "разработка: 34%";}
  15% {content: "разработка: 35%";}
  16% {content: "разработка: 36%";}
  17% {content: "разработка: 37%";}
  18% {content: "разработка: 38%";}
  19% {content: "разработка: 39%";}
  20% {content: "разработка: 40%";}
  21% {content: "разработка: 41%";}
  22% {content: "разработка: 42%";}
  23% {content: "разработка: 43%";}
  24% {content: "разработка: 44%";}
  25% {content: "разработка: 45%";}
  26% {content: "разработка: 46%";}
  27% {content: "разработка: 47%";}
  28% {content: "разработка: 48%";}
  29% {content: "разработка: 49%";}
  30% {content: "разработка: 50%";}
  31% {content: "разработка: 51%";}
  32% {content: "разработка: 52%";}
  33% {content: "разработка: 53%";}
  34% {content: "разработка: 54%";}
  35% {content: "разработка: 55%";}
  36% {content: "разработка: 56%";}
  37% {content: "разработка: 57%";}
  38% {content: "разработка: 58%";}
  39% {content: "разработка: 59%";}
  40% {content: "разработка: 60%";}
  41% {content: "разработка: 61%";}
  42% {content: "разработка: 62%";}
  43% {content: "разработка: 63%";}
  44% {content: "разработка: 64%";}
  45% {content: "разработка: 65%";}
  46% {content: "разработка: 66%";}
  47% {content: "разработка: 67%";}
  48% {content: "разработка: 68%";}
  49% {content: "разработка: 69%";}
  50% {content: "разработка: 70%";}
  50% {content: "разработка: 70%";}
  52% {content: "разработка: 71%";}
  54% {content: "разработка: 72%";}
  56% {content: "разработка: 73%";}
  58% {content: "разработка: 74%";}
  60% {content: "разработка: 75%";}
  62% {content: "разработка: 76%";}
  64% {content: "разработка: 77%";}
  66% {content: "разработка: 78%";}
  68% {content: "разработка: 79%";}
  70% {content: "разработка: 80%";}
  72% {content: "разработка: 81%";}
  74% {content: "разработка: 82%";}
  76% {content: "разработка: 83%";}
  78% {content: "разработка: 84%";}
  80% {content: "разработка: 85%";}
  82% {content: "разработка: 86%";}
  84% {content: "разработка: 87%";}
  86% {content: "разработка: 88%";}
  88% {content: "разработка: 89%";}
  90% {content: "разработка: 90%";}
  92% {content: "разработка: 91%";}
  94% {content: "разработка: 92%";}
  96% {content: "разработка: 93%";}
  98% {content: "разработка: 94%";}
  100% {content: "Фигня, надо всё переделать...";}
}