/* @import url("https://fonts.googleapis.com/css?family=ABeeZee|Roboto|Comfortaa|Acme|Oxygen Mono"); */
@import url("https://fonts.cdnfonts.com/css/whitney-2");
@import url("https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css");
@import url("https://styles.blocklycode.org/dropdowns.css");
@import url("https://styles.blocklycode.org/contrast.css");
@import url("https://styles.blocklycode.org/sidebar.css");
@import url("https://styles.blocklycode.org/buttons.css");
@import url("https://styles.blocklycode.org/header.css");
@import url("https://styles.blocklycode.org/footer.css");
@import url("https://styles.blocklycode.org/popups.css");
@import url("https://styles.blocklycode.org/inputs.css");
@import url("https://styles.blocklycode.org/themes.css");
@import url("https://styles.blocklycode.org/modals.css");
@import url("https://styles.blocklycode.org/bed.css");
@import url("https://styles.blocklycode.org/fonts.css");
@import url("https://styles.blocklycode.org/tabs.css");

:root {
    /* Main Colors */
    --bc-clr-primary-200: hsl(210, 66%, 70%);
    --bc-clr-primary-400: hsl(210, 66%, 55%);
    --bc-clr-primary-600: hsl(210, 66%, 40%);
    --bc-clr-primary-800: hsl(210, 66%, 25%);
    --bc-clr-secondary-200: hsl(40, 100%, 65%);
    --bc-clr-secondary-400: hsl(40, 100%, 50%);
    --bc-clr-secondary-600: hsl(42, 100%, 35%);
    --bc-clr-secondary-800: hsl(42, 100%, 20%);
    --bc-clr-danger-200: hsl(6, 98%, 70%);
    --bc-clr-danger-400: hsl(6, 98%, 55%);
    --bc-clr-danger-600: hsl(6, 98%, 40%);
    --bc-clr-danger-800: hsl(6, 98%, 25%);
    --bc-clr-success-200: hsl(139, 47%, 60%);
    --bc-clr-success-400: hsl(139, 47%, 45%);
    --bc-clr-success-600: hsl(139, 47%, 30%);
    --bc-clr-success-800: hsl(139, 47%, 15%);
    /* Font Colors */
    --bc-clr-text-100: hsl(250, 0%, 100%);
    --bc-clr-text-200: hsl(250, 0%, 095%);
    --bc-clr-text-300: hsl(250, 0%, 090%);
    --bc-clr-text-400: hsl(250, 0%, 080%);
    --bc-clr-text-600: hsl(250, 0%, 060%);
    --bc-clr-text-800: hsl(250, 0%, 040%);
    /* Font Family */
    --bc-ff-body: Roboto, sans-serif;
    --bc-ff-heading: Whitney, sans-serif;
    --bc-ff-mono: 'Roboto Mono', monospace;
    /* Font Sizes */
    --bc-fs-100: 1.0rem;
    --bc-fs-200: 1.2rem;
    --bc-fs-300: 1.4rem;
    --bc-fs-400: 1.6rem;
    --bc-fs-500: 1.8rem;
    --bc-fs-600: 2.0rem;
    --bc-fs-700: 2.2rem;
    --bc-fs-800: 2.5rem;
    --bc-fs-900: 3.0rem;
    /* Toggle Switch Widths */
    --bc-slider-width: 5rem;
}

