{Divide,NhentaiLogin;}
<script>
  import Divide from 'molecules/Divide.svelte';
  import NhentaiLogin from 'polymers/NhentaiLogin.svelte';
</script>

<style>
  :global(:root) {
    --color-white: #fff;
    --color-black: #000;

    --color-background: #242424;
    --color-foreground: #3a3a3a;
    --color-foreground-light: #696969;
    --color-accent: #454585;
    --color-accent-light: #6969ac;

    --color-text: var(--color-white);

    font-family: sans-serif;
  }

  :global(*) {
    box-sizing: border-box;
    overflow: hidden;
  }

  :global(html) {
    width: 100vw;
    height: 100vh;
  }

  :global(body) {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    color: var(--color-text);
    background-color: var(--color-background);
  }

  main {
    width: 100%;
    height: 100%;
  }
</style>

<main>
  <Divide>
    <div slot="1">
      <NhentaiLogin></NhentaiLogin>
    </div>
    <div slot="2">
      <Divide mode="v">
        <div slot="1">
          <Divide></Divide>
        </div>
        <div slot="2">
          <Divide></Divide>
        </div>
      </Divide>
    </div>
  </Divide>
</main>