CSS

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  src: url('fonts/font-inter/inter-regular.woff2') format('woff2'),
    url('fonts/font-inter/inter-regular.woff') format('woff');
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url('fonts/font-inter/inter-roman.var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url('fonts/font-inter/inter-italic.var.woff2') format('woff2');
}

:root {
  --color-primary: #024550;
  --color-accent: #00cc7e;
  --color-background: #181830;
  --color-surface: #ffffff;
  --color-backface: #f5f5f5;
  --color-on-primary: #ffffff;
  --color-on-surface: var(--color-primary);
  
  --color-button-background: #181830;
  --color-button-background-hover: #c7f3aa;
  --color-button-background-disabled: #d4d4d4;
  --color-button-text: #ffffff;
  --color-button-text-hover: #181830;
  --color-button-text-disabled: #181830;
  --color-link: #045e6c;
  --color-link-hover: #058194;
  --color-link-text-disabled: #bcbcbc;
  --button-radius: 0rem;
  
  --background-image: url('bg_login.svg') no-repeat center center/cover fixed;
  --background-fallback-color: var(--color-background);
  --color-header-background: var(--color-primary);
  --color-header-text: var(--color-on-primary);
  --color-progress-filled: #024550;
  --color-progress-background: #e2e8e9;
  --color-loader-indicator-bottom: #00ca7b;
  --color-loader-indicator-middle: #02444e;
  --color-loader-indicator-top: rgba(200, 200, 200, 0.7);
}

html {
  color: var(--color-on-surface);
  background-color: var(--background-fallback-color);
  background: var(--background-image), var(--background-fallback-color);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
}
@supports (font-variation-settings: normal) {
  html {
    font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
      'Segoe UI Emoji', 'Segoe UI Symbol';
  }
}
@media (min-width: 521px) and (max-height: 915px) {
  :root {
    font-size: 95%;
  }
}
@media (min-width: 521px) and (max-height: 880px) {
  :root {
    font-size: 90%;
  }
}
@media (min-width: 521px) and (max-height: 830px) {
  :root {
    font-size: 85%;
  }
}
@media (min-width: 521px) and (max-height: 760px) {
  :root {
    font-size: 82%;
  }
}
.loader {
  position: relative;
  width: 77px;
  height: 48px;
  background: #00ca7b;
  background: var(--color-loader-indicator-bottom);
  transform: rotateX(65deg) rotate(45deg);
  color: #02444e;
  color: var(--color-loader-indicator-middle);
  animation: layers1 1s linear infinite alternate;
}
.loader:after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200, 200, 200, 0.7);
  background: var(--color-loader-indicator-top);
  animation: layerTr 1s linear infinite alternate;
}
@keyframes layers1 {
  0% {
    box-shadow: 0px 0px 0 0px;
  }
  90%,
  100% {
    box-shadow: 20px 20px 0 -4px;
  }
}
@keyframes layerTr {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-25px, -25px) scale(1);
  }
}

:root {
  --color-button-background: #ffe4c4;
  --color-button-background-hover: rgb(143 188 143);
  --color-button-text: #32cd32;
  --color-button-text-hover: #00fa9a;
}

:root {
  --background-image: url('new_background_image.png') no-repeat center center fixed;
}