@font-face {
  font-family: textFont;
  src: url(Oswald-VariableFont_wght.ttf);
  font-style: normal;
}

@font-face {
  font-family: iconsFont;
  src: url(Bitter-VariableFont_wght.ttf);
  font-style: normal;
}

:root {
  --color_black: #191919;
  --color_white: #F5F5F5;
  --color_white_light: rgba(245,254,245,0.7);
  --color_white_dark: #404040;

  --color_red_off: #402026;
  --color_red_on: #FF002A;

  --color_yellow_off: #403A20;
  --color_yellow_on: #E6C317;

  --color_green_off: #2B4020;
  --color_green_on: #5CE617;

  --color_green2_off: #204030;
  --color_green2_on: #17E67E;

  --color_blue_off: #203540;
  --color_blue_on: #17A1E6;

  --color_blue2_off: #252040;
  --color_blue2_on: #3917E6;

  --color_violet_off: #402040;
  --color_violet_on: #E617E6;

  --color_extra_red_off:#402033;
  --color_extra_red_on: #FF0095;

  --color_extra_yellow_off: #402D20;
  --color_extra_yellow_on: #E66D17;

  --color_extra_green_off: #384020;
  --color_extra_green_on: #B2E617;

  --color_extra_green2_off: #204022;
  --color_extra_green2_on: #17E628;

  --color_extra_blue_off: #20403E;
  --color_extra_blue_on: #17E6D4;

  --color_extra_blue2_off: #202840;
  --color_extra_blue2_on: #174BE6;

  --color_extra_violet_off: #322040;
  --color_extra_violet_on: #8F17E6;

  --height_wrap: max(1vw, 1vh);
  --height_radius: max(0.4vw, 0.4vh);
  --height_text: max(1.6vw, 1.6vh);
  --height_main: max(2.5vw, 2.5vh);

  --border: max(0.1vw, 0.1vh);
}

*, html, body, h1, h2, h3, h4, h5, h6, a, img, ul, ol, li, div, span, b, time,
u, p, input, label, textarea, select, option {
  color: var(--color_white_light);
  font-family: textFont;
  font-size: var(--height_text);
  line-height: 1.3;
  font-weight: 100;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  position: relative;
  border: 0;
  vertical-align: top;
  z-index: auto;
  box-sizing: border-box;
  transition: 0.5s ease-in-out;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--color_black);
}

.clear:after {
  clear: both;
  content: " ";
  display: block;
  height: 0;
  visibility: hidden;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.wrap {
  padding: var(--height_wrap);
}

.row, .col {
  display: flex;
  align-items: center;
}

.table {
  flex-direction: column;
}

.notes_row {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--height_wrap);
}

.names_col {
  flex: 20%;
  align-items: center;
}

.notes_col {
  flex: 80%;
  justify-content: space-between;
}

.drumtrack .volume_col {
  flex: 10%;
  flex-grow: 0;
  align-items: center;
  opacity: 0.5;
  overflow: hidden;
}

.drumtrack .main_col {
  flex: 90%;
}

.drumtrack .main_col .names_col {
  flex: 10%;
  flex-grow: 0;
}

.drumtrack .main_col .notes_col {
  flex: 90%;
}

.speaker {
  vertical-align: middle;
  box-sizing: border-box;
  display: inline-block;
  background: var(--color_white_light);
  background-clip: content-box;
  width: calc(var(--height_main)/1.1);
  height: var(--height_main);
  border: calc(var(--height_radius)*2) solid transparent;
  border-right-color: var(--color_white_light);
  position: relative;
  left: calc(var(--height_radius)*-2);
  border-radius: var(--height_radius);
  flex-shrink: 0;
}

.volume_col .speaker {
  scale: 0.6;
  cursor: pointer;
}

.speaker.speaker_off {
  background-color: var(--color_white_dark);
  border-right-color: var(--color_white_dark);
}

.speaker.speaker_off::after {
  content:"";
  position:absolute;
  border-top: calc(var(--border)*2) solid var(--color_white_light);
  border-radius: var(--height_radius);
  width: var(--height_main);
  transform: rotate(45deg);
  transform-origin: 0% 0%;
  top: calc(var(--height_radius)*-1);
}

.volume_row {
  cursor: pointer;
  gap: calc(var(--border)*2);
  flex: 1;
  align-items: center;
  height: calc(var(--height_main)/2);
  background-color: var(--color_white_dark);
  left: calc(var(--height_radius)*-2);
  border-radius: var(--height_radius);
}

