/* stylelint-disable docusaurus/copyright-header */
/**
 * 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.
 */

:root {
  --ifm-code-font-size: 95%;

  --docusaurus-highlighted-code-line-bg: rgb(229, 229, 232);
  --ifm-color-primary: rgb(79, 151, 77);
  --ifm-link-color: var(--ifm-color-primary);
  --highlight-color: rgb(70, 203, 43);
}

[data-theme='dark'] {
  --docusaurus-highlighted-code-line-bg: rgb(61, 63, 67);
  --ifm-color-primary: rgb(132, 170, 124);
  --ifm-link-color: var(--ifm-color-primary);
  --highlight-color: rgb(140, 209, 126);
}

/* Images inside the docs that are centered/inside text */
.doc-image {
  border-radius: 15px;
  max-width: 55%;
  max-height: 30vh;
}
@media (max-width: 600px) {
  .doc-image {
    max-width: 80%;
    max-height: 50vh;
  }
}
@media (min-width: 600px) and (max-width: 997px) {
  .doc-image {
    max-width: 55%;
    max-height: 50vh;
  }
}
@media (min-width: 997px) and (max-width: 1145px) {
  .doc-image {
    max-width: 80%;
    max-height: 30vh;
  }
}

/* align image to the right */
.image-container {
  float: right;
}
/* mobile screen; align center */
@media (max-width: 600px) {
  .image-container {
      float: none;
      text-align: center;
  }
}
/* wider screen; align right again */
@media (min-width: 600px) and (max-width: 997px) {
  .image-container {
    float: right;
  }
}
/* even wider screen but with sidebars; align center cuz we dont have enough space for right */
@media (min-width: 997px) and (max-width: 1145px) {
  .image-container {
    float: none;
    text-align: center;
  }
}

code {
  border-width: 0;
  padding-left: 3px;
  padding-right: 3px;
}
a:hover {
  text-decoration: none;
  color: var(--highlight-color);
}

.theme-code-block {
  display: flow-root;
}
.theme-admonition {
  display: flow-root;
}

@media (max-width: 600px) {
  .hero__title {
    font-size: 2.5rem;
  }
}