/* 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.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #00b1a4;
  --ifm-color-primary-dark: #009f94;
  --ifm-color-primary-darker: #00968b;
  --ifm-color-primary-darkest: #007c73;
  --ifm-color-primary-light: #00c3b4;
  --ifm-color-primary-lighter: #00ccbd;
  --ifm-color-primary-lightest: #00e6d5;
  --ifm-code-font-size: 95%;
}

[data-theme='dark'] {
  --ifm-color-primary: #74eed1;
  --ifm-color-primary-dark: #54eac7;
  --ifm-color-primary-darker: #45e8c1;
  --ifm-color-primary-darkest: #1bddaf;
  --ifm-color-primary-light: #94f2db;
  --ifm-color-primary-lighter: #a3f4e1;
  --ifm-color-primary-lightest: #d3faf0;
}

.DocSearch {
  --docsearch-hit-active-color: var(--ifm-color-content-inverse);
}

.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

html[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
}


.markdown > h2 {
  --ifm-h2-font-size: 1.75rem;
}
.markdown > h3 {
  --ifm-h3-font-size: 1.25rem;
}


.guide-link {
  color: var(--ifm-color-gray-900);
}

.guide-link:hover {
  text-decoration: none;
  color: var(--ifm-color-gray-600);
}

html[data-theme=dark] .guide-link {
  color: var(--ifm-color-gray-300);
}

html[data-theme=dark] .guide-link:hover {
  color: var(--ifm-color-gray-600);
}


.obico-button {
  border-radius: 10rem;
  padding-left: 1rem;
  padding-right: 1rem;

  --obico-button-primary-color: var(--ifm-color-primary);
  --obico-button-primary-text: var(--ifm-color-gray-100);
  --obico-button-primary-hover: var(--ifm-color-primary-dark);

  --obico-button-secondary-color: var(--ifm-color-gray-600);
  --obico-button-secondary-hover: var(--ifm-color-primary-dark);
}

html[data-theme=dark] .obico-button {
  --obico-button-primary-hover: var(--ifm-color-primary-light);
  --obico-button-secondary-hover: var(--ifm-color-primary-light);
  --obico-button-primary-text: var(--ifm-color-gray-900);
}

.obico-button-secondary {
  border: 1px solid var(--obico-button-secondary-color);
}
.obico-button-secondary:hover {
  color: var(--obico-button-secondary-hover);
  border-color: var(--obico-button-secondary-hover);
  background: none;
}

.obico-button-primary {
  border: 1px solid var(--obico-button-primary-color);
  color: var(--obico-button-primary-text);
  background-color: var(--obico-button-primary-color);
}
.obico-button-primary:hover {
  background-color: var(--obico-button-primary-hover);
  border-color: var(--obico-button-primary-hover);
  color: var(--obico-button-primary-text);
}

.obico-navbar-button {
  margin-right: .5rem;
}

.menu .obico-navbar-button {
  margin-right: 0;
  margin-top: .625rem;

  --obico-button-secondary-color: var(--ifm-menu-color) !important;
}


.copyright {
  opacity: .5;
}

@media (min-width: 996px) {
  .copyright {
    margin-top: 2.5rem;
  }
}


.social-link-wrapper {
  margin-bottom: .5rem;
}

.social-button-iframe {
  height: 20px;
}
.social-button-iframe.youtube {
  height: 24px;
}

/* Aspect ratio for embedded videos */
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.superscript {
  vertical-align: super;
  font-size: 0.8em;
}