body {
    /* Dark Colors */
    --bc-clr-dark-100: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), 45%);
    --bc-clr-dark-200: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), 40%);
    --bc-clr-dark-300: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), 35%);
    --bc-clr-dark-400: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), 30%);
    --bc-clr-dark-500: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), 25%);
    --bc-clr-dark-600: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), 20%);
    --bc-clr-dark-700: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), 15%);
    --bc-clr-dark-800: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), 10%);
    --bc-clr-dark-900: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), 05%);
    /* Background Colors */
    --bc-clr-bg-hover: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), var(--bc-clr-bg-hover-lght));
    --bc-clr-bg-body: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), var(--bc-clr-bg-body-lght));
    --bc-clr-bg-sidebar: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), var(--bc-clr-bg-sidebar-lght));
    --bc-clr-bg-footer: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), var(--bc-clr-bg-footer-lght));

    --bc-clr-bg-input: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), var(--bc-clr-bg-input-lght));
    --bc-clr-bd-input: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), var(--bc-clr-bd-input-lght));

    --bc-clr-bg-button: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), var(--bc-clr-bg-input-lght));
    --bc-clr-bd-button: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), var(--bc-clr-bd-input-lght));

    --bc-clr-bg-drop: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), var(--bc-clr-bg-drop-lght));
    --bc-clr-hr-drop: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), var(--bc-clr-hr-drop-lght));

    --bc-clr-bg-modal: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), var(--bc-clr-bg-modal-lght));
    --bc-clr-bd-modal: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), var(--bc-clr-bd-modal-lght));
    --bc-clr-sh-modal: hsl(var(--bc-clr-theme-hue), var(--bc-clr-theme-sat), var(--bc-clr-sh-modal-lght));
}


html {
    background: var(--bc-clr-bg-body);
    height: 100%;
    font-size: 62.5%;
}

*,
::before,
::after {
    box-sizing: border-box;
}

body {
    background: var(--bc-clr-bg-body);
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-size: 1.6rem;
    font-family: var(--bc-ff-body);
    color: var(--bc-clr-text-400);
    overflow-x: hidden;
    scroll-behavior: smooth !important;
    /* container-type: inline-size; */
}

body::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

