@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://cdn.ratcode.dev/css/reset.css');
@import url('https://cdn.ratcode.dev/css/default.css');

* {
  font-family: "JetBrains Mono";
}
body { font-size: 12px; }

html[data-theme="light"] {
  --color-bg: #fff;
  --color-fg: #000;
  --bg: var(--color-bg);
  --fg: var(--color-fg);
  --hr: #AAA;
  --accent: #ff4081;
}
html[data-theme="dark"] {
  --color-bg: #222;
  --color-fg: #eee;
  --bg: var(--color-bg);
  --fg: var(--color-fg);
  --hr: #555A;
  --accent: #ff4081;
}
html[data-theme="oled"] {
  --color-bg: black;
  --color-fg: #D0D0D0;
  --bg: var(--color-bg);
  --fg: var(--color-fg);
  --hr: #222A;
  --accent: #ff4081;
}
html[data-theme="dark-hsl"] {
  --h: 300;
  --s: 100;
  --l:  10;
  --hsl: hsl( 300 100% 10%);
  --hsl: hsl( var(--h) calc( var(--s) * 1% ) calc( var(--l) * 1% ) );
  --color-bg: var(--hsl);
  --color-fg: #eee;
  --bg: var(--color-bg);
  --fg: var(--color-fg);
  --hr: color-mix(in hsl, var(--bg) 90%, #AAA);
  --accent: #ff4081;
}

/* 3. LAYOUT */

:root {
  --accent: red;
  --gap:   10px;
  --gap-s:  5px;
  --gap-l: 20px;
}

#app {
  display: flex; flex-direction: column;
  overflow: auto;
}

/* 4. Text & Headlines  */

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  font-weight: bold;
  color: var(--accent-opa-50, currentcolor);
}


:root {
  --bg : #131313;
  --fg : #C0C0C0;
  
  --separator: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
}

body, header {
  background: var(--bg);
  color:      var(--fg);
}

a {
  color: var(--accent, var(--fg));
  text-decoration: none;
}
a.is-current,
a.is-current-parent {
  color: red;
}

header { border-bottom: var(--separator); }
aside > *, footer, section:not(:first-child) { border-top: var(--separator); }
.navmenu > *:not(:first-child) { border-left: var(--separator); }

header { position: sticky; top: 0; padding: var(--gap-s) var(--gap); }
section { padding: var(--gap); }

header { opacity: 0.95; }

header { display: flex; justify-content: space-between; align-items: center; }

/* View: File */

#lyrics {
  textarea {
    background : none;
    color      : var(--fg);
    
    border: none;
    field-sizing: content;
    width: 100%;
  }
}