@layer base;

@import url("base/fonts.css") layer(base);
@import url("themes/default.css") layer(base);
@import url("themes/dark.css") layer(base);

@import url("components/main.css") layer(components);
@import url("components/session.css") layer(components);
@import url("components/transport.css") layer(components);
@import url("components/tracks.css") layer(components);
@import url("components/about.css") layer(components);
@import url("components/unsupported.css") layer(components);
@import url("components/toolbar.css") layer(components);

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: var(--background);
  background-blend-mode: multiply;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.content {
  display: grid;
  grid-template-columns: minmax(0, 40px) 1fr max-content;
  grid-template-rows: 1fr;
  grid-template-areas: "padding main toolbar";

  width: 100%;
}

main {
  grid-area: main;
}

toolbar {
  grid-area: toolbar;
}