body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #030615 !important;
}

:root {
  --theme-gradient-primary: linear-gradient(90deg, #3e3bb4 0%, #33157b 60%);
  --color-black: #000000;
  --color-dark-blue: #02002b;
  --color-dark-purple: #17004d;
  --color-white: #ffffff;
  --color-gray-dark: rgb(32, 32, 32);
  --color-gray-light: rgba(32, 32, 32, 0.2);
  --color-gray-border: #888;
  --color-gray-disabled-dark: #999;
  --color-gray-disabled-light: #eee;
  --color-accent: #3ac8da;
  --color-natural: #d8d8b5;
  --color-note-label-natural: #888;
  --color-note-label-active: #f8e8d5;
  --color-highlight: #f0bc44;
  --color-red: red;
  --color-dark-purple-alt: #3f1e35;
  --color-primary-start: #3e3bb4;
  --color-primary-mid: #33157b;
  --color-primary-end: #5e26e1;
  --color-card-gradient-mid: #ae8ff8;
  --color-card-bg-two: rgba(24, 19, 50);
  --color-border-white: rgba(255, 255, 255, 0.25);
  --color-border-white-30: rgba(255, 255, 255, 0.3);
  --color-danger: #d71515;
  --color-border-left: #3e3bb4;
  --color-font: white;
  --color-gradient-text: #9c99ff;
  --theme-gradient-danger: linear-gradient(90deg, #fd0004 0%, #810002 100%);
  --theme-border-dark: rgba(255, 255, 255, 0.3);
}

.header-bar {
  background: var(--theme-gradient-primary);
}

.gradient-text {
  background: linear-gradient(
    to right,
    var(--color-white) 0%,
    var(--color-white) 40%,
    var(--color-gradient-text) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-card {
  background: linear-gradient(
    to right,
    var(--color-primary-mid) 0%,
    var(--color-card-gradient-mid) 49%,
    var(--color-primary-end) 100%
  );
  border: 1px solid var(--color-border-white) !important;
}

.gradient-card-two {
  background-color: var(--color-card-bg-two) !important;
  border: 1px solid var(--color-border-white) !important;
}

.sign-up {
  background: var(--theme-gradient-primary);
  color: var(--color-white);
  border: 1.5px solid var(--theme-border-dark);
  border-radius: 8px;
}

.sign-in {
  background: var(--theme-gradient-danger);
  color: var(--color-white);
  border: 1.5px solid var(--theme-border-dark);
  border-radius: 8px;
}

.store {
  background: var(--theme-gradient-primary);
  color: var(--color-white);
  border: 1.5px solid var(--theme-border-dark);
  border-radius: 8px;
}

.piano-img{
  length: 347px;
  width: 1340px;
}