@font-face {
  font-family: "Open Sans";
  src: url("./priv/assets/fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf")
    format("truetype") tech("variations");
  src: url("./priv/assets/fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf")
    format("truetype-variations");
  font-weight: 300 800;
  font-stretch: 75% 100%;
}

:root {
  --font-family: "Open Sans", ui-sans-serif;

  --background-gradient-bottom: rgb(131, 58, 180, 1);
  --background-gradient-middle: rgba(253, 29, 29, 1);
  --background-gradient-top: rgba(252, 176, 69, 1);
  --text-color: #123456;

  --glass-opacity: 0.5;
  --glass-opacity-active: 0.2;
  --glass-shadow-opacity: 0.1;
  --glass-background: rgba(255, 255, 255, var(--glass-opacity));
  --glass-blur: 10px;
  --glass-border-color: rgba(255, 255, 255, var(--glass-opacity));
  --glass-border: 1px solid var(--glass-border-color);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, var(--glass-shadow-opacity));

  --border-radius: 10px;

  --button-border-radius-small: calc(var(--border-radius) / 2);
  --button-border-radius: var(--border-radius);

  --side-margin: 5px;
  --double-margin: calc(var(--side-margin) * 2);

  --track-thumb-size: 20px;
  --track-scale-factor: 4;

  --library-top-nav-height: 50px;

  --search-size: 1.6rem;
}