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

 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&family=Oswald&family=Roboto:wght@100;300;400;500&display=swap');
 
 :root {
  --ifm-color-primary: #255E3C;
  --ifm-color-primary-dark: darken(#255E3C, 10%);
  --ifm-color-primary-darker: darken(#255E3C, 20%);
  --ifm-color-primary-darkest: darken(#255E3C, 30%);
  --ifm-color-primary-light: lighten(#255E3C, 10%);
  --ifm-color-primary-lighter: lighten(#255E3C, 20%);
  --ifm-color-primary-lightest: lighten(#255E3C, 30%);
  --ifm-code-font-size: 95%;

  --ifm-color-secondary: #be4721;
  --ifm-color-secondary-dark: darken(#be4721, 10%);
  --ifm-color-secondary-darker: darken(#be4721, 20%);
  --ifm-color-secondary-darkest: darken(#be4721, 30%);
  --ifm-color-secondary-light: lighten(#be4721, 10%);
  --ifm-color-secondary-lighter: lighten(#be4721, 20%);
  --ifm-color-secondary-lightest: lighten(#be4721, 30%);

  --infoDiv-left-spacing: 4rem;

  --doc-sidebar-width: 246px !important;
}

p {
  font-size: 18px;
}

.markdown > h4{
  font-size: 20px;
}

a {
  color: #33985C;
}

a:hover {
  color: #33985C;
}

html, body { /*prevent mobile scrolling horizontally*/
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: #EEEEEE;
}

.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);
}

.navbar {
  background-color: #F9F2F3;
  height: 5rem;
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
}

.navbar__logo {
  height: 3rem;
}

.navbar__item {
  font-family: 'Lato', sans-serif;
  color: #2A2C2D;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0px 30px;
}

.navbar__brand {
  color: var(--ifm-color-primary);
}

.navbar__brand:hover {
  transition: ease-in 0.1s;
  color: black;
}

.navbar__toggle{
  color: var(--ifm-color-primary);
}

.footer {
  background-color: #D4E2FE;
  color: white;
}

.footer__title {
  color: #26282A;
  font-family: 'Roboto', sans-serif;
  line-height: 28.8px;
  letter-spacing: 0.48px;
}

.footer__links {
  display: grid;
  grid-template-columns: 40% 15% 15% 15% 15%;
}

.footer__link-item {
  color: #26282A;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

.footer-logo-social-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  width: -moz-fit-content;
  width: fit-content;
}

.footer-logo-social-links > img {
  height: 4rem;
  margin-bottom: 2rem;
}

.doc-button {
  background-color: #be4721;
  border: 2px solid var(--ifm-color-secondary);
  color: white !important;
  border-radius: 10px;
  font-size: 1.25rem;
  font-weight: bold;
  height: 60px;
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  width: 30%;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
  z-index: 10;
  border-radius: 10px;
}

.doc-button:hover {
  transition: ease-in-out 0.25s;
  color: var(--ifm-color-secondary) !important;
  background: white;
  border: 2px solid var(--ifm-color-secondary);
  text-decoration: none;
}

.contribute-button {
  font-family: 'Lato', sans-serif;
  font-size: 1.1rem;
  color: #F9F2F3;
  background: #0054FB;
  border-radius: 30px;
  height: 40px;
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  margin: 0px 30px;
}

.contribute-button:hover {
  /* border-radius: 10px; */
  background-color: white;
  text-decoration: none !important;
  color: #0054FB;
  outline: 2px solid #0054FB;
}

.navbar__link:hover {
  transition: ease-in-out 0.25s;
  text-decoration: underline;
  /* border: 2px solid var(--ifm-color-secondary); */
}

.footer__link-item:hover {
  font-weight: 700;
  text-decoration: none;
  color: #26282A;
}

@media (max-width: 1100px) {
  .navbar__item {
    display: none;
  }
}

@media (max-width: 425px) {
  .search-bar {
    width: 83px;
  }
}

@media screen and (max-width: 425px) {
  .theme-doc-footer-edit-meta-row {
    display: none;
  }

  .pagination-nav__link {
    background-color: rgb(153, 190, 172);
    color: white;
  }

  .pagination-nav__link:hover {
    border: 1px solid rgb(0, 79, 33);
  }
}

@media screen and (max-width: 966px) {
  body {
    background-color: #EEEEEE; 
  }
}

/*.theme-doc-toc-mobile {
  position: sticky;
  top: 0;
  background-color: lightgrey !important;
  opacity: 1;
}*/

/*.markdown p img {
  width: 85%;
}*/

/* Component: Table of Contents */

.table-of-contents__link {
  --custom-table-of-contents-link-active-before-left: -16px;
  position: relative;
}

.table-of-contents__link:hover {
  font-weight: 500;
}

.table-of-contents__link:hover:not(.table-of-contents__link--active) {
  --ifm-color-primary: var(--ifm-color-primary);
}

.table-of-contents__link--active {
  font-weight: 500;
}

.table-of-contents__link--active:before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--custom-table-of-contents-link-active-before-left);
  width: 2px;
  border-radius: 0 2px 2px 0;
  background-color: var(--ifm-color-primary);
}

.table-of-contents > ul > li .table-of-contents__link--active:before {
  --custom-table-of-contents-link-active-before-left: -32px;
}

/* .table-of-contents > ul > li > ul > li .table-of-contents__link--active:before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--custom-table-of-contents-link-active-before-left);
  width: 2px;
  border-radius: 0 2px 2px 0;
  background-color: var(--ifm-color-primary);
} */

details.alert {
  background-color: rgb(238, 249, 253);
  border: none;
  border-left: 5px solid rgb(0, 115, 0); 
}

details summary::before {
  border-color: transparent transparent transparent rgb(0, 115, 0)!important;
}

details > div > div {
  border-top: 1px solid rgb(16, 36, 69) !important;
}

@media screen and (max-width: 895px) {
  .footer__links {
    display: flex;
  }

  .footer-logo-social-links {
    width: 100%;
  }
}  
/* Apply a media query to adjust the width for smaller screens */
  @media (max-width: 580px) {
    iframe[src*="https://www.youtube"] {
        width: 100%;
        height: 100%;
     
  }
}