/**
 * 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-color-primary: #131212; /* #146ee6; */
  --ifm-menu-color: #525151;
  --ifm-font-color-base: rgba(30, 32, 34, 1);
  --ifm-navbar-background-color: white;
  --ifm-navbar-link-color: #333;
  --ifm-navbar-height: 3.8rem;
  --ifm-code-name-highlight: #84488D;
  --ifm-font-size-base:  95%;
  --ifm-toc-border-color: #dadde1b8;
  --ifm-link-color: #0000EE;
  --ifm-link-hover-color: #0000EE;
  --header-background: #FCEADE;
  --header-subtitle: #000;
  --button-color: #25ced1;
  --icons-color: #131212;
}

html[data-theme="light"] {
  --docusaurus-highlighted-code-line-bg: #ccc;
}

html[data-theme="dark"] {
  --ifm-color-primary: #25c2a0;
  --ifm-menu-color: #e6e6e6;
  --ifm-font-color-base: #e6e6e6;
  --ifm-navbar-background-color: #141520;
  --ifm-navbar-link-color: #aaa;
  --ifm-navbar-height: 3.8rem;
  --ifm-code-name-highlight: #A972B1;
  --ifm-toc-border-color: #333;
  --ifm-background-color: #141520;
  --docusaurus-highlighted-code-line-bg: #494b62;
  --ifm-link-color: #2fbef1;
  --ifm-link-hover-color: #2fbef1;
  --nav-logo: url('/img/adsf-logo-dark.png');
  --header-code-img: url('/img/code-dark.png');
  --header-background: #25ced1;
  --header-subtitle: #fff;
  --button-color: #fff;
  --button-hover: #fceade;
  --icons-color: #f6f6f6;
}

.navCodeExample {
  content: var(--header-code-img);
  width: '100%';
}

.navLogo {
  content: var(--nav-logo);
  width: '85%';
  padding-top: '3%';
}

.boldTagline {
  font-weight: bold;
  /*font-family: 'Roboto Mono for Powerline', sans-serif;*/
}

.hero__subtitle {
  color: var(--header-subtitle);
  font-size: 2.3em;
  font-weight: 400;
}

.button-3d {
  background-color: var(--button-color);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
  transition: transform 0.4s ease-in-out;
}

.button-3d:hover {
  background-color: #fff;
  color: #25ced1;
}

.button-sparkles {
  background-image: linear-gradient(to right, #ff3d2b 0%, #ffd941 51%, #ff2bc6 100%);
  background-size: 200% auto;
  background-position: right bottom;
  animation: sparkling 1s ease-out infinite;
  color: #070707;
}

@keyframes sparkling {
  0% {
    background-position: right bottom;
  }
  50% {
    background-position: left bottom;
  }
  100% {
    background-position: right bottom;
  }
}



@keyframes float {
  0% {
    transform: translatey(0);
  }
  50% {
    transform: translatey(-10px);
  }
  100% {
    transform: translatey(0);
  }
}