/**
 * 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: #c30f2e;
  --ifm-color-primary-dark: #b00d29;
  --ifm-color-primary-darker: #a60d27;
  --ifm-color-primary-darkest: #890a20;
  --ifm-color-primary-light: #d61033;
  --ifm-color-primary-lighter: #e01135;
  --ifm-color-primary-lightest: #ee2346;
  --ifm-background-color: #fefefe;
  --ifm-code-font-size: 95%;
  --ifm-navbar-shadow: none;
  --ifm-footer-background-color: #111f3b;
  --ifm-footer-color: var(--ifm-footer-link-color);
  --ifm-footer-link-color: var(--ifm-color-secondary);
  --ifm-footer-title-color: var(--ifm-color-white);
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --global-border-color: var(--ifm-color-emphasis-300);
  --angular-shield-color: #dd0031;
  --angular-shield-color-dark: #c3002f;
  --stackblitz-lightning-color: #49a2f8;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
:root[data-theme='dark'] {
  --ifm-color-primary: #fc2753;
  --ifm-color-primary-dark: #fc0a3c;
  --ifm-color-primary-darker: #f40335;
  --ifm-color-primary-darkest: #c9032c;
  --ifm-color-primary-light: #fc446a;
  --ifm-color-primary-lighter: #fd5275;
  --ifm-color-primary-lightest: #fd7d98;
  --ifm-background-color: #0a1429;
  --ifm-navbar-background-color: var(--ifm-background-color);
  --ifm-toc-border-color: var(--global-border-color);
  --ifm-hover-overlay: rgba(255, 255, 255, 0.07);
  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
  --global-border-color: #293856;
}

.navbar {
  border-bottom: var(--ifm-global-border-width) solid var(--global-border-color);
}

.footer__logo {
  width: 100px;
  height: 100px;
}

.video-container {
  width: 100%;
  max-width: 750px;
  margin: auto;
}

.video-responsive-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;

  > iframe {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
