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

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

:root {
  --accent  : red;

  &[data-theme="dark"] {
    --bg      : #151515;
    --fg      : white;
  }
  &[data-theme="light"] {
    --bg      : white;
    --fg      : black;
  }
  &[data-theme="oled"] {
    --bg      : black;
    --fg      : white;
  }
  &[data-theme="dracula"] {
    --accent  : #ff79c6;
    --bg      : #282a36;
    --fg      : #f8f8f2;
    --zebra   : color-mix(in oklch, var(--bg), black 10%);
    --active  : var(--accent);
  }
}

:root {
  --font     : "JetBrains Mono", monospace;
  --fontSize : 12px;
  
  --accent-5  : hsl(from var(--accent) h s l / 0.05);
  --accent-10 : hsl(from var(--accent) h s l / 0.10);
  --accent-25 : hsl(from var(--accent) h s l / 0.25); /* color-mix(in srgb, var(--accent) 20%, transparent */
  --accent-50 : hsl(from var(--accent) h s l / 0.50);
  --accent-75 : hsl(from var(--accent) h s l / 0.75);
  
  --fg-25 : hsl(from var(--fg) h s l / 0.25);
  --fg-50 : hsl(from var(--fg) h s l / 0.50);
  --fg-75 : hsl(from var(--fg) h s l / 0.75);
  
  --bg-darker-10  : hsl(from var(--bg) h s calc(l - 10%));
  --bg-lighter-10 : hsl(from var(--bg) h s calc(l + 10%));
}

* { font-family: var(--font); }
html, body { font-size: var(--fontSize); }
.icon { display: inline; }
a { color: var(--accent); }

html     { background: black; }
body     { background: var(--bg); color: var(--fg); }


body { overflow: hidden; }
#app {  }
/*
#app { overflow: auto; }
*/

#app {
  display         : flex;
  flex-flow       : column nowrap;
  align-items     : center;
  justify-content : safe center;
  justify-content : space-between;
  height          : 100dvh; 
  max-height      : 100dvh;
  gap             : 0rem;
  
  #app-head { order: 1; }
  #app-body { order: 2; flex: 1 0 auto; }
  #app-foot { order: 3; }
}

#app-head {
  display         : flex;
  flex-flow       : row nowrap;
  align-items     : center;
  justify-content : space-between;
  background      : var(--bg);
  align-self      : stretch;
  font-size       : 1.5rem;
  padding         : 1rem;
}
#app-logo {
  display     : flex;
  flex-flow   : row nowrap;
  align-items : center;
  gap         : 0.5rem;
}

#app-body {
  display         : flex;
  flex-direction  : column;
  justify-content : safe center;
  align-items     : center;
  gap : 1px; 
}
#app-loading {
  height          : 100dvh;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : 2rem;
  font-size       : 100px;
  
  svg { width: 200px; }
}

#app-foot {
  font-size  : 10px;
  font-style : italic;
  opacity    : 0.50;
  max-width  : 360px;
  padding    : 1rem;
  
  strong { color: var(--accent); }
}




#app.global #app-body ul {
  font-size  : 30px;
  list-style : none;
  
}
#app.global > * { background: none; }



.badge {
  font-size: .65rem; font-weight: 600; padding: .15rem .45rem; border-radius: 2rem;
  background: var(--accent-25); color: var(--accent);
  letter-spacing: .05em; text-transform: uppercase; vertical-align: middle;
}

.dropzone {
  border: 2px dashed color-mix(in srgb, var(--fg) 25%, transparent);
  border-radius: .75rem; padding: 2.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  cursor: pointer; transition: border-color .15s, background .15s; font-size: .9rem; opacity: .75;
  
  &:hover, &.drag-over {
    border-color: var(--accent); background: var(--accent-10); opacity: 1;
  }
  
  u { color: var(--accent); text-underline-offset: 2px; }
}

/* ANIMATIONS */

@keyframes spin { to { transform: rotate(360deg); } }

.spin { display: inline-block; animation: spin .8s linear infinite; }