:root>* {
  --md-primary-fg-color: #124191;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark: #90030C;

  --md-accent-fg-color: #00c9ff;

  --nokia-heading-font-color: #124191;

  /* get started home button */
  --nokia-get-started-btn-color: #124191;
  --nokia-get-started-text-color: #ffffff;
  --nokia-get-started-hover-text-color: #ffffff;
  --nokia-get-started-hover-btn-color: #00c9ff;
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #00c9ff;
  --md-accent-fg-color: #ff3154;

  /* --nokia-heading-font-color: #bec8d2; this is a greyish version for comparison */
  --nokia-heading-font-color: #00c9ff;
  --nokia-get-started-btn-color: #bec8d2;
  --nokia-get-started-text-color: #124191;
  --nokia-get-started-hover-text-color: #ffffff;
  --nokia-get-started-hover-btn-color: #124191;
}

body,
input {
  font-weight: 300;
}

/* colors for headings */
.md-typeset h1,
h2,
h3,
h4 {
  font-family: NokiaPureHeadlineLight;
  color: var(--nokia-heading-font-color)
}

/* setting the code font size a bit smaller */
.md-typeset code {
  font-size: .8em;
}

@media screen and (max-width: 76.1875em) {
  .md-header__button.md-icon[for=__drawer] {
    order: -1
  }

  .md-header__button.md-logo {
    display: block;
  }
}

.md-container.secondary-section {
  border: 0;
}

/* need to have decide if it is better or not
  making the content width bigger
.md-grid {
  max-width: 1440px;
} */

/* Table styling */
.md-typeset table:not([class]) th {
  background-color: #124191;
}

th {
  color: #FFFFFF !important;
}

/* Pumping heart */
.md-typeset .mdx-heart {
  -webkit-animation: heart 1s infinite;
  animation: heart 1s infinite;
  color: #e91e63
}

/* make announce link color always white */
.md-banner__inner a {
  color: #ffffff
}

/* shadow effect for images and divs for video */
.img-shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* styles for inter H1 code <hr> */
.ext-code-divider {
  margin-top: 3em;
  text-align: center;
}

.ext-code-divider a {
  display: inline-block;
  transition: transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), color 125ms;
}

.ext-code-divider a:focus,
.ext-code-divider a:hover {
  transform: scale(1.2);
}

.ext-code-divider hr {
  display: inline-block;
  width: 40px;
  margin: 16px;
  vertical-align: middle;
  background-color: currentColor;
  border: none;
}

/* vertical alignment for svg in h1 divider element */
.ext-code-divider>.vertical-middle {
  vertical-align: middle;
}