:root {
    --container-outline-color: rgba(51, 51, 51, 0.5);
    --content-outline-color: rgba(85, 85, 85, 0.5);
    --sub-content-outline-color: rgba(119, 119, 119, 0.5);
    --container-background-color: rgba(221, 221, 221, 0.5);
    --content-background-color: rgba(187, 187, 187, 0.5);
    --sub-content-background-color: rgba(170, 170, 170, 0.5);
    --viewport-background-color: rgb(238, 238, 238);
    --default-color: rgb(34, 34, 34);
    --default-inverse-color: rgb(221, 221, 221);
    --disabled-color: rgb(119, 119, 119);
}

:root {
    --lucency-red: rgba(238, 0, 0, 0.8);
    --lucency-yellow: rgba(238, 238, 0, 0.8);
    --lucency-blue: rgba(0, 0, 238, 0.8);
    --lucency-green: rgba(0, 238, 0, 0.8);

    --lucency-reddish: rgba(193, 44, 31, 0.5);
    --lucency-yellowish: rgba(255, 238, 111, 0.5);
    --lucency-bluish: rgba(111, 155, 255, 0.5);
    --lucency-greenish: rgba(111, 255, 111, 0.5);

    --radius: 5px;
    --margin: 8px;
    --shadow: 4px 4px 4px;

    --blur: blur(15px);

    --border-width: 1px;
    --hover-border-width: calc(2 * var(--border-width));

    --label-font-size: xx-small;

    --node-width: 180px;
    --node-height: 30px;

    --copyright-color: var(--sub-content-outline-color);
    --scrollbar-color: var(--content-outline-color);
    --icon-color: var(--default-color);
}

html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    scrollbar-color: var(--scrollbar-color) transparent;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

* {
    font-family: "Microsoft YaHei", "sans serif", "serif";
    box-sizing: border-box;
    color: var(--default-color);
    transition: background-color 0.5s ease, color 0.5s ease;
    touch-action: none;
    text-overflow: ellipsis;
}

a,
a:visited {
    color: var(--lucency-bluish);
    text-decoration: none;
}

a:hover {
    color: var(--lucency-blue);
    cursor: pointer;
}

.icon-svg * {
    fill: var(--icon-color);
}

#main-window {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#viewport {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--viewport-background-color);
    overflow: hidden;
    z-index: 0;
}

#canvas {
    position: absolute;
    z-index: 0;
}

#canvas-mask {
    user-select: none;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--container-background-color);
    backdrop-filter: var(--blur);
    z-index: 1;
    display: none;
}

#copyright {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    user-select: none;
    pointer-events: none;
    color: var(--copyright-color);
    z-index: 1;
}

.bold-outline-element {
    outline: var(--hover-border-width) solid var(--default-color) !important;
}