/*:root {
    --mdx-theme-sat: rgba(110, 175, 5, 0.33);
}*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    html {
        font-size: 12px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    html {
        font-size: 14px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .html {
        font-size: 16px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .html {
        font-size: 16px;
    }
}


html {
  position: relative;
  min-height: 100%;
}

* {
    box-sizing: border-box;
}

body {
    background: radial-gradient(circle at center, rgba(150, 150, 150, 0.7) 0%, rgba(120, 120, 120, 0.6) 40%, rgba(70, 70, 70, 0.6) 70%, rgba(45, 45, 45, 0.8) 90%, #262626 100%), linear-gradient(135deg, #2d2d2d, #1a1a1a, #000);
    background-size: cover;
    margin-bottom: 60px;
    overflow: hidden;
}

body.mdx-body {
    margin: 0 !important;
    text-align: center;
    align-items: center;
    background-color: /*var(--bs-dark)*/ #262626;
    overflow: hidden !important;
    background-repeat: no-repeat;
    background-position: center center;
    transition-property: background-image;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    transition-delay: 0;
    z-index: 0;
}

    body.mdx-body-mdx {
        background-image: url(/images/bg-mdx.webp);
        color: var(--bs-dark) !important;
    }

    body.mdx-body-ind {
        background-image: url(/images/bg-ind.webp);
        color: var(--bs-light) !important;
    }

    body.mdx-body-sat {
        background-image: url(/images/bg-sat.webp);
        color: var(--bs-light) !important;
    }

.mdx-debug {
    border: 5px solid #d2ff00 !important;
    /*background-color: rgba(210, 255, 0, .3);*/
}

.mdx-dark {
    border: 1px solid rgba(255, 255, 255, .3);
    background-color: rgba(0, 0, 0, .3) !important;
}

.mdx-dark-on-light {
    border: 1px solid rgba(0, 0, 0, .3) !important;
}

.mdx-offstage {
    display: none !important;
    position: absolute !important;
    top: -99999px !important;
    left: -99999px !important;
    width: 0px !important;
    height: 0px !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    z-index: -1 !important;
    opacity: 0 !important;
}

.mdx-nowrap {
    white-space: nowrap !important;
}

.flip {
    display: inline-block;
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
}