[theme='light'] {
  --bg: #fff;
  --bg2: #ddd;
  --bg3: #bbb;
  --text-rgb: 0,0,0;
  --text: rgb(var(--text-rgb));
  --accent: #4d3dfc;
  --accent2: #2d48be;
  --accent3: #2b398b;
  --accent-text: #fff; }

[theme='dark'] {
  --bg: #222;
  --bg2: #333;
  --bg3: #555;
  --text-rgb: 239,239,239;
  --text: rgb(var(--text-rgb));
  --accent: #6254f7;
  --accent2: #4b53cc;
  --accent3: #334088;
  --accent-text: #fff; }

#decks-tab {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  width: 100%;
  user-select: none;
  padding: 0 2rem;
  min-height: 0; }
  #decks-tab section {
    display: flex;
    flex-direction: column;
    min-height: 10rem; }
    #decks-tab section ul {
      list-style: none;
      margin: 0;
      padding: 0; }
    #decks-tab section ul, #decks-tab section table {
      width: 100%; }
    #decks-tab section div, #decks-tab section ul {
      display: flex;
      flex-direction: column; }
  #decks-tab span {
    margin-bottom: 1rem; }

rule {
  block-size: 0;
  padding-left: 1px;
  padding-top: 1px;
  margin-block: .5rem;
  writing-mode: vertical-rl;
  background: var(--text);
  opacity: 0.3; }

#decks {
  flex-grow: 1;
  flex-shrink: 2; }
  #decks ul {
    overflow-y: auto; }
  #decks ul li {
    padding: .5rem; }
    #decks ul li:hover {
      text-decoration: underline; }
  #decks ul [current-deck] {
    font-style: oblique;
    font-weight: 800; }
  #decks span {
    display: flex;
    gap: .5rem; }

#cards {
  flex-grow: 2;
  flex-shrink: 1;
  user-select: text;
  align-items: center; }
  #cards table {
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 7rem 5rem 1fr;
    grid-auto-rows: auto;
    padding: 0 1rem;
    margin: 1rem 0; }
    #cards table th {
      position: sticky;
      top: 0;
      background: var(--bg);
      border-bottom: 1px solid var(--text); }
    #cards table td {
      padding: .5rem;
      border-top: 1px solid rgba(var(--text-rgb), 0.5);
      height: 100%;
      display: flex;
      align-items: center; }
  #cards span {
    display: flex;
    gap: .5rem; }

@media screen and (max-device-width: 450pt) {
  #decks-tab {
    flex-direction: column; }

  rule {
    writing-mode: horizontal-tb; } }
#learn-tab {
  user-select: none;
  width: 100%;
  max-width: 600px; }
  #learn-tab ul {
    list-style: none;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem; }
    #learn-tab ul li {
      display: flex;
      flex-direction: row;
      padding: .5rem; }
      #learn-tab ul li:hover {
        background: var(--bg2); }

#learn {
  height: 100%;
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }

.card {
  border-radius: 1rem;
  background: var(--bg2);
  box-shadow: .5rem .5rem .5rem #00000033;
  padding: 4rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 240px;
  font-size: 1.5rem; }
  .card rule {
    block-size: 0;
    min-inline-size: 210px;
    padding-left: 1px;
    padding-top: 1px;
    margin-block: .5rem;
    writing-mode: horizontal-tb;
    background: var(--text);
    opacity: 0.3; }

#themeSwitcher {
  position: fixed;
  top: 1rem;
  right: 1rem; }

@media screen and (max-device-width: 450pt) {
  #learn-tab ul {
    padding-left: 0;
    padding-right: 0; }
    #learn-tab ul li {
      text-align: center; } }
