/* Change the color scheme */
[data-md-color-scheme="default"] {
    --md-primary-fg-color: #e84aed;
    --md-primary-fg-color--light: var(--md-primary-fg-color);
    --md-primary-fg-color--dark: var(--md-primary-fg-color);

    /* Needed to meet AA guidelines for text */
    --md-typeset-a-color: #cb15d1;

    --md-footer-bg-color: #F3F4F6;
    --md-footer-bg-color--dark: var(--md-footer-bg-color);
    --md-footer-bg-color--light: var(--md-footer-bg-color);

    --md-footer-fg-color: #71717A;
    --md-footer-fg-color--dark: var(--md-footer-fg-color);
    --md-footer-fg-color--light: var(--md-footer-fg-color);
    --md-footer-fg-color--lighter: var(--md-footer-fg-color);
}

.md-typeset {
    text-align: justify;
    text-justify: inter-word;
}

.md-typeset a:focus, .md-typeset a:hover {
    /* Increase contrast for AA */
    color: #018573;
}

/* Give all images a border-radius */
img, .rounded {
    border-radius: 0.2rem;
}

.rounded-2 {
    border-radius: 0.4rem;
}

/* Image Utilities */
.center {
    display: block;
    margin: 0 auto;
}
.circle {
    border-radius: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.circle.cover { object-fit: cover; }
.circle.left { object-position: left center; }
.circle.black { background: #000; }

div:hover>p>.circle {
    transform: scale(1.3);
}

/* For auto-generated images that need extra padding */
.pad {
    padding: 1rem 2rem;
}
.pad-s {
    padding: 0.5rem 1rem;
}

/* Clearfix for cases where an image is aligned in a box */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.clearfix img[align] {
    margin-bottom: 0;
}
.less-margin p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Add extra padding + border radius for header images in posts */
img.header {
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}
.md-post--excerpt img.header {
    margin-bottom: 0;
}

/* Change admonition colors */
.md-typeset .admonition.info,
.md-typeset details.info {
    border-color: #00bfa5;
}
.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
    background-color: rgba(0, 191, 165, 0.1);
}
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
    background-color: #00bfa5;
}

/** Style iframes */
iframe {
    border: none;
    width: 100%;
}

/* Styles copied from Dactyl configurator */
.callout {
    background-image: url(https://ryanis.cool/dactyl/stars.png),linear-gradient(to right,#f3e8ff, #ccfbf1);
    background-repeat: repeat,no-repeat;
    background-size: auto 100%,auto auto;
    background-position: center,0% 0%;
    padding: .5rem;
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: relative;
    margin-top: 1rem;
    border-radius: 0.2rem;
}
.callout>.content {
    mix-blend-mode: luminosity;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #eaecfccc;
    border-radius: .25rem;
}

.callout>.button {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    color: #fff;
    font-weight: 600;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    --gradient-stops: #3c0d61, #374151;
    background-image: linear-gradient(to bottom right,var(--gradient-stops));
    border-radius: .25rem;
    flex: none;
    margin-right: 1rem;
    text-decoration: inherit;
}

.callout>.button:hover {
    color: #fff;
    box-shadow: 0 4px 6px -1px rgb(19 78 74 / .3), 0 2px 4px -2px rgb(19 78 74 / .3);
    --gradient-stops: #7e22ce, #115e59;
}

/* Other Changes */

.katex-display {
    margin: -1em 0 !important;
}

.algorithm {
    background: var(--md-code-bg-color);
    border-radius: .1rem;
    padding: .6em 1.2em;
}

/* Make tables compact */
.pinout table:not([class]) th,
.pinout table:not([class]) td {
    padding: 0.3em 1.25em;
}

.pro::before {
    position: relative;
    bottom: 0.2em;
    margin-left: 0.5em;
    content: 'PRO';
    padding: 0.3em 0.5em;
    border-radius: 0.3em;
    background: #2DD4BF;
    font-size: 0.7em;
    font-weight: bold;
}