[data-md-color-scheme='slate'] {
  --md-primary-fg-color--light: #48F5CC;
  --md-default-fg-color--lightest: #00A2A7;
  --md-primary-fg-color--dark: #00A2A7;
  --md-primary-fg-color: #00A2A7;
  --md-typeset-a-color: #37DCB5;
  --md-accent-fg-color: #8FF6DD;
  --md-default-bg-color: #373F51;
  --md-code-hl-color: #2196E6;
  --md-code-hl-color--light: #58647D;
  --md-code-hl-number-color: #FD6A00;
  --md-code-hl-special-color: #FEE5EE;
  --md-code-hl-function-color: #FBB8D0;
  --md-code-hl-constant-color: #E3E8FF;
  --md-code-hl-keyword-color: #6D84F7;
  --md-code-hl-string-color: #37DCB5;

  & .md-header {
      background-image: linear-gradient(
              to bottom right,
              var(--md-primary-fg-color--dark) 30%,
              var(--md-primary-fg-color--light) 100%
      );
      & .md-tabs {
          background: transparent;
      }
  }
}

[data-md-color-scheme='default'] {
  --md-primary-fg-color--light: #48F5CC;
  --md-default-fg-color--lightest: #00A2A7;
  --md-primary-fg-color--dark: #00A2A7;
  --md-primary-fg-color: #00A2A7;
  --md-typeset-a-color: #00A2A7;
  --md-accent-fg-color: #37DCB5;
  --md-code-bg-color: #f5f5f5;
  --md-code-hl-color: #2196E6;
  --md-code-hl-color--light: #373F51;
  --md-code-hl-number-color: #FD6A00;
  --md-code-hl-special-color: #FEE5EE;
  --md-code-hl-function-color: #FBB8D0;
  --md-code-hl-constant-color: #2196E6;
  --md-code-hl-keyword-color: #6D84F7;
  --md-code-hl-string-color: #00A2A7;

  & .md-header {
      background-image: linear-gradient(
              to bottom right,
              var(--md-primary-fg-color--dark) 30%,
              var(--md-primary-fg-color--light) 100%
      );
      & .md-tabs {
          background: transparent;
      }
  }
}

#home-page {
  background-image: url('../images/homepage-desktop.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
  & .home__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-right: 40%;
    gap: 16px;
  }

  & .menu-box {
    opacity: 0.9;
    padding: 10px;
    border: solid 1px #4f9ea6;
    border-radius: 4px;
    text-align: center;
    height: 160px;
    display: block;
    background-image: linear-gradient(
            to bottom right,
            var(--md-primary-fg-color--dark) 30%,
            var(--md-primary-fg-color--light) 100%
    );
  }

  & .menu-box h2 {
    color: white;
  }
}

@media only screen and (max-width: 400px) {
  #home-page {
    background-image: url('../images/homepage-mobile.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;

    & .home__title_container {
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
    }


    & .home__cards {
      display: grid;
      grid-template-columns: none;
      margin-right: 0;
    }
  }

}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 3.2rem;
}

.md-header__title {
    font-size: 1.4rem;
    line-height: 2.8rem;
    height: 2.8rem;
}

.md-tabs__link {
    opacity: 0.9;
    font-size: 0.8rem;
}