body::-webkit-scrollbar-track {
    background: #555;
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

[disabled] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

:where(h1, h2, h3, h4, h5, h6) {
    margin-block: .5rem;
    overflow-wrap: break-word;
}

a {
    font-weight: 500;
    text-decoration: none;
    color: var(--bc-clr-secondary-400);
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

p {
    margin-block: .1rem;
    overflow-wrap: break-word;
}

ol,
ul {
    padding: 0;
}

li {
    list-style-position: inside;
}

i {
    vertical-align: baseline;
    font: inherit;
    color: inherit;
}

blockquote,
pre,
code {
    font-family: var(--bc-ff-mono);
}

code {
    font-size: .9em;
}

pre code {
    background: var(--bc-clr-dark-900);
    border-radius: .5rem;
    margin: 0;
    padding: .5rem;
    display: block;
    color: #ddd;
}

table {
    margin: 2rem auto;
    width: 100%;
    border-collapse: collapse;
}

table thead {
    background: var(--bc-clr-dark-900);
}

table thead th {
    padding: 1rem;
    text-align: center;
    color: var(--bc-clr-text-100);
}

table tbody tr:nth-child(2n) {
    background: var(--bc-clr-dark-600);
}

table tbody td {
    padding: 1rem;
}

.container {
    margin-inline: auto;
    padding: max(4rem, 5vw);
    max-width: 120rem;
    width: 100%;
    container-type: inline-size;
}

.container> :first-child {
    margin-top: 0;
}

.container> :last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .container {
        padding: 2rem;
    }
}


.flex {
    display: flex;
}

.grid {
    display: grid;
}

.grid.col2.even {
    grid-template-columns: repeat(2, 1fr);
}

.grid.col3.even {
    grid-template-columns: repeat(3, 1fr);
}

.grid.col4.even {
    grid-template-columns: repeat(4, 1fr);
}

.grid.col5.even {
    grid-template-columns: repeat(5, 1fr);
}

.grid.col6.even {
    grid-template-columns: repeat(6, 1fr);
}

.grid.col2.p25-75 {
    grid-template-columns: 1fr 3fr;
}

.grid.col2.p75-25 {
    grid-template-columns: 3fr 1fr;
}

.grid.col2.p40-60 {
    grid-template-columns: 2fr 3fr;
}

.grid.col2.p60-40 {
    grid-template-columns: 3fr 2fr;
}

.grid.col2.p30-70 {
    grid-template-columns: 3fr 7fr;
}

.grid.col2.p70-30 {
    grid-template-columns: 7fr 3fr;
}

.gap-050 {
    gap: 0.5rem;
}

.gap-100 {
    gap: 1.0rem;
}

.gap-200 {
    gap: 1.5rem;
}

.gap-300 {
    gap: 2.0rem;
}

.gap-400 {
    gap: 2.5rem;
}

.gap-500 {
    gap: 3.0rem;
}

.gap-600 {
    gap: 3.5rem;
}

.gap-700 {
    gap: 4.0rem;
}

.gap-800 {
    gap: 4.5rem;
}

.gap-900 {
    gap: 5.0rem;
}

.gap-col-050 {
    column-gap: 0.5rem;
}

.gap-col-100 {
    column-gap: 1.0rem;
}

.gap-col-200 {
    column-gap: 1.5rem;
}

.gap-col-300 {
    column-gap: 2.0rem;
}

.gap-col-400 {
    column-gap: 2.5rem;
}

.gap-col-500 {
    column-gap: 3.0rem;
}

.gap-col-600 {
    column-gap: 3.5rem;
}

.gap-col-700 {
    column-gap: 4.0rem;
}

.gap-col-800 {
    column-gap: 4.5rem;
}

.gap-col-900 {
    column-gap: 5.0rem;
}

.gap-row-050 {
    row-gap: 0.5rem;
}

.gap-row-100 {
    row-gap: 1.0rem;
}

.gap-row-200 {
    row-gap: 1.5rem;
}

.gap-row-300 {
    row-gap: 2.0rem;
}

.gap-row-400 {
    row-gap: 2.5rem;
}

.gap-row-500 {
    row-gap: 3.0rem;
}

.gap-row-600 {
    row-gap: 3.5rem;
}

.gap-row-700 {
    row-gap: 4.0rem;
}

.gap-row-800 {
    row-gap: 4.5rem;
}

.gap-row-900 {
    row-gap: 5.0rem;
}

.place-center {
    display: grid;
    place-items: center;
}

.even-columns {
    display: flex;
    flex-wrap: wrap;
}

.even-columns>* {
    flex: 1;
}

.push-right {
    margin-left: auto !important;
}

.push-down {
    margin-top: auto !important;
}

.flex.dir-h {
    flex-direction: row;
}

.flex.dir-v {
    flex-direction: column;
}

.flex.dir-hr {
    flex-direction: row-reverse;
}

.flex.dir-vr {
    flex-direction: column-reverse;
}

.flex.v-center {
    align-items: center;
}

.flex.h-center {
    justify-content: center;
}

.grid>.v-center {
    align-self: center;
}

.flex.fwrap {
    flex-wrap: wrap;
}

.flex .fgrow {
    flex: 1 0;
}

.flex .fshrink {
    flex: 0 1;
}

.flex .f1 {
    flex: 1 1;
}

.pos-rel {
    position: relative;
}

.hide-overflow {
    overflow: hidden;
}

.hide-overflow-x {
    overflow-x: hidden;
}

.hide-overflow-y {
    overflow-y: hidden;
}

.pointer {
    cursor: pointer;
}

.nostyles {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

.nostyles:where(:hover, :focus, :focus-visible, :focus-within) {
    outline: none;
}

:where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--bc-ff-heading);
    line-height: 1.2;
}

:where(h2:not(.not-title)) {
    border-bottom: 1px solid currentColor;
    margin-block: 1rem;
    font-size: var(--bc-fs-900);
    font-weight: 900;
    color: var(--bc-clr-secondary-400);
}

:where(h2.bd-none) {
    border-bottom: none;
}

:where(h3:not(.not-title)) {
    font-size: var(--bc-fs-800);
    font-weight: 800;
    color: var(--bc-clr-text-100);
}

:where(h4:not(.not-title)) {
    font-size: var(--bc-fs-700);
    font-weight: 700;
    color: var(--bc-clr-text-100);
}

:where(h5:not(.not-title)) {
    font-size: var(--bc-fs-600);
    font-weight: 600;
    color: var(--bc-clr-text-100);
}

