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

/******* google fonts imports *******/
@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #000000;  
  --ifm-color-dark-green: #577018;
  --ifm-color-light-green:#8EA34E;
  --ifm-color-frame: #FFC729;
  --ifm-color-tonic-one: #E07931;
  --ifm-color-tonic-two: #B3433B;
  --ifm-color-tonic-three: #805D93;
  --ifm-color-primary-light: #ffffff;
  --ifm-link-color: #E07931;
  --ifm-button-color: var(--ifm-color-primary);
  --ifm-code-font-size: 95%; 
  --ifm-font-family-base: "Comfortaa", cursive;
  --ifm-font-family: "Montserrat",  sans-serif; 
  --ifm-container-width: 100%; 
  --ifm-container-max-width: 950px;
  --ifm-navbar-shadow: none;
}

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

html[data-theme='dark'] {
  --ifm-background-color: #18191a;
  --ifm-background-surface-color: #18191a;
  --ifm-hover-overlay: rgba(255, 255, 255, 0.05); 
  --ifm-color-content-secondary: rgba(255, 255, 255, 1);
  --ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%);
}

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

hgroup {
  font-family: var(--ifm-font-family-base);
  font-weight: 700;
}

p {
  font-family: var(--ifm-font-family);
  font-weight: 500; 
}

.button {
  margin: 10px;
 }

.button--beta {
  background-color: var(--ifm-color-dark-green);
  border-color: var(--ifm-color-dark-green);
 }

/************ Navbar style ***********/
.navbar {
  background-color: var(--ifm-color-light-green);
  --ifm-navbar-link-hover-color: var(--ifm-color-dark-green);
  font-family: var(--ifm-font-family-base);
  font-weight: 700; 
  font-size: 16px;
}

.navbar__title {
  font-size: 18px;
} 

.navbar--fixed-top {
  position: sticky; 
  top: 0;
  z-index: 1; 
 } 

/************ main elements style***********/
.section-promises {
  padding: 4rem 0;
  width: 100%;
}
.sections {
  padding: 4rem 0;
  width: var(--ifm-container-max-width);
}
.sectionsReverse {
  margin: 0 16px 0 16px;
  padding: 4rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sectionsReverse:nth-of-type(odd) {
  flex-direction: row-reverse;
}

/************ footer style ***********/

a.footer__link-item:hover {
  color:  var(--ifm-color-frame);
}

#__docusaurus > footer > div > div.text--center > div > a {
  color: unset;
}

#__docusaurus > footer > div > div.text--center > div > a:hover {
  color: var(--ifm-color-frame);
}

.footer {
  background-color: var(--ifm-color-tonic-one);
  color: var(--ifm-color-primary);
  --ifm-footer-link-color: var(--ifm-color-primary);
  --ifm-footer-title-color: var(--ifm-color-primary);
  font-family: var(--ifm-font-family);
}

/************ sub-footer style ***********/
.footer__bottom {
  font-family: var(--ifm-font-family); 
  font-weight: 600;
}