@font-face {
    font-family: 'SourceCodePro';
    src: url("/assets/fonts/SourceCodePro-Light.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
    font-variant: normal;
}
@font-face {
  font-family: 'SourceCodePro';
  src: url("/assets/fonts/SourceCodePro-LightIt.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-variant: normal;
}
@font-face {
  font-family: 'SourceCodePro';
    src: url("/assets/fonts/SourceCodePro-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceCodePro';
    src: url("/assets/fonts/SourceCodePro-It.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceCodePro';
    src: url("/assets/fonts/SourceCodePro-Bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
}
@font-face {
    font-family: 'SoureCodePro';
    src: url("/assets/fonts/SourceCodePro-BoldIt.otf") format("opentype");
    font-weight: bold;
    font-style: italic;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceCodePro';
    src: url("/assets/fonts/SourceCodePro-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
}
@font-face {
    font-family: 'SoruceCodePro';
    src: url("/assets/fonts/SourceCodePro-BlackIt.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
    font-variant: normal;
}


@font-face {
    font-family: 'SourceDisplay';
    src: url("/assets/fonts/SourceSerif4Display-Light.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceDisplay';
    src: url("/assets/fonts/SourceSerif4Display-LightIt.otf") format("opentype");
    font-weight: 200;
    font-style: italic;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceDisplay';
    src: url("/assets/fonts/SourceSerif4Display-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceDisplay';
    src: url("/assets/fonts/SourceSerif4Display-It.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceDisplay';
    src: url("/assets/fonts/SourceSerif4Display-Bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceDisplay';
    src: url("/assets/fonts/SourceSerif4Display-BoldIt.otf") format("opentype");
    font-weight: bold;
    font-style: italic;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceDisplay';
    src: url("/assets/fonts/SourceSerif4Display-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceDisplay';
    src: url("/assets/fonts/SourceSerif4Display-BlackIt.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
    font-variant: normal;
}
    

@font-face {
  font-family: 'SourceSans';
  src: url("/assets/fonts/SourceSans3-Light.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-variant: normal;
}
@font-face {
  font-family: 'SourceSans';
  src: url("/assets/fonts/SourceSans3-LightIt.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-variant: normal;
}
@font-face {
  font-family: 'SourceSans';
  src: url("/assets/fonts/SourceSans3-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
}
@font-face {
  font-family: 'SourceSans';
  src: url("/assets/fonts/SourceSans3-It.otf") format("opentype");
  font-weight: normal;
  font-style: italic;
  font-variant: normal;
}
@font-face {
  font-family: 'SourceSans';
  src: url("/assets/fonts/SourceSans3-Semibold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-variant: normal;
}
@font-face {
  font-family: 'SoureSans';
  src: url("/assets/fonts/SourceSans3-BoldIt.otf") format("opentype");
  font-weight: bold;
  font-style: italic;
  font-variant: normal;
}
@font-face {
  font-family: 'SourceSans';
  src: url("/assets/fonts/SourceSans3-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
}
@font-face {
  font-family: 'SoruceSans';
  src: url("/assets/fonts/SourceSans3-BlackIt.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-variant: normal;
}


@font-face {
    font-family: 'SourceSerif';
    src: url("/assets/fonts/SourceSerif4-Light.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceSerif';
    src: url("/assets/fonts/SourceSerif4-LightIt.otf") format("opentype");
    font-weight: 200;
    font-style: italic;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceSerif';
    src: url("/assets/fonts/SourceSerif4-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceSerif';
    src: url("/assets/fonts/SourceSerif4-It.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceSerif';
    src: url("/assets/fonts/SourceSerif4-Bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceSerif';
    src: url("/assets/fonts/SourceSerif4-BoldIt.otf") format("opentype");
    font-weight: bold;
    font-style: italic;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceSerif';
    src: url("/assets/fonts/SourceSerif4-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
}
@font-face {
    font-family: 'SourceSerif';
    src: url("/assets/fonts/SourceSerif4-BlackIt.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
    font-variant: normal;
}

:root {
    --c64-black: #000000;
    --c64-white: #FFFFFF;
    --c64-red: #813338;
    --c64-cyan: #75CEC8;
    --c64-purple: #8E3C97;
    --c64-green: #56AC4D;
    --c64-blue: #2E2C9B;
    --c64-yellow: #EDF171;
    --c64-orange: #8E5029;
    --c64-brown: #553800;
    --c64-light-red: #C46C71;
    --c64-grey-1: #4A4A4A;
    --c64-grey-2: #7B7B7B;
    --c64-light-green: #A9FF9F;
    --c64-light-blue: #706DEB;
    --c64-grey-3: #B2B2B2;

    --tpau-light-purple: #b54bc0;
    --tpau-c64-blue: #0A1C91;
    --tpau-c64-light-blue: #5C52E6;
    --tpau-c64-grey-1: #393939;
    --tpau-c64-grey-2: #686868;
    --md-text-font: "SourceSerif"; 
    --md-code-font: "SourceCode";

    font-size: 1.4em;
}


.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 {
    font-family: SourceSans;
    font-weight: bold;
    text-transform: none;
    color: var(--c64-purple);
}

.md-typeset h1 code, .md-typeset h2 code, .md-typeset h3 code, .md-typeset h4 code, .md-typeset h5 code, .md-typeset h6  code {
        background-color: inherit;
        color: inherit;
        padding-left: 0pt;
    }
}

.md-typeset h2 {
    font-size: 1.8em;
}

.md-typeset h3 {
    font-size: 1.6em;
}

.md-typeset h4 {
    font-size: 1.4em;
}

.md-typeset h5 {
    font-size: 1.2em;
}

.md-typeset h6 {
    font-size: 1em;
}

.md-header__sub_topic {
    font-weight: normal;
}

:root > * {
    --md-accent-fg-color: var(--tpau-light-purple);
    --md-primary-fg-color: var(--c64-purple);
    --md-default-fg-color--light: var(--c64-purple);
    --md-typeset-color: var(--c64-black);
    --md-footer-bg-color: var(--c64-purple);
    --md-footer-fg-color--light: var(--c64-white);
    --md-accent-fg-color--transparent: color-mix(in srgb, var(--c64-purple), transparent 95%);

.md-header {
    background-color: var(--md-footer-bg-color);
    color: var(--md-footer-fg-color--light);
}
.md-header__title {
    font-family: SourceSans;
}
.md-search__button {
    color: var(--md-footer-fg-color--light);
}
.md-search__button::after {
    background-color: var(--md-default-bg-color--dark);
}
.md-search__button:before {
    background-color: var(--md-footer-fg-color--light);
}
.md-footer {
    background-color: var(--md-footer-bg-color);
    color: var(--md-footer-fg-color--light);
}
.md-copyright__highlight {
    color: var(--md-footer-fg-color--light);
}

.md-nav {
    color: var(--md-primary-fg-color);
    font-family: SourceSans;
    font-weight: bold;
}
.md-nav--integrated>.md-nav__list>.md-nav__item--active .md-nav--secondary .md-nav__link--active {
    font-weight: 900;
}
.md-nav__item .md-nav__link--active {
    font-weight: 900;
}

.md-content {
    --md-typeset-a-color: var(--md-accent-fg-color);
}

.md-nav__button.md-logo {
    display: inline;
}

.md-nav__title .md-nav__button.md-logo img {
    width: 100%;
    height: 120px;
}

.md-nav__title .md-nav__button.md-logo img svg {
    width: 100%;
    height: 100%;
}

.md-typeset code {
    white-space: pre-wrap;
}

table.code.highlight code {
    background-color: var(--c64-white);
}


.md-typeset code em {
    color: var(--c64-grey-1)
}

.md-typeset code a {
    color: var(--c64-grey-2)
}

.md-typeset code a:hover {
    color: var(--c64-grey-1)
}

.md-typeset a {
    text-decoration: none;
}

.md-tpau {
    margin: auto .6rem;
    height: 36px;
    padding: .4rem 0;
    vertical-align: middle;
}

.md-tpau img {
    height: 100%;
    width: auto
}