/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style : normal;
    font-weight: 300;
    src        : local(''),
        url('../fonts/roboto-v30-latin-300.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/roboto-v30-latin-300.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-300italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style : italic;
    font-weight: 300;
    src        : local(''),
        url('../fonts/roboto-v30-latin-300italic.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/roboto-v30-latin-300italic.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style : normal;
    font-weight: 400;
    src        : local(''),
        url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/roboto-v30-latin-regular.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style : italic;
    font-weight: 400;
    src        : local(''),
        url('../fonts/roboto-v30-latin-italic.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/roboto-v30-latin-italic.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
    font-family: 'Roboto';
    font-style : normal;
    font-weight: 700;
    src        : local(''),
        url('../fonts/roboto-v30-latin-700.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/roboto-v30-latin-700.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style : italic;
    font-weight: 700;
    src        : local(''),
        url('../fonts/roboto-v30-latin-700italic.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/roboto-v30-latin-700italic.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-mono-regular - latin */
@font-face {
    font-family: 'Roboto Mono';
    font-style : normal;
    font-weight: 400;
    src        : local(''),
        url('../fonts/roboto-mono-v22-latin-regular.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/roboto-mono-v22-latin-regular.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-mono-700 - latin */
@font-face {
    font-family: 'Roboto Mono';
    font-style : normal;
    font-weight: 700;
    src        : local(''),
        url('../fonts/roboto-mono-v22-latin-700.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/roboto-mono-v22-latin-700.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-mono-italic - latin */
@font-face {
    font-family: 'Roboto Mono';
    font-style : italic;
    font-weight: 400;
    src        : local(''),
        url('../fonts/roboto-mono-v22-latin-italic.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/roboto-mono-v22-latin-italic.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-mono-700italic - latin */
@font-face {
    font-family: 'Roboto Mono';
    font-style : italic;
    font-weight: 700;
    src        : local(''),
        url('../fonts/roboto-mono-v22-latin-700italic.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/roboto-mono-v22-latin-700italic.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

:root {
    --md-hue: 350;
    --md-text-font: "Roboto";
    --md-code-font: "Courier New";

    /* Default color shades */
    --md-default-fg-color          : #ffffff;
    --md-default-fg-color--light   : rgba(255, 255, 255, 0.75);
    --md-default-fg-color--lighter : rgba(255, 255, 255, 0.5);
    --md-default-fg-color--lightest: rgba(255, 255, 255, 0.15);
    --md-default-bg-color          : #1c1d26;
    --md-default-bg-color--light   : rgba(23, 24, 32, 0.95);
    --md-default-bg-color--lighter : rgba(23, 24, 32, 0.5);
    --md-default-bg-color--lightest: rgba(23, 24, 32, 0.20);

    /* Primary color shades */
    --md-primary-fg-color       : #e44c65;
    --md-primary-fg-color--light: #e44c65;
    --md-primary-fg-color--dark : #e44c65;
    --md-primary-bg-color       : hsla(0, 0%, 100%, 1);
    --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);


    /* Accent color shades */
    --md-accent-fg-color             : #e44c65;
    --md-accent-fg-color--transparent: rgba(228, 76, 101, 0.1);
    --md-accent-bg-color             : #272833;
    --md-accent-bg-color--light      : rgba(39,40,51,0.965);

    /* // Code color shades */
    --md-code-fg-color: var(--md-default-fg-color);
    --md-code-bg-color: var(--md-default-fg-color--lightest);

    /* // Code highlighting color shades */
    --md-code-hl-color            : hsla(350, 74%, 60%, 0.15);
    --md-code-hl-number-color     : hsla(6, 74%, 63%, 1);
    --md-code-hl-special-color    : hsla(340, 83%, 66%, 1);
    --md-code-hl-function-color   : hsla(291, 57%, 65%, 1);
    --md-code-hl-constant-color   : hsla(250, 62%, 70%, 1);
    --md-code-hl-keyword-color    : hsla(219, 66%, 64%, 1);
    --md-code-hl-string-color     : hsla(150, 58%, 44%, 1);
    --md-code-hl-name-color       : var(--md-code-fg-color);
    --md-code-hl-operator-color   : var(--md-default-fg-color--light);
    --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
    --md-code-hl-comment-color    : var(--md-default-fg-color--light);
    --md-code-hl-generic-color    : var(--md-default-fg-color--light);
    --md-code-hl-variable-color   : var(--md-default-fg-color--light);

    /* // Typeset color shades */
    --md-typeset-color: var(--md-default-fg-color);

    /* // Typeset `a` color shades */
    --md-typeset-a-color: var(--md-primary-fg-color);

    /* // Typeset `mark` color shades */
    --md-typeset-mark-color: hsla(340, 83%, 66%, 0.3);

    /* // Footer color shades */
    --md-footer-bg-color      : rgba(0, 0, 0, 0.87);
    --md-footer-bg-color--dark: rgba(0, 0, 0, 1);

    --md-typeset-table-color : var(--md-default-fg-color--lighter);

    --md-admonition-bg-color : var(--md-default-bg-color);
    --md-admonition-fg-color : var(--md-default-fg-color);
}
.md-footer-meta__inner {
  flex-direction : column;
  text-align     : center;
  justify-content: center;
}

.md-copyright {
  text-align: center;
}

.grid-container {
  --child-flex-basis: 15rem;
  display           : flex;
  flex-wrap         : wrap;
  gap               : 1rem;
  justify-content   : center;
  align-items       : center;
}

.grid-container>* {
  flex: 1 1 var(--child-flex-basis);
}

.grid-container__side {
  flex: 1 1 5rem;
}

.image-circ-cropper {
  object-fit   : cover;
  border-radius: 50%;
}

.bkg-svg-container {
  width   : 100%;
  height  : 100%;
  position: absolute;
  top     : 0;
  left    : 0;
  z-index : -10;
}

.md-typeset hr {
  border-bottom-width: 0.1rem;
  margin-inline      : 5%;
}

.md-tabs {
  overflow: visible;
}

[dir=ltr] .md-tabs__link svg {
  margin-right: 0;
}

.md-tabs__link svg {
  height: inherit;
}

.md-tabs__list {
  contain: layout;
  overflow: visible;
}

.dropdown {
  position: relative;
  overflow: visible;
}

.dropdown .dropdown__title {
  display    : inline-flex;
  align-items: center;
}

.dropdown__emoji {
  fill      : currentcolor;
  max-height: 100%;
  width     : 1.5em
}

.md-header {
    /* remove the default backdrop filter */
    backdrop-filter: none;
}

.md-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1; /* Sits behind header text/buttons */
  background-color: var(--md-default-bg-color--light);
  backdrop-filter : blur(0.4rem);
  -webkit-backdrop-filter: blur(0.4rem);
}

.dropdown .dropdown__menu {
  list-style      : none;
  position        : absolute;
  min-width       : 15ch;
  left            : 50%;
  top             : calc(100%);
  transition      : 280ms all ease-out;
  transform       : rotateX(-90deg) translateX(-50%);
  transform-origin: top center;
  visibility      : hidden;
  padding         : 0.5em 0;
  background-color: var(--md-default-bg-color--light);
  border-radius   : 4px;
  box-shadow      : 0 0 0.4rem 0.1rem rgba(0, 0, 0, 0.2);
  backdrop-filter : blur(0.4rem);
  -webkit-backdrop-filter: blur(0.4rem);
  isolation       : isolate;
  z-index: 100;
}

.dropdown .dropdown__menu a {
  color  : var(--md-default-fg-color);
  display: block;
  padding: 0.5em 1em;
}

.dropdown:hover .dropdown__menu,
.dropdown:focus-within .dropdown__menu {
  backdrop-filter : blur(0.4rem);
  transform : rotateX(0) translateX(-50%);
  visibility: visible;
}

.dropdown__item {
  text-decoration: none;
  display        : inline-block;
  font-size      : .7rem;
  opacity       : 0.7;
}

.dropdown__item:focus {
  outline         : none;
  opacity: 1;
}

.dropdown__item:hover {
    opacity: 1;
}


.md-typeset .accent-hr {
  margin-inline      : 30%;
  border-color       : var(--md-primary-fg-color);
  border-bottom-width: 0.2rem;
}

.md-typeset .headerlink {
  position: absolute;
}

.table-column {
  width: 8rem;
}

.tile-container {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-auto-rows       : 1fr;
  gap                  : 1rem;
  text-align           : center;
  justify-items        : center;
  align-self           : center;
}

.simple-tile {
  aspect-ratio    : 1;
  background-color: var(--md-accent-bg-color);
  border-radius   : 15px;
  padding         : 1rem;
  display         : flex;
  flex-direction  : column;
  text-align      : center;
}

.simple-tile>* {
  flex       : 1 1 1rem;
  display    : flex;
  align-items: center;
  text-align : center;
  margin     : auto;
}

.simple-tile:hover>p>.twemoji {
  color: var(--md-accent-fg-color);
}

.md-social {
  display: block;
}

.md-footer__title {
  font-size: 0.9rem;
}

.md-footer {
  background-color: var(--md-footer-bg-color);
}

.md-footer-meta {
  background-color: var(--md-footer-bg-color) !important;
}