[theme='light'] {
  --bg: #fff;
  --bg2: #ddd;
  --bg3: #bbb;
  --text-rgb: 0,0,0;
  --text: rgb(var(--text-rgb));
  --accent: #4d3dfc;
  --accent2: #2d48be;
  --accent3: #2b398b;
  --accent-text: #fff; }

[theme='dark'] {
  --bg: #222;
  --bg2: #333;
  --bg3: #555;
  --text-rgb: 239,239,239;
  --text: rgb(var(--text-rgb));
  --accent: #6254f7;
  --accent2: #4b53cc;
  --accent3: #334088;
  --accent-text: #fff; }

#welcome {
  user-select: none; }
  #welcome a {
    text-decoration: none;
    color: var(--accent); }
    #welcome a:hover {
      text-decoration: underline; }

[theme='light'] {
  --bg: #fff;
  --bg2: #ddd;
  --bg3: #bbb;
  --text-rgb: 0,0,0;
  --text: rgb(var(--text-rgb));
  --accent: #4d3dfc;
  --accent2: #2d48be;
  --accent3: #2b398b;
  --accent-text: #fff; }

[theme='dark'] {
  --bg: #222;
  --bg2: #333;
  --bg3: #555;
  --text-rgb: 239,239,239;
  --text: rgb(var(--text-rgb));
  --accent: #6254f7;
  --accent2: #4b53cc;
  --accent3: #334088;
  --accent-text: #fff; }

:root {
  font-size: 14px;
  font-family: sans-serif; }

::selection {
  background: var(--accent3);
  color: var(--accent-text); }

body {
  background: var(--bg);
  color: var(--text); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0; }

main {
  padding-top: 2rem;
  height: 100%; }
  main tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column-reverse;
    height: 100%;
    max-height: 100%;
    gap: 1rem; }
    main tabs tablist {
      display: flex;
      width: 100%;
      background: var(--bg); }
    main tabs > :last-child {
      flex-grow: 1; }

tablist button {
  padding: .5rem;
  padding-top: 2.1rem;
  border: none;
  border-radius: 0;
  font-weight: 600;
  font-size: 1rem;
  flex-grow: 1;
  background: transparent;
  color: var(--text);
  position: relative; }
  tablist button::after {
    font-family: Material Icons;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -0.75rem;
    font-size: 1.5rem; }
  tablist button:nth-child(1)::after {
    content: 'library_books'; }
  tablist button:nth-child(2)::after {
    content: 'import_contacts'; }

[current-tab] {
  color: var(--accent);
  position: relative;
    /*&::before, &::after {
	content: '';
	display: block;
	position: absolute;
	height: 100%;
	width: $width;
	//box-shadow: var(--bg) 0 (-$width) 0;
	top: 0;
    }
    &::before {
	left: -$width;
	border-radius: 0 $width 0 0;
    }
    &::after {
	right: -$width;
	border-radius: $width 0 0 0;
    }*/ }
  [current-tab]::after {
    display: block;
    color: currentColor; }

overlay form {
  border-radius: 1rem;
  background: var(--bg);
  box-shadow: .5rem .5rem .5rem #00000033;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  width: 350px;
  gap: .5rem;
  user-select: none; }
  overlay form controls {
    margin-top: 2rem;
    justify-content: right;
    display: flex;
    gap: .5rem; }
  overlay form input[type='text'] {
    background: var(--bg2);
    padding: .5rem;
    border-radius: 2px;
    border: 1px rgba(var(--text-rgb), 0.5) solid;
    color: var(--text);
    font-size: 1rem; }
    overlay form input[type='text']:focus {
      outline: solid 2px var(--accent); }

span {
  text-align: center;
  justify-content: center; }

button,
input[type='submit'] {
  border-radius: 100px;
  border: none;
  padding: .4rem 1.4rem;
  font-size: 1rem; }

button.action,
input[type='submit'] {
  background: var(--accent);
  color: var(--accent-text); }
  button.action:hover,
  input[type='submit']:hover {
    background: var(--accent2); }
  button.action:focus,
  input[type='submit']:focus {
    background: var(--accent3); }

button.delete {
  background: #db1225;
  color: #fff; }
  button.delete:hover {
    background: #b70425; }
  button.delete:focus {
    backgound: #991222; }

@media screen and (max-device-width: 450pt) {
  button,
  input[type='submit'] {
    font-size: 1.2rem; } }

/*# sourceMappingURL=main.css.map */