.volume_row .volume_item {
  display: flex;
  width: calc(var(--border)*2);
  height: 100%;
  border-radius: var(--height_radius);
  background-color: #b3b3b3;
}

.speaker.speaker_off ~ .volume_row {
  display: none;
}

.names_col.name {
  text-transform: uppercase;
  justify-content: flex-end;
  margin-right: var(--height_main);
}

.notes_col .note {
  display: flex;
  width: var(--height_main);
  height: var(--height_main);
  border-radius: var(--height_radius);
  cursor: pointer;
}

.notes_col .note_on, .notes_col .note_off:hover {
  opacity: 0.8;
}

.notes_col .note_on:hover {
  opacity: 1;
}

.notes_col.red_color .note_off {
  background-color: var(--color_red_off);
}

.notes_col.red_color .note_on,
.notes_col.red_color .note_off:hover {
  background-color: var(--color_red_on);
}

.notes_col.yellow_color .note_off {
  background-color: var(--color_yellow_off);
}

.notes_col.yellow_color .note_on,
.notes_col.yellow_color .note_off:hover {
  background-color: var(--color_yellow_on);
}

.notes_col.green_color .note_off {
  background-color: var(--color_green_off);
}

.notes_col.green_color .note_on,
.notes_col.green_color .note_off:hover {
  background-color: var(--color_green_on);
}

.notes_col.yellow_color .note_off {
  background-color: var(--color_yellow_off);
}

.notes_col.yellow_color .note_on,
.notes_col.yellow_color .note_off:hover {
  background-color: var(--color_yellow_on);
}

.notes_col.green2_color .note_off {
  background-color: var(--color_green2_off);
}

.notes_col.green2_color .note_on,
.notes_col.green2_color .note_off:hover {
  background-color: var(--color_green2_on);
}

.notes_col.blue_color .note_off {
  background-color: var(--color_blue_off);
}

.notes_col.blue_color .note_on,
.notes_col.blue_color .note_off:hover {
  background-color: var(--color_blue_on);
}

.notes_col.blue2_color .note_off {
  background-color: var(--color_blue2_off);
}

.notes_col.blue2_color .note_on,
.notes_col.blue2_color .note_off:hover {
  background-color: var(--color_blue2_on);
}

.notes_col.violet_color .note_off {
  background-color: var(--color_violet_off);
}

.notes_col.violet_color .note_on,
.notes_col.violet_color .note_off:hover {
  background-color: var(--color_violet_on);
}

.controls .icon {
  font-family: iconsFont;
  font-size: calc(1.5*var(--height_main));
  margin: 0 var(--height_wrap);
  cursor: pointer;
  /*height: var(--height_main);*/
}

.controls .icon.icon_on {
  color: var(--color_white_light);
  display: block;
}

.controls .icon.icon_off {
  display: none;
}

.controls .icon_on:hover {
  color: var(--color_white);
}

.controls .icon.icon_pause {
  font-size: calc(1*var(--height_main));
  line-height: 2.0;
}

.controls.tempo .icon {
  font-size: var(--height_main);
}

.controls.tempo .number::after {
  content: ' bpm';
  font-size: initial;
} 

.notatrack .squares .row {
  justify-content: space-between;
}

.squares .square {
  width: calc(var(--height_main)*6);
  height: calc(var(--height_main)*6);
  border-radius: var(--height_main);
  margin: var(--height_main);
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.squares .square_1 {
  background-color: var(--color_extra_yellow_off);
}
.squares .square_1:hover {
  background-color: var(--color_extra_yellow_on);
}

.squares .square_2 {
  background-color: var(--color_extra_violet_off);
}
.squares .square_2:hover {
  background-color: var(--color_extra_violet_on);
}

.squares .square_3 {
  background-color: var(--color_extra_blue_off);
}
.squares .square_3:hover {
  background-color: var(--color_extra_blue_on);
}

.squares .square_4 {
  background-color: var(--color_extra_green_off);
}
.squares .square_4:hover {
  background-color: var(--color_extra_green_on);
}

.squares .square svg {
  width: calc(var(--height_main)*3);
  height: calc(var(--height_main)*3);
}

.squares .square svg path {
  fill: var(--color_white_light);
}

.squares .square:hover svg path {
  fill: var(--color_black);
}