@font-face {
    font-family: "Caveat";
    src: url('Caveat-Regular.woff2');
}

:root {
    --browser-theme-color: #be6d75;
    --ui-color-background1: #e9e9e9;
    --ui-color-background2: #dcc4c0;
    --ui-color-text: #000000;
    --ui-color-accent1: #be6d75;
    --ui-color-accent2: #c91f5c;
    --ui-color-border1: #00000040;
    --ui-color-border2: #00000060;
    --ui-color-disabled: #808080;
    --ui-color-form-background: #d0a5af;
    --ui-color-form-highlighted: #ffcad6;
    --ui-color-form-text: #000000;
    --ui-color-form-border: #00000040;
    --ui-color-form-border-selected: #00000080;
    --ui-color-form-disabled: #8f7178;
    --flowchart-Assign-color2: #868664;
    --flowchart-Assign-color1: #aaaa7f;
    --flowchart-Assign-color3: #000000;
    --flowchart-Input-color2: #946f6d;
    --flowchart-Input-color1: #ad8380;
    --flowchart-Input-color3: #000000;
    --flowchart-Output-color2: #a46d70;
    --flowchart-Output-color1: #de9397;
    --flowchart-Output-color3: #000000;
    --flowchart-If-color2: #b98b8b;
    --flowchart-If-color1: #ffbfbf;
    --flowchart-If-color3: #000000;
    --flowchart-DoWhile-color2: #a5175e;
    --flowchart-DoWhile-color1: #d81e7b;
    --flowchart-DoWhile-color3: #000000;
    --flowchart-While-color2: #a5175e;
    --flowchart-While-color1: #d81e7b;
    --flowchart-While-color3: #000000;
    --flowchart-For-color2: #a5175e;
    --flowchart-For-color1: #d81e7b;
    --flowchart-For-color3: #000000;
    --flowchart-Breakpoint-color2: #a61b45;
    --flowchart-Breakpoint-color1: #ec275f;
    --flowchart-Breakpoint-color3: #000000;
    --flowchart-Comment-color2: #808080;
    --flowchart-Comment-color3: #000000;
    --flowchart-Comment-dashLength: 4;
    --flowchart-Turtle-Move-color1: #de9397;
    --flowchart-Turtle-Move-color2: #a46d70;
    --flowchart-Turtle-Move-color3: #000000;
    --flowchart-Turtle-Turn-color1: #aaaa7f;
    --flowchart-Turtle-Turn-color2: #868664;
    --flowchart-Turtle-Turn-color3: #000000;
    --flowchart-Turtle-Home-color1: #aaaa7f;
    --flowchart-Turtle-Home-color2: #868664;
    --flowchart-Turtle-Home-color3: #000000;
    --flowchart-Error-color1: #a5bbd3;
    --flowchart-Error-color2: #aa0000;
    --flowchart-Error-color3: #000000;
    --flowchart-Round-color1: #e392a5;
    --flowchart-Round-color2: #9f6673;
    --flowchart-Round-color3: #000000;
    --flowchart-Block-outline-thickness: 1.25;
    --flowchart-Block-highlight-color1: #ffffff;
    --flowchart-Block-highlight-color2: #b02020;
    --flowchart-Block-highlight-color3: #000000;
    --flowchart-Font-family: 'Caveat';
    --flowchart-Font-svgEmbeddableFile: 'themes/Caveat-Regular.woff2';
    --flowchart-Block-font-size: 15;
    --flowchart-Block-wrapMode: old;
    --flowchart-Line-thickness: 1.75;
    --flowchart-Line-arrow-size: 5;
    --flowchart-Line-color: #000000;
    --flowchart-Line-font-size: 12;
    --flowchart-Line-selected-color: #ff4020;
    --flowchart-selected-color1: #be6d75;
    --flowchart-selected-color2: #b02020;
    --flowchart-selected-color3: #ffffff;
    --flowchart-Block-text-maxWidth: 20;
    --flowchart-Comment-text-maxWidth: 23;
    --flowchart-Padding-base: 7;
    --flowchart-scrollbar-color: #00000060;
    --flowchart-scrollbar-thickness: 4;
    --turtle-color-cursor: #ff4020;
    --turtle-color-background: #e9d7d7;
    --turtle-color-foreground: #a61b45;
    --toast-background: #000000c0;
    --toast-color: #ffffff;
}

#bar {
    color: var(--ui-color-text);
}

#bar button[disabled] {
    color: var(--ui-color-text) !important;
    opacity: 0.3;
}

#flowchartArea::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('blossoms.svg');
    background-size: cover;
    opacity: 0.2;
}

@keyframes errorFlash {
    0% {
        box-shadow: 0 0 0 0rem #ffffff inset;
    }

    25% {
        box-shadow: 0 0 0 var(--ui-measure-border-thick) #ffffff inset;
    }

    50% {
        box-shadow: 0 0 0 0rem #ffffff inset;
    }

    75% {
        box-shadow: 0 0 0 var(--ui-measure-border-thick) #ffffff inset;
    }

    100% {
        box-shadow: 0 0 0 0rem #ffffff inset;
    }
}

#man {
    background: #ffffff;
}

#man a {
    color: var(--ui-color-accent2);
}

#editor2>div:hover,
#turtleMenu>div:hover {
    color: var(--ui-color-text);
}

#input_send {
    background: var(--ui-color-accent2);
}

#input:focus {
    box-shadow: 0 0 0 var(--ui-measure-border-thick) var(--ui-color-accent2) inset;
}
