:root > * {
  --md-primary-fg-color:        #282B33;
  --md-primary-fg-color--light: #282B33;
  --md-primary-fg-color--dark:  #282B33;
  --md-accent-fg-color: #6494f4;
  --md-accent-hover-fg-color: #8DAEEF;
}

[data-md-color-scheme="slate"] > * {
  --md-accent-fg-color: #496EB6;
  --md-accent-hover-fg-color: #6494f4;
}

body .md-footer {
    background-color: var(--md-primary-fg-color);
    margin-top: 50px;
    
    .md-footer-meta {
        background-color: inherit;
    }
}

.md-typeset .grid {
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
}

.md-typeset .md-button {
    padding: .3em 1em;
}

[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
    color: var(--md-default-fg-color);
    border-color: var(--md-default-fg-color--light);

    &:hover {
        color: var(--md-accent-bg-color);
        background-color: var(--md-accent-fg-color);
        border-color: var(--md-accent-fg-color);
    }
}

.md-typeset .md-button--primary {
    background-color: var(--md-accent-fg-color);
    border-color: var(--md-accent-fg-color);
    color: var(--md-primary-bg-color);
    
    &:hover {
        background-color: var(--md-accent-hover-fg-color);
        border-color: var(--md-accent-hover-fg-color);
    }
}

.md-header__button.md-logo {
	padding: 3px;
	margin: 0;

	> img {
		height: 2.5rem;
	}
}

/* h1 is only used as page title, so it shares the style of h2 and is just a bit larger */
.md-typeset h1,
.md-typeset h2 {
    color: var(--md-accent-fg-color);
    font-weight: 500;
    letter-spacing: -.01em;
}

.md-typeset h1 {
    margin: 0;
    font-size: 2.2em;
}

.md-typeset h2 {
    font-size: 1.6em;
    margin: 1.6em 0 .6em;
    clear: both;
}

/* h3 is a sub headline of h2: smaller, in the text colour, but bold so it doesn't look like a regular paragraph */
.md-typeset h3 {
    color: var(--md-default-fg-color);
    font-size: 1.2em;
    font-weight: 700;
    margin: 1.4em 0 .4em;
}

.md-typeset a:not(.md-button):not([href^='#__tabbed_']) {
    color: var(--md-accent-fg-color);
    
    &::before {
        content: "↗ ";
    }
}

span.author {
          display: inline-flex;
          align-items: center;
    vertical-align: middle;
    background: var(--md-accent-fg-color);
    color: var(--md-primary-bg-color);
        font-weight: 700;
        border-radius: 20px;
        gap: 10px;
        padding-right: 10px;
        margin-left: 15px;
        font-size: 70%;
    
 > img {
     border-radius: 50%;
     transform: scale(1.2);
     box-shadow: 4px 0 5px rgb(0 0 0 / 20%);
 }
}