:where(h6:not(.not-title)) {
    font-size: var(--bc-fs-500);
    font-weight: 500;
    color: var(--bc-clr-text-200);
}

.sr-only {
    margin: 0;
    position: absolute;
    height: 0;
    width: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
}

/* Code Syntax Highlighting */
.hljs.hljs {
    background: var(--bc-clr-dark-900);
    color: #ddd;
}

.hljs-string {
    color: #0ce804 !important;
}

.hljs-attr {
    color: lightblue !important;
}

.hljs-variable.language_ {
    color: #ff2a2a !important;
}

.hljs-keyword {
    color: #c910d9 !important;
}

.hljs-title.function_ {
    color: aqua !important;
}

.hljs-number {
    color: orange !important;
}

.hljs-attribute {
    color: #ffa75a !important;
}

.hljs-selector-tag,
.hljs-tag .hljs-name {
    color: cornflowerblue !important;
}

.hljs-tag {
    color: gray;
}

.betaFeature,
.alphaFeature {
    position: relative;
    display: flex;
}

.betaFeature::after,
.alphaFeature::after {
    border-radius: 5rem;
    margin: auto .5rem;
    padding: .3rem .8rem;
    display: inline-block;
    line-height: 1;
    font-family: var(--bc-ff-heading);
    font-weight: 800;
    font-size: max(calc(1em - .6rem), 1.3rem);
}

.betaFeature::after {
    content: "BETA";
    background: rgba(88, 101, 242, .37);
    color: rgb(88, 101, 242);
}

.alphaFeature::after {
    content: "ALPHA";
    background: rgba(249, 151, 26, 0.37);
    color: rgb(249, 151, 26);
}

.page-header {
    border: 1px solid var(--bc-clr-primary-400);
    border-radius: .5rem;
    margin-block: 4rem;
    padding: 2rem;
}

.page-title {
    font-family: var(--bc-ff-heading);
    font-size: var(--bc-fs-900);
    font-weight: 900;
    color: var(--bc-clr-primary-400);
}

.page-desc {
    line-height: 1;
    color: var(--bc-clr-primary-600);
}

.save-error {
    margin: 0;
    font-family: var(--bc-ff-heading);
    font-size: var(--bc-fs-700);
    font-weight: 800;
    color: var(--bc-clr-danger-400);
}

.save-error:empty {
    display: none;
}

body:not(.loaded) {
    display: grid;
    place-items: center;
    overflow: hidden;
}

body:not(.loaded) #pageLoader:not(:empty) {
    position: relative;
    letter-spacing: 1rem;
    font-size: 6rem;
    color: var(--bc-clr-dark-100);
}

body:not(.loaded) #pageLoader:not(:empty)::before {
    content: "i";
    position: absolute;
    left: 17.3rem;
    transform: translate(-125px -9px);
    animation: pageLoader_before 1.5s linear infinite;
}

body:not(.loaded) #pageLoader:not(:empty)::after {
    content: "";
    background: var(--bc-clr-secondary-400);
    border-radius: 50%;
    position: absolute;
    left: .2rem;
    top: 1rem;
    width: 1.1rem;
    aspect-ratio: 1 / 1;
    animation: pageLoader_after 1.5s linear infinite;
}

body:not(.loaded)>*:not(#pageLoader) {
    display: none;
}

body.loaded #pageLoader {
    display: none;
}

@keyframes pageLoader_before {

    0%,
    55%,
    90%,
    100% {
        translate: 0 0;
    }

    77% {
        translate: 0 -1rem;
    }
}

