@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=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

svg { max-width : 100%; }

/* Themes */

html {
  --bg : white;
  --fg : black;
}
html[data-theme="classic"] {
  --bg : #FFFF99;
  --fg : black;
}
html[data-theme="dark"] {
  --bg : #202020;
  --fg : white;
}
html[data-theme="oled"] {
  --bg : black;
  --fg : white;
}

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

/* WELCOME */

#welcome {
  --accent    : red;
  --seperator : 1px solid currentcolor;

  display        : flex;
  flex-direction : column;
  font-family    : 'Rubik';
  font-family    : 'Noto Serif';
  /*
  gap            : 2em;
  padding        : 1em;
  margin         : auto;
  max-width      : 720px;
  */
  
  a { color: var(--accent); }
  li { list-style : none; }
  section {
    display        : flex;
    flex-direction : column;
    gap            : 1em;
    align-items    : center;
    padding        : 2em;
    
    &:nth-child(2n+2) { background: #aaa1; }
    > * { width: 100%; max-width: 720px; }
  }
  .alphabet-index {
    display        : flex;
    flex-direction : row;
    gap            : 0;
    position       : sticky;
    top            : 0;
    
    li {
      flex           : 1 0 auto;
      text-align     : center;
      text-transform : uppercase;
      background     : var(--fg);
      color          : var(--bg);
      padding        : 0.25em;
      font-size      : 0.75em;
    }
  }
  
  
}

section#intro {
  text-align : center;
  #title {
    position   : sticky;
    top        : 0;
    background : var(--bg);
  }
  #subtitle {
    text-transform : uppercase;
    > div:nth-child(1) { font-size: 0.8em; opacity: 0.50; }
    > div:nth-child(2) { font-size: 0.6em; opacity: 0.50; }
  }
  #logo svg { max-width: 360px; }
}

section#inhalt {
  #toc {
    li {
      border-top : var(--seperator);
      padding    : 0.5em 0;
    }
  }
}

section#notiz {
  font-size : 0.75em;
}

/* READER */

#reader {
  padding : 1em;
  
  i {
    color : purple;
  }
  p {
    margin : 0.5em 0;
  }
}

#reader textarea {
  background : var(--fg);
  color      : var(--bg);
  font-size  : 6px;
  height     : 300px;
  width      : 100%;
  padding    : 1em;
  border     : none;
  border-radius : 5px;
}

/* MARKDOWN PAGE */

h1, h2, h3, h4 {
  text-align : center;
}

blockquote {
  border     : none;
  color      : unset;
  font-size  : 1em;
  font-style : unset;
  padding    : unset;
  text-align : justify;
  hyphens    : var(--hyphens);
  hyphens    : auto;
}



#welcome {  /*
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='180' height='45' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffffff'/><path d='m0 5.625 14.06 7.03 16.876-8.438L22.502 0H11.25l8.436 4.219-5.623 2.81L0 0ZM33.75 0l2.81 1.406L39.374 0Zm16.871 0h.002L19.686 15.469l16.877 8.44 30.939-15.47 5.625 2.811-30.94 15.47 16.875 8.438 14.063-7.031 5.623 2.812L50.621 45h11.25l28.131-14.063L73.126 22.5l-14.065 7.033-5.623-2.812L84.374 11.25 67.498 2.81 36.561 18.282l-5.625-2.814L61.87 0H50.62Zm22.505 0L90 8.437l14.06-7.03 5.626 2.812-30.938 15.469 16.874 8.438 30.939-15.472 5.625 2.815L73.126 45h11.25l59.061-29.532L126.56 7.03 95.622 22.499l-5.621-2.814 30.934-15.467L112.498 0H95.621l-5.623 2.813L84.376 0Zm50.624 0h-.002l44.998 22.5-5.623 2.813-14.063-7.032-16.876 8.44 30.941 15.468-2.813 1.407L157.499 45h11.249l5.628-2.813-30.938-15.468 5.624-2.813 14.064 7.033L180 22.501 134.998 0Zm33.749 45L126.56 29.532l-16.877 8.439L123.749 45h11.249l-14.062-7.03 5.625-2.812L146.248 45ZM146.248 0l11.25 5.625L168.748 0Zm16.875 8.44L180 16.877V11.25l-5.625-2.815L180 5.625V0ZM0 11.25v5.627l42.186 21.092-5.625 2.814-30.938-15.47L0 28.122v5.629l5.623-2.813L33.75 45h5.624l14.062-7.031zm0 22.502v5.625L11.251 45h11.251zm180-5.631v.002l-11.252 5.627L180 39.377Zm-75.939 12.662L95.621 45h16.877z'  stroke-width='1' stroke='none' fill='%23fafafaff'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  */
}