/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #684bfa;
  --ifm-color-primary-dark: #4d2bf9;
  --ifm-color-primary-darker: #401cf9;
  --ifm-color-primary-darkest: #2a06dd;
  --ifm-color-primary-light: #836bfb;
  --ifm-color-primary-lighter: #907afb;
  --ifm-color-primary-lightest: #b8aafd;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #8397fc;
  --ifm-color-primary-dark: #5e78fb;
  --ifm-color-primary-darker: #4b68fb;
  --ifm-color-primary-darkest: #1339f9;
  --ifm-color-primary-light: #a8b6fd;
  --ifm-color-primary-lighter: #bbc6fd;
  --ifm-color-primary-lightest: #f3f5ff;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* align image to the right */
.code-container {
  overflow: auto;
}
.row-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 16px;
}
/* mobile screen; align center */
@media (max-width: 600px) {
  .row-container {
    flex-direction: column;
    align-items: unset;
  }
}
/* even wider screen but with sidebars; align center cuz we dont have enough space for right */
@media (min-width: 997px) and (max-width: 1200px) {
  .row-container {
    flex-direction: column;
    align-items: unset;
  }
}