@keyframes pageLoader_after {
    0% {
        transform: translate(-12.5rem, -.9rem) scaleX(1);
    }

    5.5% {
        transform: translate(-11.1rem, -2.2rem) scaleX(1.05);
    }

    11% {
        transform: translate(-9.4rem, -3.2rem) scaleX(1.07);
    }

    16.5% {
        transform: translate(-7.0rem, -3.7rem) scaleX(1.1);
    }

    22% {
        transform: translate(-4.6rem, -3.5rem) scaleX(1.1);
    }

    27.5% {
        transform: translate(-2.7rem, -2.8rem) scaleX(1.07);
    }

    33% {
        transform: translate(-1.2rem, -1.6rem) scaleX(1.05);
    }

    38.5% {
        transform: translate(.0rem, .0rem) scaleX(1);
    }

    44% {
        transform: translate(2.4rem, -1.6rem) scaleX(1.05);
    }

    49.5% {
        transform: translate(4.9rem, -2.8rem) scaleX(1.07);
    }

    55% {
        transform: translate(7.3rem, -3.5rem) scaleX(1.1);
    }

    60.5% {
        transform: translate(9.8rem, -3.7rem) scaleX(1.1);
    }

    66% {
        transform: translate(12.2rem, -3.2rem) scaleX(1.07);
    }

    71.5% {
        transform: translate(14.7rem, -2.2rem) scaleX(1.05);
    }

    77% {
        transform: translate(17.3rem, -.9rem) scaleX(1);
    }

    82.5% {
        transform: translate(19.7rem, -1.6rem) scaleX(1.05);
    }

    88% {
        transform: translate(22.2rem, -2.8rem) scaleX(1.07);
    }

    93.5% {
        transform: translate(24.6rem, -3.5rem) scaleX(1.1);
    }

    100% {
        transform: translate(27.1rem, -3.7rem) scaleX(1.1);
    }
}

#error {
    border: none;
    margin: 15vh auto 0 auto;
    width: fit-content;
    white-space: nowrap;
    line-height: 2;
    text-align: center;
    font-family: var(--bc-ff-heading);
    font-size: var(--bc-fs-600);
    font-weight: 100;
    color: var(--bc-clr-text-600);
}

#error::first-line {
    font-family: var(--bc-ff-body);
    font-size: var(--bc-fs-800);
    font-weight: 800;
    color: var(--bc-clr-danger-200)
}

#error:empty {
    display: none;
}

#contentLoader {
    border-top: 3px solid var(--bc-clr-primary-400);
    border-right: 1px solid transparent;
    border-radius: 5rem;
    margin: 30vh auto 0 auto;
    display: block;
    width: 5rem;
    aspect-ratio: 1 / 1;
    animation: contentLoader 1s infinite;
}

@keyframes contentLoader {
    from {
        rotate: 0deg
    }

    to {
        rotate: 360deg
    }
}

.content-wrapper {
    display: none;
}

#contentLoader:not([style])~ :is(.container, .content-wrapper) {
    display: none !important;
}

.top-notice {
    background: var(--bc-clr-danger-600);
    border: 1px solid var(--bc-clr-danger-400);
    border-radius: .5rem;
    padding-block: 0.5rem;
    margin: .5rem .5rem 0 .5rem;
    text-align: center;
    font-size: var(--bc-fs-500);
    color: var(--bc-clr-text-100);
}

.alert {
    background: var(--bc-clr-alert-200);
    border: 1px solid var(--bc-clr-alert-400);
    border-radius: .5rem;
    margin-block: 1rem;
    padding: 1rem;
    color: var(--bc-clr-alert-600);

    --bc-clr-alert-200: var(--bc-clr-dark-900);
    --bc-clr-alert-400: var(--bc-clr-dark-800);
    --bc-clr-alert-600: var(--bc-clr-text-100);
}

.alert[data-alert-style="danger"] {
    --bc-clr-alert-200: var(--bc-clr-danger-600);
    --bc-clr-alert-400: var(--bc-clr-danger-400);
}

.alert[data-alert-style="warning"] {
    --bc-clr-alert-200: var(--bc-clr-secondary-600);
    --bc-clr-alert-400: var(--bc-clr-secondary-400);
}

.alert[data-alert-style="success"] {
    --bc-clr-alert-200: var(--bc-clr-success-600);
    --bc-clr-alert-400: var(--bc-clr-success-400);
}

.alert[data-alert-style="info"] {
    --bc-clr-alert-200: var(--bc-clr-primary-600);
    --bc-clr-alert-400: var(--bc-clr-primary-400);
}

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